Build your checkout

1

import Primer from '@primer-io/checkout-web'

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
            return 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.
        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

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

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