Build your checkout

1
2
3
4
5
6
7
8
9
10
11

// checkout.js
window.addEventListener('load', onLoaded);
async function onLoaded() {
  const primer = new Primer({
    credentials: {
      clientToken: '<YOUR_CLIENT_TOKEN>', // Your server generated client token
    },
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// checkout.js
window.addEventListener('load', onLoaded);
async function onLoaded() {
  const primer = new Primer({
    credentials: {
      clientToken: '<YOUR_CLIENT_TOKEN>', // Your server generated client token
    },
  });
  // Use `.checkout()` to initialize and render the UI
  await primer.checkout({
    // specify the selector of the container element
    container: '#checkout-container',
    /**
      * When a payment method is chosen and the customer clicks 'Pay',
      * the payment method is tokenized and you'll receive a token in the
      * `onTokenizeSuccess` callback which you can send to your server
      * to authorize a transaction.
      */
    onTokenizeSuccess(paymentMethod) {
      // Send the payment method token to your server
      fetch('<YOUR_SERVER_URL>', {
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(paymentMethod),
      });
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// checkout.js
window.addEventListener('load', onLoaded);
async function onLoaded() {
  await primer.checkout({
    // In addition to the other options above
    // Add your company's alpha2 ISO country code
    countryCode: 'FR',
    // Add the total sale amount for the APM to display
    purchaseInfo: {
      totalAmount: {
        currency: 'EUR',
        value: 700,
      },
    },
    // Carry on with sending the token to your server for authorization.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// checkout.js
/**
  * Provide authentication information about your customer and the order.
  * For the best result, provide as much information as you can.
  * The options for 3DS are as follows:
  */
const threeDSecureOptions = {
  // All of the order properties are mandatory and should be provided.
  order: {
    orderId: 'my-order-id',
    email: 'john.doe@email.com',
    billingAddress: {
      firstName: 'John',
      lastName: 'Doe',
      addressLine1: '123 Fake St',
      city: 'Paris',
      countryCode: 'FR',
      postalCode: '123456',
    },
    amount: {
      currency: 'EUR',
      value: 1199,
    },
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// checkout.js
await primer.checkout({
  // ... other options
  card: {
    css: `
      input {
        font-family: 'Open Sans', sans-serif;
      }
      form.submitted input.error {
        color: #f44336;
      }
    `,
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// checkout.js
await primer.checkout({
  // ... other options
  // transitions describes the scene transitions in the Universal Checkout
  transitions: {
    // You can specify the duration of an enter/exit transition in milliseconds
    duration: {
      enter: 200,
      exit: 200
    },
    /**
      * You can subscribe to various points of the transition
      * for a scene using the following callback options.
      * Each callback receives the html element of the scene
      * as the first argument.
      */
    onEnter(node) {},
    onEntering(node) {},
    onEntered(node) {},
    onExiting(node) {},
    onExited(node) {},
    onExit(node) {},
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// checkout.js
window.addEventListener('load', onLoaded);
async function onLoaded() {
  // Create a client as described in the 'Initializing the SDK' section
  const client = new Primer({
    credentials: { clientToken: '<YOUR_CLIENT_TOKEN>' }, // Your server generated client token
  });
  // Use `.render()` to initialize and render the components
  await primer.render({
    // Card form options
    card: {
      /**
        * This is the selector of your button which submits the
        * card details for tokenization.
        */
      submitButton: '#pay-now-button',

1
2
3

button.addEventListener('click', () => {
  checkout.card.tokenize();
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// checkout.js
primer.render({
  // other options as described before
  // These APMs will require your company's country alpha2 country code
  countryCode: 'FR',
  // You'll also need to tell them how much you're going to charge the customer
  purchaseInfo: {
    totalAmount: {
      currency: 'EUR',
      value: 1995,
    },
  },
  // Now just add the selectors of your buttons to the options for each APM
  applePay: { container: '#pay-with-apple-pay' },
  googlePay: { container: '#pay-with-google-pay' },
  paypal: { container: '#pay-with-paypal' },
  onTokenizeSuccess(paymentMethod) {
    // Send the payment method token to your server for authorization
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// checkout.js
const threeDSecureOptions = {
  // All of the order properties are mandatory and should be provided.
  order: {
    orderId: 'my-order-id',
    email: 'john.doe@email.com',
    billingAddress: {
      firstName: 'John',
      lastName: 'Doe',
      addressLine1: '123 Fake St',
      city: 'Paris',
      countryCode: 'FR',
      postalCode: '123456',
    },
    amount: {
      currency: 'EUR',
      value: 1199,
    },
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// checkout.js
await primer.render({
  card: {
    submitButton: '#pay-now',
    fields: {
      cardNumber: { container: '#number-input' },
      cvv: { container: '#cvv-input' },
      expiryDate: { container: '#date-input' },
    },
  },
  onTokenizeSuccess: onCardTokenized,
});
async function onCardTokenized(paymentMethod) {
  const authorization = await primer.threeDSecure.verify({
    token: paymentMethod.token,
    container: '#threeds-modal',
    onChallengeStart: () => toggleModalVisible(true),
    onChallengeEnd: () => toggleModalVisible(false),
    order: threeDSecureOptions.order,
    additionalInfo: threeDSecureOptions.additionalInfo,
  });
  if (authorization.status === Primer.ThreeDSecureStatus.SUCCESS) {