order
to your client session.
Creating a client session provides you with a client token, a temporary key used to initialize the Universal Checkout.
The information you include in the client session is used in the Dashboard:
X-Api-Key
header. Create an API key by visiting the developer page of the Primer Dashboard.
Make sure to set the following scopes for your API Key:
client_tokens:write
transactions:authorize
Field | Description |
---|---|
orderId | Your reference for the payment. Make sure to keep track of orderId - you will later receive updates to the payment via Webhooks. The payment will contain the orderId specified in the client session. |
currencyCode | The three-letter currency code in ISO 4217 format. e.g. use USD for US dollars. |
order ↳ lineItems | The details of the line items of the order. |
clientToken
from your serveravailable payment methods
for the session initiated. Those payment methods that have been configured in the Dashboard and whose conditions match the current client session will be returned.@primer-io/checkout-web
.This package includes TypeScript definitions.script
tag, please use our CDN instead.Primer
functions are called on the client side, or use our CDN instead.Primer.min.js
script and the Checkout.css
stylesheet on the page where you want to render the Checkout.
Make sure to pass the proper version in the URL.Primer.min.js
will add the Primer
object to the global scope:Primer.createHeadless(clientToken, options)
.onAvailablePaymentMethodsLoad(paymentMethodTypes)
onCheckoutComplete(data)
onCheckoutFail(error, data, handler)
onAvailablePaymentMethodsLoad
will return the payment methods
whose conditions match the current client session.headless.start()
to retrieve the list of payment methods, and start the checkout flow.onAvailablePaymentMethodsLoad
is invoked. Use this event to show the list of payment methods to the user:AssetsManager
that enables you to retrieve the logo and main colors attached to each payment method.
onAvailablePaymentMethodsLoad
has been called.PAYMENT_CARD
is available as a payment method and provided via onAvailablePaymentMethodsLoad
, build your card form using Primer input elements.Get started by creating a payment method manager for cards.style
object to the render
function to configure colors and font options.reset()
:removeHostedInputs()
to remove the hosted card input fields from the DOM:onCardNetworksChange
on the card manager to receive the type of card.onCardNetworksChange
in the API reference.setCardholderName(cardholderName)
to pass the cardholder name to the cardManager
:change
, available on each input, reacts to input changes. This returns if the input is valid or not, and the error type.validate()
function that does basic validations on the hosted inputs.submit()
function. This triggers the payment creation.submit()
triggers the creation and handling of the payment.onCheckoutComplete
is called, show a success message and reset the inputs.onCheckoutFail
is called, show a failure message and allow the customer to try again with the same details.customer.emailAddress
customer.billingAddress
PAYPAL
, APPLE_PAY
or GOOGLE_PAY
is available as a payment method and provided via onAvailablePaymentMethodsLoad
.onCheckoutComplete
is called, show a success message and hide the button.onCheckoutFail
is called, show a failure message and allow the customer to try again.start
function. This function automatically:start
is called synchronously after a clickstart
opens a popup. However, most browsers have strict popup-blocking rules to protect the user. One such rule is to only allow popups that result from a direct user action.Therefore, to ensure that the popup is properly rendered, make sure to call this function immediately after a user click.start
the checkout, after the payment category has been selected and confirmed, and it will automatically render the payment web page in a popup window.Get started by creating a payment method manager. You need to provide a callback function, onPaymentMethodCategoriesChange
, in the options parameter of the createPaymentMethodManager
function:onPaymentMethodCategoriesChange
callback and use it to render a custom user interface for the user to be able to select payment categories. More details about the callback can be found herecontainerId
, that belongs to a container in the DOM, which will later be used to render payment details about the selected payment method category.
When a payment method category has been selected call the renderCategory
function from the payment method manager. The renderCategory
function uses the id of the selected payment method category, a containerId
and an onHeightChange
callback in order to render more details about the category in the selected container.The onHeightChange
callback will return a new height based on the selected payment method category. Use the new height to change the height of the container in which Klarna will render the payment category details. More details about the callback can be found herestart
function. This function automatically:onClientSessionUpdate
callback and store them on a variable, example:customer
client session property can be undefined
.onClientSessionUpdate
is always called once before the onAvailablePaymentMethodsLoad
, so the payment method manager can be created as usual.When creating the ACH payment method manager, the stripePublishableKey
needs to be provided, and optionally, the onCollectBankAccountDetailsComplete
callback.collectBankAccountDetails
method can be called to start the Stripe flow.collectBankAccountDetails
promise to be resolved, the onCollectBankAccountDetailsComplete
callback can be set up to display the mandate screen.confirm
button, the confirmMandate
method can be called.