onPaymentCreationStart() => void

onBeforePaymentCreate(data: object, handler: object) => void

Called when a payment will be created. Use as an opportunity to update UI accordingly - for example, to display a "loading" component. The handler must be used to then abort or continue with payment creation. Primer will continue with payment creation if onBeforePaymentCreate is not implemented.

1

return handler.abortPaymentCreation()

1

return handler.continuePaymentCreation()

onCheckoutComplete(data: object) => void

Called when a payment has been created. Move on to next step in your checkout flow, such as showing a success message, giving access to the service, fulfilling the order, etc.

onCheckoutFail(error: PrimerClientError, data: object, handler: object) => void

Called when the checkout flow has failed. This callback can also be used to display an error state within your own UI.

12345678910111213141516171819

import { Primer } from '@primer-io/checkout-web' const checkout = await Primer.showUniversalCheckout(clientToken, {    container: '#container',    onCheckoutComplete(...args) {        console.log('onCheckoutComplete', ...args)    },    onCheckoutFail(error, data, handler) {        if (!handler) {            return        }         // Show a default error message        return handler.showErrorMessage()         // Or show a custom error message        // return handler.showErrorMessage('This is my custom message');    },})

onBeforeClientSessionUpdate() => void

onClientSessionUpdate(clientSession: ClientSession) => void

onPaymentMethodAction(action: string, data: object) => void

Notifies you when a specific payment method has been selected or unselected.

cardobject

redirectobject

paypalobject

googlePayobject

applePayobject

klarnaobject

directDebitobject

giftCardobject

styleCheckoutStyle

See the CheckoutStyle page.

formobject

submitButtonobject

Drop-In Checkout allows you to use your own submit button for submitting forms. By default, the built-in submit button will be favored.

Note that when disabling the built-in submit button and using your own custom submit button, it is required to implement the submit function in order to notify Drop-In Checkout of form submissions.

When using your own custom submit button, it's important to use the following callbacks to ensure that your submit button is in the correct state and in sync with the checkout as your customers interact with it.

123456789101112131415161718192021222324252627

const options = {    /* Other options ... */     submitButton: {        useBuiltInButton: false, // Default to true         // Callback for receiving the submit button's visible state in the current scene        onVisible(isVisible, context: { currentSceneId }) {            // Show or hide your custom submit button        },         // Callback for receiving the submit button's disabled state in the current scene        onDisable(isDisabled, context: { currentSceneId }) {            // Disable or enable your custom submit button        },         // Callback for receiving the submit button's loading state in the current scene        onLoading(isLoading, context: { currentSceneId }) {            // Show your submit button in a loading state        },         // Callback for receiving the submit button's content in the current scene        onContentChange(content, context: { currentSceneId }) {            // Set your submit button's content with either the content provided or your own custom content        },    },}

processingIndicatorobject

errorMessageobject

successScreenfalse | object

When the checkout is succefully complete, Drop-In Checkout displays a success scene with a default success message "Your payment was successful!".

Set the option successScreen to modify the default behavior of the success scene.

Remove the success screen:

1234

const options = {    /* Other options ... */    successScreen: false,}

Change the message of the default success screen:

1234567

const options = {    /* Other options ... */    successScreen: {        type: 'CHECK',        title: 'This is a custom success message!',    },}

The payment methods featuring a dedicated screen allow you to directly display their flow. For that, make sure to:

Set uxFlow to SINGLE_PAYMENT_METHOD_CHECKOUT Set paymentMethod to the payment method you want to display

123456

const options = {  /* Other options ... */   uxFlow: 'SINGLE_PAYMENT_METHOD_CHECKOUT',  paymentMethod: 'PAYMENT_CARD',};

logoSrcstring

backgroundstring

logoAltstring

textstring