1configure(options: HeadlessUniversalCheckoutOptions): voidConfigure the Headless Checkout instance with the provided options.
Parameters
optionsobject
Options for a Headless Universal Checkout, its properties can be defined to configure the checkout experience.onAvailablePaymentMethodsLoad(paymentMethods: PaymentMethodInfo[]) => voidRequired
Called when the available payment methods have been loaded. Takes an array of objects as its argument.PaymentMethodInfo
typePaymentMethodTypeRequired
The type of payment method, one of PaymentMethodType.
managerType"CARD" | "NATIVE" | "REDIRECT"Required
The type of payment manager to use.localestring
This option forces the locale for certain UI elements. By default, the locale will be set to the browser's locale.Payment lifecycle callbacks
onPaymentCreationStart() => void
Notifies you before the checkout tokenizes a payment method and creates a payment.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.
Parameters
dataobject
Properties
paymentMethodTypestring
The type of the payment method Primer will use for payment creation, one of paymentMethodTypeshandlerobject
Provides two methods to continue or abort the payment.
Choose to abort a payment.
1return handler.abortPaymentCreation()Choose to continue with payment creation
1return 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.
Parameters
dataobject
Properties
paymentobject
Properties
idstring
Primer's unique identifier for the payment.orderIdstring
Your order identifier as provided in the client session.paymentMethodDataobject
Optional payment method data - for some payment methods this object will contain additional information on the payment.onCheckoutFail(error: PrimerClientError, data: object, handler: object) => void
Called when the checkout flow has failed.
Parameters
errorPrimerClientError
Properties
codeErrorCode
messagestring
diagnosticsIdNullable<string>
dataobject
isFromDeveloperboolean
fromErrorCode(code: ErrorCode, options: ErrorOptions) => PrimerClientError
dataobject
Properties
paymentobject
When checkout fails, the payment might or might not have been created. If it was created, the payment object contains some information regarding it.Properties
idstring
Primer's unique identifier for the payment.orderIdstring
Your order identifier as provided in the client session.paymentMethodDataobject
Optional payment method data - for some payment methods this object will contain additional information on the payment.handlerobject
If handler is undefined, the SDK does not expect anything from you.
If handler exists, you MUST call one of the functions of the handler.
12345678910111213141516
import { Primer } from '@primer-io/checkout-web' headless.configure(clientToken, { onCheckoutComplete(...args) { console.log('onCheckoutComplete', ...args) }, onCheckoutFail(error, data, handler) { if (!handler) { return } // Tells the SDK that it can proceed // Note: this does not show any error message return handler.showErrorMessage() },})
Properties
showErrorMessage() => void
Tells the SDK that the error has been properly handled by your application. This does not display any error message.Payment methods options
allowedCardNetworksCardNetwork[]
Allowed card networks for credit card payments, one of CardNetwork.