Styleguide

Components available to be used in the Docs.


This is a heading without the step number. It's an optional step.

This is an h3 inside the step with anchor

This is yet another h3 inside the step without anchor but with tag

This is the last h3 inside the step with both anchor and tag

This is a heading with the step number.

This will be the second step heading. It automatically increments.

Table

item 1item 2item 3item 4
List object 1List object 1List object 1
List object 2List object 2List object 2
List object 3List object 3List object 3
List object 4List object 4List object 4

Ordered List

Title here
Continue with ready-made checkout component, or, for more control

  1. 1
    lorem ipsum dolor sit amet
  2. 2
    consectetur adipiscing elit
  3. 3
    sed do eiusmod tempor incididunt ut labore
  4. 4
    excepteur sint occaecat cupidatat non proident,

These are the fields you'll need to authorize a transaction:

  • paymentMethod: This will be the token you generate on the client-side using our SDK.
  • orderId: Your customer's order id, this will be your reference for the transaction.
  • amount: The amount you would like to charge the customer, in the lowest units of currency.
  • currencyCode: The 3 digit currency code in ISO 4217 format (see a list of all accepted currency codes here).
  • merchantId: This will be the unique merchant account id you have with the processor of your choice. To obtain merchant ids, just go to the Processors page from your dashboard and select the processor you configured earlier. The id will be shown under Merchant accounts.

Information

  1. 1
    lorem ipsum dolor sit amet
  2. 2
    consectetur adipiscing elit
  3. 3
    sed do eiusmod tempor incididunt ut labore
  4. 4
    excepteur sint occaecat cupidatat non proident

The Primer SDK allows you to specify cardNumber , expiryDate and cvv elements on your checkout page. The inputs inserted into these elements are hosted by Primer's servers, freeing you from the burden of PCI compliance.

  1. 1
    lorem ipsum dolor sit amet
  2. 2
    consectetur adipiscing elit
  3. 3
    sed do eiusmod tempor incididunt ut labore
  4. 4
    excepteur sint occaecat cupidatat non proident

The Primer SDK allows you to specify cardNumber , expiryDate and cvv elements on your checkout page. The inputs inserted into these elements are hosted by Primer's servers, freeing you from the burden of PCI compliance.

The Primer SDK allows you to specify cardNumber , expiryDate and cvv elements on your checkout page. The inputs inserted into these elements are hosted by Primer's servers, freeing you from the burden of PCI compliance.

  • lorem ipsum dolor sit amet
  • consectetur adipiscing elit
  • sed do eiusmod tempor incididunt ut labore
  • excepteur sint occaecat cupidatat non proident

The Primer SDK allows you to specify cardNumber , expiryDate and cvv elements on your checkout page. The inputs inserted into these elements are hosted by Primer's servers, freeing you from the burden of PCI compliance.

Inline image

internal (with gatsby-image)

internal cute cats

external

external cute cats

CodeBlock

