Checkout SDK

Credit card is still coming soon. Today the SDK mounts the PIX checkout on your site. The card features (secure fields, tokenization, 3DS) described below arrive when card is launched.

Use @bobpayments/checkout-sdk when you want your own page but don’t want to implement the secure card fields. The SDK mounts Bob’s checkout inside your site and handles card, PIX, tokenization, 3DS, fallback, and screen states.

The SDK runs in the browser, but session creation stays on your backend. Never send sk_live_ or sk_test_ to the frontend.

Installation

pnpm add @bobpayments/checkout-sdk
# npm install @bobpayments/checkout-sdk · yarn add @bobpayments/checkout-sdk

React

import { BobCheckout } from '@bobpayments/checkout-sdk';

export function PaymentPage({ checkoutToken }: { checkoutToken: string }) {
  return (
    <BobCheckout
      sessionToken={checkoutToken}
      onSuccess={(payment) => {
        window.location.href = `/orders/${payment.id}`;
      }}
      onError={(error) => {
        console.error(error);
      }}
    />
  );
}

JavaScript

import { BobCheckout } from '@bobpayments/checkout-sdk';

const checkout = await BobCheckout.create({
  sessionToken: checkoutToken,
});

checkout.mount('#bob-payment');

// On page unmount or session change:
checkout.destroy();

What the SDK does

Loads the session by the checkoutToken.
Shows only enabled methods, such as PIX and card.
Mounts secure card fields, with no inputs of its own for PAN, expiry, or CVV.
Tokenizes the card without exposing pm_... to your application.
Runs 3DS authentication when the API returns nextActionUrl.
Waits for the final status before calling onSuccess.
Hides internal IDs and processing details from the buyer.

States

The SDK recovers state from the API when the page is reloaded. It does not automatically recreate charges on refresh.

loading_session
  -> form
  -> tokenizing_card
  -> submitting
  -> authenticating_3ds
  -> polling
  -> success
  -> failed
  -> expired|cancelled

Security

Do not import additional libraries directly to use the Bob SDK.
Do not store card tokens, pm_..., or the raw payment body.
Do not send sensitive data in events, analytics, or postMessage.
Configure your CSP to allow the domains required for Bob’s checkout.
Unmount the checkout with destroy() when the session changes or the component leaves the screen.

Start here

Server

Frontend

Installation

React

JavaScript

What the SDK does

States

Security

Next steps

Credit card

Create a checkout session

​Installation

​React

​JavaScript

​What the SDK does

​States

​Security

​Next steps

Credit card

Create a checkout session

Installation

React

JavaScript

What the SDK does

States

Security

Next steps