Authentication

Overview

The SDK uses JWT token-based authentication to keep your API credentials secure. Instead of exposing your Client ID and Secret in browser code, tokens are generated server-side by your backend.


Why Token-Based Authentication?

circle-check

Authentication Flow

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│  Your           │     │  Your           │     │  Alternative    │
│  Backend        │     │  Frontend       │     │  API            │
└────────┬────────┘     └────────┬────────┘     └────────┬────────┘
         │                       │                       │
         │  1. POST /v1/checkout-auth/init              │
         │  (with OAuth2 client credentials)            │
         │──────────────────────────────────────────────>│
         │                       │                       │
         │  2. Returns JWT token                        │
         │<──────────────────────────────────────────────│
         │                       │                       │
         │  3. Pass token to frontend                   │
         │──────────────────────>│                       │
         │                       │                       │
         │                       │  4. SDK uses token    │
         │                       │  for all API calls    │
         │                       │──────────────────────>│
         │                       │                       │
         │                       │  5. Token expires     │
         │                       │  onAccessTokenExpired │
         │                       │  callback triggered   │
         │                       │<─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│
         │                       │                       │
         │  6. Frontend requests │                       │
         │  new token            │                       │
         │<──────────────────────│                       │
         │                       │                       │
         │  7. New token returned│                       │
         │──────────────────────>│                       │
         │                       │                       │
         │                       │  8. SDK continues     │
         │                       │  with new token       │
         │                       │──────────────────────>│

Backend Implementation

Step 1: Get OAuth Token

First, exchange your Client ID and Secret for an OAuth access token:

Response:

Step 2: Generate Checkout Token

Use the OAuth token to generate a checkout token for a specific customer and invoice:

Response:

Complete Backend Example


Frontend Implementation

Initialize with Token

Handle Token Expiration

Provide an onAccessTokenExpired callback to automatically refresh tokens:

circle-exclamation

Error Handling


Security Best Practices

  1. Never expose credentials in frontend code - Always generate tokens on your backend

  2. Use HTTPS - Ensure all communication is encrypted

  3. Validate on your backend - Verify the customer/invoice belongs to the authenticated user

  4. Set appropriate token lifetimes - Shorter lifetimes reduce exposure risk

  5. Implement the refresh callback - Provide a smooth experience when tokens expire


Token Contents

The checkout token is a JWT that contains:

Claim
Description

partner_id

Your partner identifier

client_id

Your API client ID

customer_id

The customer this token is scoped to

invoice_id

The invoice this token is scoped to

exp

Token expiration timestamp

circle-info

The SDK automatically extracts customer and invoice information from the token, so you don't need to pass these separately to components.

Last updated

Was this helpful?