A React hook for collecting card or payment source details for Omise payment gateway.

Credit/debit card payments require 'tokens' which can generated by the createTokenPromise function. Non-card payments require 'sources' which can be generated by the createSourcePromise function.

Install with npm

npm install use-omise

or with yarn

yarn add use-omise

And make sure you also have React installed at version 16.8 or above.

Creating a token for debit/credit card payments:

function PaymentForm() {
  const { loading, createTokenPromise } = useOmise({
    publicKey: 'YOUR-OMISE-PUBLIC-KEY',
  });

  if (loading) return <div>Loading OmiseJS...</div>;

  const handleSubmit = async (cardFormValues) => {
    try {
      const token = await createTokenPromise('card', cardFormValues);
      // Send the token to your server to create a charge
    } catch (error) {
      // Handle error on the UI
    }
  };

  return <CreditCardForm handleSubmit={handleSubmit} />;
}

The cardFormValues object will hold the details of the card to be charged, e.g.

{
  name: "Example card holder",
  number: "4242424242424242",
  security_code: "111",
  expiration_month: "06",
  expiration_year: "2020"
}

const {
  loading,
  createTokenPromise,
  createSourcePromise,
  createToken,
  createSource,
  checkCreateTokenError,
} = useOmise({ publicKey: 'YOUR-OMISE-PUBLIC-KEY' });

Note: It is recommended that you use the createTokenPromise and createSourcePromise functions for creating tokens and sources - this allows you to use async/await and promise chaining syntax rather than callbacks. The promisified token function also uses the checkCreateTokenError helper function internally to check for all possible errors.

1. Loads the Omise.js script. By default it will use the primary CDN (Singapore) but the secondary CDN (Japan) can also be used
2. Once loaded, it will initialise Omise by setting the public key that you provide
3. Returns you the functions needed to create tokens/source which can then be used to make charges on the server