Browser Checkout

Learn how to create a credential to be used with browser-based checkout flows. This guide covers creating a Purchase Intent from a Payment Method, verifying the Purchase Intent, generating a Virtual Card or Network Token, and injecting it into your browser automation flow.

Overview

Browser checkout enables you to generate secure credentials (virtual cards or network tokens) that can be used to complete purchases on any website that accepts the card network. This approach provides maximum flexibility for browser automation while maintaining the highest security standards through network-verified credentials.

Prerequisites

Before implementing browser checkout, ensure you have:

Successfully Implemented Payment Method Collection

You must have completed the Collecting Payment Methods guide and successfully created at least one Payment Method. This guide assumes you have:

  • A working JWT creation system for both public and private roles
  • Successfully implemented the card collection flow
  • At least one card type Payment Method available for your entity
  • The Payment Method ID from your collection implementation

Creating a Purchase Intent from the Backend

Generate Private JWT for Backend Access

import { jwt } from '@basistheory/ai-sdk';
 
// Generate private JWT for backend operations
const privateJWT = jwt.generatePrivate(
  privateKey, 
  externalId, 
  expiration = '1m'
);

Request Purchase Intent Creation

To generate a credential for browser checkout, you’ll need to create a Purchase Intent from your backend. This requires sending the details outlined in the Create Purchase Intent API.

curl -X POST \
  https://api.basistheory.ai/tenants/your-tenant-id/purchase-intent \
  -H 'Authorization: Bearer your-private-jwt-token' \
  -H 'Content-Type: application/json' \
  -d '{
    "credentialType": "virtual-card",
    "paymentMethodId": "26859380-7829-4ee1-8a0a-38927881e7ef",
    "mandates": [
      {
        "type": "maxAmount",
        "value": "100",
      },
      {
        "type": "currency",
        "value": "USD"
      }
      {
        "type": "mcc",
        "value": "444"
      }
    ]
  }'

Handle Purchase Intent Response

The response will determine your next steps. The Purchase Intent can return in two states:

Active State (Ready to Use)

If the response status is "active", you immediately have access to the credential:

{
  "id": "0b1ac700-c1a7-46b0-a166-809e5aac4dc3",
  "entityId": "94c94330-94fd-4832-a106-e8474a274fe4",
  "credentialType": "virtual-card",
  "status": "active",
  "card": {
    "number": "2222030198005808",
    "expirationMonth": "07",
    "expirationYear": "2028",
    "cvc": "211"
  },
  "createdAt": "2025-06-16T14:00:00Z",
  "expiresAt": "2025-06-13T18:42:01Z"
}

Verify State (Verification Required)

If the response status is "verify", additional verification is required:

{
  "id": "46c029d2-485a-4928-83b5-4326c4866722",
  "entityId": "94c94330-94fd-4832-a106-e8474a274fe4",
  "credentialType": "network-token",
  "status": "verify",
  "createdAt": "2025-06-16T14:00:00Z",
  "expiresAt": "2025-06-13T18:42:01Z"
}

Verify the Purchase Intent

When a Purchase Intent requires verification (status: "verify"), you’ll need to use the frontend SDK to complete the verification process. This ensures network requirements are met to verify ownership of the Payment Method.

Generate a JWT in Backend

Assumig you no longer have an active JWT from collecting the Payment Method, you’ll need to generate a JWT in your backend to grant your frontend SDK access.

import { jwt } from '@basistheory/ai-sdk';
 
const jwt = jwt.generatePublic(privateKey, externalId, expiration = '1m');

Frontend Verification Flow

You’ll now use this JWT to initiate the verification steps for this Purchase Intent. Depending on the network - this may take form of the following, all of which are handled seemlessly with our verifyPurchaseIntent function:

  • Token and Device binding
  • 2FA text message, email, or mobile verification
  • Passkey setup and binding to device
import { btAi } from '@btai/js-sdk';
 
// ... get signed jwt from your backend
 
// initialize sdk
const btAi = await btAi.init(jwt);
const purchaseIntent = await verifyPurchaseIntent("tenant_1234", "purchase_intent_1234");

Verification Flow Experience

The verification process ensures network requirements are met and may include several steps:

Verification Steps Include:

  • Two-Factor Authentication: SMS or authenticator app verification
  • Passkey Setup: Biometric authentication setup for future use
  • Network Verification: Card network-specific verification requirements
  • Device Registration: Secure device binding for future transactions
Visa Two-Factor Authentication Flow

2FA Verification

Visa Passkey Setup Flow

Passkey Setup

Once the verification promise resolves, the verification has succeeded and your backend can now request the credentials.

Get the Credential from Purchase Intent

After verification is complete, your backend needs to retrieve the now-active credential using a private JWT:

Request Purchase Intent to Get Credential

Once verification is complete, retrieve the activated Purchase Intent with credentials:

curl -X GET \
  https://api.basistheory.ai/tenants/:tenant_id/purchase-intent/46c029d2-485a-4928-83b5-4326c4866722 \
  -H 'Authorization: Bearer your-private-jwt-token'

Successful Response with Virtual Card:

{
  "id": "0b1ac700-c1a7-46b0-a166-809e5aac4dc3",
  "entityId": "94c94330-94fd-4832-a106-e8474a274fe4",
  "credentialType": "virtual-card",
  "status": "active",
  "card": {
    "number": "2222030198005808",
    "expirationMonth": "07",
    "expirationYear": "2028",
    "cvc": "211"
  },
  "createdAt": "2025-06-16T14:00:00Z",
  "expiresAt": "2025-06-13T18:42:01Z"
}

Successful Response with Network Token:

{
  "id": "46c029d2-485a-4928-83b5-4326c4866722",
  "entityId": "94c94330-94fd-4832-a106-e8474a274fe4",
  "credentialType": "network-token",
  "status": "active",
  "token": {
    "number": "2222030198005808",
    "expirationMonth": "07",
    "expirationYear": "2028",
    "cryptogram": "AAnSCQ9UvB3WAA4IVFwEAAADFA=="
  },
  "createdAt": "2025-06-16T14:00:00Z",
  "expiresAt": "2025-06-13T18:42:01Z"
}

Use Credential with Browser Automation

You can now utilize this credential to be injected into any credit card form field on the internet that accepts that network’s card. The credential is ready for browser automation tools like Puppeteer, Selenium, or Playwright.

Next Steps

🎉 Congratulations! You’ve successfully implemented browser checkout with BT AI. You can now generate secure credentials and use them for automated purchases on any website that accepts the card network.

What’s Next?

If you need API-driven checkout instead:

Continue to API Checkout →