1234
createHeadless( clientToken: string, options?: HeadlessUniversalCheckoutOptions,): Promise<PrimerHeadlessCheckout>
Create an instance of PrimerHeadlessCheckout, which is used to interact with the Primer API in a headless environment.
Starting from the version 2.45.0
, the options
parameter should be used instead of the deprecated configure
method. If both are used simultaneously, the SDK will throw an error.
Note: the configure
method must be called before the start
method.
- The
start
method must be called to begin the checkout process.
Parameters
A string containing a client token as returned by the Primer API when you create a client session.
Parameters
Properties
The type of payment method, one of PaymentMethodType.
Payment lifecycle callbacks
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
Properties
The type of the payment method Primer will use for payment creation, one of PaymentMethodType
Provides two methods to continue or abort the payment.
You MUST call one of the methods of the handler if onBeforePaymentCreate
is implemented.
Choose to abort a payment.
1
return handler.abortPaymentCreation()
Choose to continue with payment creation
1
return handler.continuePaymentCreation()
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
Properties
Properties
Called when the checkout flow has failed.
Parameters
Properties
Properties
Properties
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' Primer.createHeadless(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
Payment methods options
Properties
Properties
Properties
Properties
Allowed card networks for credit card payments, one of CardNetwork.
Manual payment handling
The paymentHandling
option defines how the SDK should handle payment creation and resume.
The default is AUTO
, set paymentHandling
to MANUAL
to turn off automatic payment handling. This disables the callbacks onBeforePayment
and onCheckoutComplete
.
Two callbacks must be implemented:
onTokenizeSuccess()
to create payments with thepaymentMethodToken
.onResumeSuccess()
to resume payments withresumeToken
.
See the Manual Payment Creation guide for examples.
The guide's examples are written for PrimerCheckout
, but the same concepts apply to PrimerHeadlessCheckout
.
If you set paymentHandling
to MANUAL
, implementing this is mandatory.
Parameters
Properties
The payment instrument token you can use to create a payment request from your backend.
An unique identifier for the payment instrument token.
Additional information about the payment instrument. Depending on the payment method type, only some of the following properties are present on the object.
Properties
The type of the payment method used for the transaction, one of PaymentMethodType.
Data related to 3D Secure authentication for the transaction.
Properties
Indicates the outcome of the 3D Secure authentication process.
Possible values:
AUTH_SUCCESS
: The authentication was successful.AUTH_FAILED
: The authentication process failed.SKIPPED
: The authentication was skipped.CHALLENGE
: A challenge was issued during the authentication process.
Indicates whether a challenge was issued as part of the authentication process.
true
: A challenge was issued.false
: No challenge was issued.
The type of the payment instrument.
Example of possible values (new values could be added as we add new payment methods):
APPLE_PAY
CARD_OFF_SESSION_PAYMENT
GOOGLE_PAY
KLARNA_CUSTOMER_TOKEN
OFF_SESSION_PAYMENT
PAYMENT_CARD
PAYPAL_BILLING_AGREEMENT
PAYPAL_ORDER
Data related to 3D Secure authentication for the transaction.
Properties
Indicates the outcome of the 3D Secure authentication process.
Possible values:
AUTH_SUCCESS
: The authentication was successful.AUTH_FAILED
: The authentication process failed.SKIPPED
: The authentication was skipped.CHALLENGE
: A challenge was issued during the authentication process.
Indicates whether a challenge was issued as part of the authentication process.
true
: A challenge was issued.false
: No challenge was issued.
Properties
The customerId
associated to the payment method, if vaulted.
Properties
Display errorMessage
as an error or failure message.
Continue the payment flow using the given clientToken
.
Called after a customer submitted their payment data and the payment details have been tokenized.
You'll receive a paymentMethodToken
in onTokenizeSuccess()
.
Create a payment request passing the
paymentMethodToken
to your backendIf the payment is successful, call
handler.handleSuccess()
in order to display a success screenIf the payment is unsuccessful, call
handler.handleFailure(errorMessage)
to display an error or failure messagePayments API may return a new
clientToken
for additional steps (in therequiredActions
on the response). In this case, callhandler.continueWithNewClientToken(clientToken)
to continue with the payment flow
Called after a customer submitted their payment data and the payment details could not be tokenized.
Use the PrimerClientError
data to display an error message.
Parameters
Properties
Called when the resume token must be sent to your server to resume the payment flow, typically after the customer has completed some authorization step outside of the Primer SDK.
If you set paymentHandling
to MANUAL
, handling onResumeSuccess()
is required to fully support 3DS and the majority of payment methods.
Parameters
Properties
The resume token you can use to resume the payment flow on your backend.
Properties
Display errorMessage
as an error or failure message.
Continue the payment flow using the given clientToken
.
You will receive a
resumeToken
via theonResumeSuccess()
callback if applicableSend a resume payment request with the
resumeToken
If the payment is successful, call
handler.handleSuccess()
in order to display a success screenIf the payment is unsuccessful, call
handler.handleFailure(errorMessage)
to display an error or failure messageThe Payments API may again return a new
clientToken
for additional steps. In this case, callhandler.continueWithNewClientToken(clientToken)
again
Called when the payment cannot be resumed.
Use the PrimerClientError
data to display an error message.
Parameters
Properties
Called to determine if the payment method tokenization should start.
Parameters
An object containing a paymentMethodType
property, one of PaymentMethodType.
Implement this if you need to abort the payment method tokenization according to your own logic. You should return true
to continue or false
to abort.
Called just before the payment method tokenization starts. Implement this to perform any custom action, for example, displaying a custom loading indicator.
Called if the payment method tokenization did not start. Receives a reason
as a string.
Parameters
TOKENIZATION_SHOULD_NOT_START
: tokenization was interrupted returningfalse
fromonTokenizeShouldStart
.TOKENIZATION_DISABLED
: tokenization was disabled usingsetIsTokenizationEnabled
orsetPaymentCreationEnabled
.
Client session lifecycle callbacks
Client session caching
Before enabling the flag to true
it's recommended to reach out to Primer support for additional verification since there are edge cases where it's not advised.
Indicates whether client session caching is enabled.
When set to true
, responses from the server will be cached on the client side, allowing for faster subsequent
access to the same data within the cache duration. When set to false
, every request to the server will be
processed without utilizing any client-side cache, ensuring that the client always receives the most up-to-date data.
Returns
A promise that resolves with an instance of PrimerHeadlessCheckout, which can be used to create and manage payments with your own UI components.
Example
See guide on initializing Headless Checkout for more details.
123456789101112
import { Primer } from '@primer-io/checkout-web' const clientToken = 'YOUR_CLIENT_TOKEN'const paymentMethodType = 'PAYMENT_CARD' async function createHeadlessCheckout() { const primerHeadlessCheckout = await Primer.createHeadless(clientToken, options) // Use the instance to create a payment method manager const paymentMethodManager = await primerHeadlessCheckout.createPaymentMethodManager(paymentMethodType) // Start the checkout process primerHeadlessCheckout.start()}