Collecting Payment Methods

Learn how to securely collect card payment methods using BT AI’s SDK with JWT-based authentication. This guide covers JWT creation, SDK initialization, and card component integration for both JavaScript and React.

Overview

BT AI uses a secure JWT-based authentication system for payment method collection. Your backend creates and signs JWTs containing entity information, which are then used by the frontend SDK to securely collect and tokenize payment data without exposing sensitive information to your servers.

Prerequisites

Before proceeding, ensure you have completed the Setup and have:

  • Key-pair for JWT signing (Key ID and Private Key)

JWT Creation and Signing

JWT Creation Examples

A JWT will be created in your backend systems and passed into your frontend to enable a secure handshake for authentication.

For collecting payment methods, create a JWT with a public role and entity information:

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

Displaying the Card Component

This next step will add a capture form (or tap to add) compnent to securely capture a credit card and convert it into a Payment Method.

import React, { useRef, useState } from 'react';
import { useBtAi } from '@btai/react-sdk';
 
function PaymentForm() {
  const { btAi } = useBtAi();
  const cardRef = useRef(null);
  const [isValid, setIsValid] = useState(false);
 
  const handleCardChange = (event) => {
    setIsValid(event.complete && !event.error);
  };
 
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!cardRef.current || !isValid) return;
 
    try {
      const paymentMethod = await cardRef.current.createPaymentMethod();
      console.log('Payment method created:', paymentMethod);
    } catch (error) {
      console.error('Error creating payment method:', error);
    }
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label htmlFor="card">Card Information</label>
        <Card
          ref={cardRef}
          onChange={handleCardChange}
          styles={{
            ...
          }}
        />
      </div>
      
      <button type="submit" disabled={!isValid}>
        Create Payment Method
      </button>
    </form>
  );
}

Next Steps

Excellent! You’ve successfully implemented payment method collection. Your users can now securely enter and save their payment information. Now it’s time to use these payment methods to purchase goods!

Choose Your Checkout Flow

You have two main options for implementing checkout with your collected payment methods:

Browser Checkout - When the purchase will take place by driving a browser to coordinate the purchase on a websie.

Best for:

  • E-commerce or Services with no API

2. API Checkout (Advanced Server-Side Processing)

API Checkout - Ideal for complex business scenarios requiring virtual card generation and server-side control.

Best for:

  • E-commerce or Services with an API

Additional Resources