Skip to main content

Create customer with payment instrument

Overview​

Create customer​

To create customer specify parameters in Customers API call. Minimal required set consists of:

firstName
lastName
email
phoneNumber
primaryAddress - object that contains:

  • firstName
  • lastName
  • address1
  • country
  • city
  • region
  • postalCode

Example:

curl --location 'https://staging-api.payments.ai/v1/public-api/organizations/:organizationId/customers' \
--header 'Content-Type: application/json' \
--header 'Authorization: ApiKey <keyValue>' \
--data-raw '{
    "primaryAddress": {
        "firstName": "John",
        "lastName": "Doe",
        "address": "36 Craven St",
        "city": "London",
        "region": "London",
        "country": "US",
        "zip": "WC2N 5NF"
    },
    "email": "[email protected]",
    "phoneNumber": "123-456-7890",
    "firstName": "John",
    "lastName": "Doe"
}'

Create payment instrument - Framepay​

Prerequisites​

  • organizationId - provided after merchant registration
  • publishableKey - use request to get one
  • websiteId - provided after merchant registration

Create payment instrument token using Framepay component​

To create PCI-compliant payment instrument token you will need to use Framepay library. Please refer to Framepay documentation for more details.
Example component would look like:

<!doctype html>
<html>
  <head>
    <link href="https://framepay.payments.ai/framepay.css" rel="stylesheet" />
    <script src="https://framepay.payments.ai/framepay.js"></script>
  </head>
  <body>
    <form id="payment-form">
      <input id="first-name" placeholder="First Name" />
      <input id="last-name" placeholder="Last Name" />
      <div id="mounting-point"></div>
    </form>
    <button id="submit-button">Submit</button>
    <script src="index.js"></script>
  </body>
</html>
Framepay.initialize({
  publishableKey: `${publishableKey}`,
  transactionData: {
    currency: 'USD',
    amount: 10,
  },
});
Framepay.on('ready', function () {
  const card = Framepay.card.mount('#mounting-point');
});
const submitButton = document.getElementById('submit-button');

submitButton.addEventListener('click', async function () {
  try {
    const form = document.getElementById('payment-form');
    const firstName = document.getElementById('first-name').value;
    const lastName = document.getElementById('last-name').value;
    const paymentToken = await Framepay.createToken(form, {
      billingAddress: { firstName, lastName },
    });
    console.log(paymentToken);
  } catch (error) {
    console.log('❌ Create token error:', error);
  }
});

If you would see errors during the Framepay initialize phase we suggest to use the serve package. Thanks to it you could run command:

npx serve

and then run the page with the FramePay from the folder.

Token that you should use in the next step is the ID of the object that has been returned by the console.log.

Coinbase token​

To obtain Coinbase token it's necessary to modify Framepay.createToken request payload with method: 'cryptocurrency'. Example is shown below.

Framepay.initialize({
  publishableKey: `${publishableKey}`,
  transactionData: {
    currency: 'USD',
    amount: 10,
  },
});
// Credit card element is no longer required
// Framepay.on('ready', function () {
//   const card = Framepay.card.mount('#mounting-point');
// });
const submitButton = document.getElementById('submit-button');

submitButton.addEventListener('click', async function () {
  try {
    const form = document.getElementById('payment-form');
    const firstName = document.getElementById('first-name').value;
    const lastName = document.getElementById('last-name').value;
    const paymentToken = await Framepay.createToken(form, {
      billingAddress: { firstName, lastName },
      method: 'cryptocurrency',
    });
    console.log(paymentToken);
  } catch (error) {
    console.log('❌ Create token error:', error);
  }
});

Attach payment instrument to customer​

To attach token to customer specify parameters in Customers API call: token - tokenized payment instrument received in previous step.

Example:

curl --location 'https://staging-api.payments.ai/v1/public-api/organizations/:organizationId/customers/:customerId/payment-instruments' \
--header 'Content-Type: application/json' \
--header 'Authorization: ApiKey <keyValue>' \
--data '{
    "token": "{{tokenValue}}"
}'