Build your checkout

1
2
3
4
5

import { loadPrimer } from "@primer-io/checkout-web";
loadPrimer().then((Primer) => {
  // Start your integration
});

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

// client.js
window.addEventListener("load", onLoaded);
async function onLoaded() {
  const clientTokenResponse = await fetch("/client-token", {
    method: "post",
    headers: { "Content-Type": "application/json" },
  });
  const { clientToken } = await clientTokenResponse.json();
  const primer = new Primer({
    credentials: {
      clientToken, // 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
31
32
33
34
35
36

// client.js
window.addEventListener("load", onLoaded);
async function onLoaded() {
  const clientTokenResponse = await fetch("/client-token", {
    method: "post",
    headers: { "Content-Type": "application/json" },
  });
  const { clientToken } = await clientTokenResponse.json();
  const primer = new Primer({
    credentials: {
      clientToken, // 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
      return fetch("/api/authorize", {
        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

// client.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.
    onTokenizeSuccess(paymentMethod) {

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

// client.js
await primer.checkout({
  // ... other options
  /**
   * 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:
   */
  threeDSecure: {
    // 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

// client.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

// client.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

// client.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

// client.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

// client.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

// client.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) {