The first fully dynamic checkout
Universal Checkout is a drop-in UI for web and mobile, with a no-code interface for product and payments teams. Now payments can be a first-class product area in your organization.
Accessible and responsive UX that presents the payment methods you choose, along with 3D Secure 2.0 and convenient checkout modules, fully in-context with no redirects, ever!
Use the Dashboard to activate a custom set of payment methods and checkout modules based on amount, currency, customer location and more.
Completely customizable, embedded UI for seamless user experience on your site or in your app
PCI Level 1 compliant with a centralized vault for recurring payments and one-click checkout
Low code integration that you won't have to touch when adding new payment methods, processors or other Connections
Fully dynamic checkout driven by Workflows that let you fully automate end-to-end payment flows for the first time
Payment method tokenization
Universal Checkout securely captures payment method data while fully embedded on your site or in your app. By communicating directly with Primer's PCI-L1 tokenization service, Universal Checkout transforms sensitive customer data into a secure uniform string called a payment method token.
You can safely pass this token to your backend to create payments with the Payments API, with no compliance risk.
Our agnostic tokenization service and centralized vault enable you to handle recurring payments, fallbacks and retries across processors without compromising UX. No more PSP-specific tokens — now you own your payments data.
So, how does it work?
Whether you're embedding in a website or a mobile app:
- 1Generate a
clientTokenon your backend. - 2Initialize Universal Checkout with the
clientTokento render the UI. - 3Universal Checkout will generate a
paymentMethodTokenwhen the customer submits their payment data. - 4Create a payment using the
paymentMethodTokenvia the Payments API. - 5If the response indicates a
requiredAction, you'll get a newclientToken. - 6Pass the
clientTokenback to Universal Checkout to render next steps, like 3DS, and get aresumeToken. - 7Call POST
/payments/{id}/resumewith theresumeTokento wrap things up. (If a newrequiredActionis returned, you'll have to go back to step 5.)
Universal Checkout can dynamically handle front-end payment flows constructed in Worklows such as 3D Secure, KYC and more, enabling your payments team to craft new commerce experiences with no additional code.
Manage your checkout with no code
Checkout Builder is a no-code interface in the Dashboard enabling you to simply drag-and-drop payment methods and checkout modules and create conditions that determine when and how they are displayed on Universal Checkout.
Generate a client token to initialize the SDK
The clientToken is a temporary key used to initialize Universal Checkout, and render the checkout options you've configured with the Checkout Builder.
If a payment method or checkout module requires additional information passed in the token request this will be documented in the Connection setup in the Dashboard.
Client token request POST/client-session
123456789101112131415
curl --location --request \ POST 'https://api.sandbox.primer.io/client-token' \ --header 'X-Api-Key: <YOUR_API_KEY>' \ # These fields can be passed in the payment request as well --data '{ "orderId": "<YOUR_ORDER_ID>", "currencyCode": "GBP", "amount": 1200, # a customerId is required to reuse sucessfully authorized payment method data for your customer # we recommend you always pass this in if you intend to use vaulting "customerId": "<YOUR_CUSTOMER_ID>" "metadata": { }, }'
Data you pass when requesting a clientToken is persisted in the payment request unless explicitly overwritten.
If your checkout page uses the Content-Security-Policy header, you'll need to add a few things to your whitelist.
Client token response
Check the warnings array for missing data which may be required to display certain payment methods and checkout modules in the Universal Checkout.
123456789101112
{ "clientToken": "<THE_CLIENT_TOKEN>", "clientTokenExpirationDate": "2021-08-12T16:14:08.578695", "orderId": "<YOUR_ORDER_ID>", "currencyCode": "GBP", "amount": 1200, "customerId": "<YOUR_CUSTOMER_ID>", "metadata": { }, "warnings": [ "Apple Pay is missing 'customerDetails.countryCode'" ]}