Contexto de checkout

import { TokeflowBridge } from '@tokeflow_com/bridge-js';

const tokeflow = new TokeflowBridge({
  publicKey: 'pk_live_mer_xxx',
  checkoutSessionId: 'cks_a1b2c3d4e5', // created by your backend
});

await tokeflow.init();

const context = await tokeflow.checkout.getContext();

console.log(context.checkout.selectedCurrency); // 'BRL'
console.log(context.paymentMethods.cards);      // true
console.log(context.savedInstruments.length);   // 0 or more

{
  "checkout": {
    "id": "cks_a1b2c3d4e5",
    "merchantId": "mrc_a1b2c3d4e5",
    "offerId": "ofr_a1b2c3d4e5",
    "customerId": "cust_a1b2c3d4e5",
    "customerEmail": "jane@acme.com",
    "customerName": "Jane Doe",
    "selectedCurrency": "BRL",
    "status": "customer_identified",
    "externalSessionId": "sess_external_42",
    "expiresAt": "2026-05-20T18:00:00Z",
    "completedAt": null,
    "createdAt": "2026-05-19T12:00:00Z",
    "updatedAt": "2026-05-19T12:05:00Z",
    "items": [
      {
        "id": "cki_a1b2c3d4e5",
        "checkoutSessionId": "cks_a1b2c3d4e5",
        "offerId": "ofr_a1b2c3d4e5",
        "currency": "BRL",
        "amount": 9900,
        "firstChargeAmount": null,
        "quantity": 1,
        "installments": 1,
        "createdAt": "2026-05-19T12:00:00Z"
      }
    ]
  },
  "paymentMethods": {
    "cards": true,
    "pix": true,
    "boleto": false,
    "applePay": false,
    "googlePay": false,
    "cardBrands": ["visa", "mastercard"],
    "installmentsSupported": true,
    "installmentOptions": {
      "credit_card": { "min": 1, "max": 12 }
    }
  },
  "savedInstruments": [
    {
      "id": "pi_a1b2c3d4e5",
      "instrumentType": "card",
      "brand": "visa",
      "last4": "4242",
      "expMonth": 12,
      "expYear": 2030,
      "reusable": false
    }
  ],
  "savedCardCheckoutEnabled": false
}

const { savedInstruments, savedCardCheckoutEnabled } =
  await tokeflow.checkout.getContext();

const oneClickCards = savedCardCheckoutEnabled
  ? savedInstruments.filter((card) => card.reusable)
  : [];

// First read: network fetch + cache
const context = await tokeflow.checkout.getContext();

// Later, synchronously (no network):
const cached = tokeflow.checkout.getCachedContext();
if (cached) {
  renderSummary(cached.checkout.items);
}

// e.g. after your server identifies the customer on the checkout
const updated = await tokeflow.checkout.refresh();
console.log(updated.checkout.customerEmail);   // now populated
console.log(updated.savedInstruments.length);  // saved cards now available

const token = await tokeflow.cards.tokenize({ card: cardElement }, { saveCard: true });

import { TokeflowErrorCode } from '@tokeflow_com/bridge-js';

if (!tokeflow.checkout.hasCheckoutSession()) {
  // No checkout linked — fall back to a standalone tokenization flow.
}

try {
  const context = await tokeflow.checkout.getContext();
} catch (error) {
  if (error.code === TokeflowErrorCode.NO_CHECKOUT_SESSION) {
    // The bridge was initialized without `checkoutSessionId`.
  }
}

import { TokeflowProvider, useCheckout } from '@tokeflow_com/bridge-js/react';

function App() {
  return (
    <TokeflowProvider
      config={{
        publicKey: 'pk_live_mer_xxx',
        checkoutSessionId: 'cks_a1b2c3d4e5', // from your backend
      }}
    >
      <CheckoutSummary />
    </TokeflowProvider>
  );
}

function CheckoutSummary() {
  const { context, isLoading, error, refresh } = useCheckout();

  if (error) return <p>{error.message}</p>;
  if (isLoading || !context) return <p>Loading…</p>;

  const { checkout, paymentMethods, savedInstruments } = context;

  return (
    <div>
      <ul>
        {checkout.items.map((item) => (
          <li key={item.id}>
            {item.offerId} — {item.amount} {item.currency} × {item.quantity}
          </li>
        ))}
      </ul>

      {paymentMethods.cards && <p>Card payments available</p>}
      {paymentMethods.pix && <p>PIX available</p>}

      {savedInstruments.length > 0 && (
        <ul>
          {savedInstruments.map((pi) => (
            <li key={pi.id}>
              {pi.brand} •••• {pi.last4} — {pi.expMonth}/{pi.expYear}
            </li>
          ))}
        </ul>
      )}

      <button onClick={() => refresh()}>Refresh</button>
    </div>
  );
}