1
const sum = (a, b) => a + b
js
copy
1234567
const notHighlighted = (a, b) => a + bconst highlighted = () => `loremipsumdolor`const notHighlighted2 = (a, b) => a + b
js
copy
12
const firstLine = (a, b) => a + bconst lastLineBeforeCollapsing = () => `
Show all 6 lines ↓
js
copy

Heading 2

Heading 3

Heading 4

paragraph

Tabs

tab 1 content here

alt

The Primer SDK allows you to specify cardNumber , expiryDate and cvv elements on your checkout page. The inputs inserted into these elements are hosted by Primer's servers, freeing you from the burden of PCI compliance.

external cute cats

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis

external cute cats

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis.

Status
Description

An authorization request has been received and a payment has been created.

The transaction has been authorized by the payment processor and can proceed to capture.

The Primer SDK allows you to specify cardNumber , expiryDate and cvv elements on your checkout page. The inputs inserted into these elements are hosted by Primer's servers, freeing you from the burden of PCI compliance.

Call this endpoint GET/payment-instrument to do cool stuff

Step 1. Install the Universal Checkout web SDK with npm

Install the Universal Checkout web SDK.

12345
# With yarnyarn add @primer-io/checkout-web # With npmnpm install --save @primer-io/checkout-web
bash
copy

For specific versions of the SDK, please refer to the changelog.


Import the SDK and default CSS.

12345
// checkout.jsimport { loadPrimer } from '@primer-io/checkout-web'import '@primer-io/checkout-web/dist/Checkout.css' // Using a CSS loader const PrimerPromise = loadPrimer()
typescript
copy
🔓

If your checkout page uses the Content-Security-Policy header, you'll need to add a few things to your whitelist.

Step 2. Initialize Universal Checkout and render the UI

Create a client session and use the generate client token to initialize the Universal Checkout SDK. Call primer.checkout() to render the checkout in the specified container element.

12345678910111213141516171819202122232425
// checkout.jsimport { loadPrimer } from '@primer-io/checkout-web'import '@primer-io/checkout-web/dist/Checkout.css' // Using a CSS loader const PrimerPromise = loadPrimer() window.addEventListener('load', onLoaded) async function onLoaded() {    const Primer = await PrimerPromise    const primer = new Primer({        credentials: {            // Your server-generated client session token            clientToken: '<THE_CLIENT_TOKEN>',        },    })     const checkoutOptions = {        // The HTML element to render the checkout in        container: '#checkout-container',    }     // `.checkout()` initializes and renders the UI    await primer.checkout(checkoutOptions)}
typescript
copy
💡

Some payment methods and checkout modules will require you to pass in specific objects when creating a client session. Don't worry, nothing will break. Check console.log if you're seeing unexpected results.

Step 3. Handle callbacks for creating and resuming payments

Once the payment method data has been securely captured, Primer will return a uniform paymentMethodToken via onTokenizeSuccess(). This can be safely passed to your server to create a payment with the Payments API.

Handle onTokenizeSucess() callback
  • When a customer submits their payment data, the payment details are tokenized and you'll receive a paymentMethodToken in onTokenizeSuccess()
  • Create a payment request with paymentMethod.token
  • If the payment is successful, return true in order to display a success screen.
  • If the payment is unsuccessful, throw an error to display an error / failed message.
  • Payments API may return a new clientToken for additional steps. In this case, return the clientToken to the checkout.

1234567891011121314151617181920
const checkoutOptions = {    /* Other options and callbacks */     // Called after a payment method is tokenized    // Checkout stays in loading state until this Promise is resolved or rejected    async onTokenizeSuccess(paymentMethod) {        // Send the Payment Method Token to your server        // to create a payment using Payments API        const response = await createPayment(paymentMethod.token)         // If a new clientToken is available, resolve the Promise to refresh the client session.        // The checkout will automatically perform the action required by the Workflow.        if (response.requiredAction.clientToken) {            return { clientToken: response.requiredAction.clientToken }        }         // Display the success screen.        return true    },}
typescript
copy
Handle onResumeSuccess() callback
  • You will receive a resumeToken via the onResumeSuccess() callback if applicable
  • Send a resume payment request with resumeToken
  • If the payment is successful, return true in order to display a success screen.
  • If the payment is unsuccessful, throw an error to display an error / failed message.
  • Payments API may return a new clientToken for additional steps. In this case, return the clientToken to the checkout.

12345678910111213141516171819
const checkoutOptions = {    /* Other options and callbacks */     // Called after a extra steps are completed    // Checkout stays in loading state until this Promise is resolved or rejected    async onResumeSuccess(data) {        // Send the resume token to your server to resume the payment        const response = await resumePayment(data.resumeToken)         // If a new clientToken is available, resolve the Promise with it to refresh the client session        // The checkout will automatically perform the action required by the Workflow        if (response.requiredAction.clientToken) {            return { clientToken: response.requiredAction.clientToken }        }         // Display the success screen        return true    },}
typescript
copy

Step 4. Handle callback for updating the client session

As the customer interacts with the UI, Universal Checkout fires "client session actions" via onClientsessionActions(). Forward these to your server to update the client session with the Client Session Actions endpoint.

A new client token will be provided. Pass it back to the checkout to refresh Universal Checkout and continue the flow.

12345678910111213
const checkoutOptions = {    /* Other options and callbacks */     // Called during the checkout flow    // Universal Checkout may stay in loading state until this Promise is resolved or rejected    async onClientSessionActions(data) {        // Send the actions to your server to update the client session        const response = await updateClientSession(data.actions)         // Refresh the checkout with the latest data from the client session        return { clientToken: response.clientToken }    },}
typescript
copy