SDK Checkout

Cartão de crédito ainda está em breve. Hoje o SDK monta o checkout PIX no seu site. Os recursos de cartão (campos seguros, tokenização, 3DS) descritos abaixo entram quando o cartão for lançado.

Use o @bobpayments/checkout-sdk quando você quer uma página própria, mas não quer implementar os campos seguros de cartão. O SDK monta o checkout da Bob dentro do seu site e cuida de cartão, PIX, tokenização, 3DS, fallback e estados de tela.

O SDK roda no browser, mas a criação da sessão continua no seu backend. Nunca envie sk_live_ ou sk_test_ para o frontend.

Instalação

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');

// No unmount da página ou troca de sessão:
checkout.destroy();

O que o SDK faz

Carrega a sessão pelo checkoutToken.
Mostra apenas métodos habilitados, como PIX e cartão.
Monta campos seguros de cartão, sem inputs próprios para PAN, validade ou CVV.
Tokeniza o cartão sem expor pm_... para a sua aplicação.
Conduz autenticação 3DS quando a API retorna nextActionUrl.
Aguarda o status final antes de chamar onSuccess.
Esconde IDs internos e detalhes do processamento do comprador.

Estados

O SDK recupera o estado pela API quando a página é recarregada. Ele não recria cobranças automaticamente no refresh.

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

Segurança

Não importe bibliotecas adicionais diretamente para usar o SDK Bob.
Não salve tokens de cartão, pm_... ou corpo bruto de pagamento.
Não envie dados sensíveis em eventos, analytics ou postMessage.
Configure sua CSP para permitir os domínios necessários para o checkout da Bob.
Desmonte o checkout com destroy() quando a sessão mudar ou o componente sair da tela.

Comece aqui

Servidor

Frontend

Instalação

React

JavaScript

O que o SDK faz

Estados

Segurança

Próximos passos

Cartão de crédito

Criar sessão de checkout

​Instalação

​React

​JavaScript

​O que o SDK faz

​Estados

​Segurança

​Próximos passos

Cartão de crédito

Criar sessão de checkout

Instalação

React

JavaScript

O que o SDK faz

Estados

Segurança

Próximos passos