Payment Methods

Give a payment method to the agent

Before a purchase is initiated, your users must either save a card on file with them, or give them stablecoins in a crypto wallet. This guide explains how to do each of those flows.

Credit Card

Pay with a user’s credit or debit card

Use this option if you want the agent to pay with a user’s card just in time.

Tokenize and securely store the user’s card so the agent can use it in future payments compliantly, without ever touching sensitive card data.

Start testing today by creating a Crossmint project and test API key:

1. Crossmint Project

   Create a project in the Crossmint Console (staging environment)

2. Server-side API Key

   Obtain a server-side API key from the Overview page and save it for later use

Integration Steps

1. Retrieve Basis Theory API Key

   In order to tokenize a user’s card, obtain an API key from Basis Theory by calling the following Crossmint API (no API key required):

   GET https://staging.crossmint.com/api/unstable/setupTokenizeCard
   

   The response looks as follows:

   {
     "basisTheoryAPIKey": "key_test_us_pub_LyApUWWyCJ4PqiTEgrSmeK"
   }
   

2. Render Card Input Form

   Render a card input form using Basis Theory’s SDK and the API key obtained above to tokenize and save the user’s card. The look-and-feel of the form can be freely customized by the developer.

   Run npm install @basis-theory/basis-theory-react to install the Basis Theory SDK

   "use client";
   import React, { useRef } from "react";
   import {
     BasisTheoryProvider,
     useBasisTheory,
     CardElement,
     CardExpirationDateElement,
     CardVerificationCodeElement,
   } from "@basis-theory/basis-theory-react";
   
   // Obtained from Step 1
   const PUBLIC_KEY = process.env.NEXT_PUBLIC_BT_PUBLIC_KEY!;
   
   export default function CheckoutPage() {
     // Initialize with your API key using the hook
     const { bt } = useBasisTheory(PUBLIC_KEY, { elements: true });
     if (!bt) {
       return <div>Loading...</div>;
     }
     return (
       <BasisTheoryProvider bt={bt}>
         <PaymentForm />
       </BasisTheoryProvider>
     );
   }
   
   function PaymentForm() {
     const { bt } = useBasisTheory(PUBLIC_KEY, { elements: true });
     if (!bt) {
       return <div>Loading...</div>;
     }
     const cardRef = useRef(null);
     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
   
       try {
           console.log({a: cardRef.current});
         const token = await bt.tokens.create({
           type: "card",
           data: cardRef.current,
         });
   
        // TODO: In the next step, reference "token.id" to register the token with Crossmint
   
         console.log("Token created:", token.id);
       } catch (error: any) {
         console.error("Error creating token:", error.details);
       }
     };
   
     return (
       <form onSubmit={handleSubmit}>
         <CardElement id="my-card" ref={cardRef} placeholder={{
           cardNumber: "Card number",
           cardExpirationDate: "MM/YY",
           cardSecurityCode: "CVC"
         }} />
         <button type="submit">Save Card</button>
       </form>
     );
   }
   

   Here is an example of how the above card form can look:

   

   Use a Crossmint test card to test the token generation step.

3. Register Card Token with Crossmint

   Call the following Crossmint API with the obtained API key from the Crossmint Console where the TODO comment is above, in order to register the token with Crossmint:

   
   POST https://staging.crossmint.com/api/unstable/setupTokenizeCard/registerToken
   
   {
     "token": "9f243106-d4a4-4327-a7cb-e3ec22031ed2" // Obtained from Step 2
   }
   

   No response body is expected from this call, simply a 200 response.
4. Create Order

   Call Crossmint’s Create Order API and specify card-token as the payment method (with the same Crossmint API key used above):

   POST https://staging.crossmint.com/api/2022-06-09/orders
   
   {
     "recipient": {
       "email": "[e-mail]",
       "physicalAddress": {
         "name": "John D",
         "line1": "123 ABC Street",
         "city": "New York City",
         "state": "NY",
         "postalCode": "10007",
         "country": "US"
       }
     },
     "locale": "en-US",
     "payment": {
       "receiptEmail": "[e-mail]",
       "method": "card-token"
     },
     "lineItems": {
       "productLocator": "amazon:https://www.amazon.com/Croix-Sparkling-Water-Grapefruit-Count/dp/B00EEN4OI8"
     }
   }
   

5. Complete Payment with Card Token

   Obtain the orderId from Step 4’s response and call the following Crossmint API:

   POST https://staging.crossmint.com/api/2022-06-09/orders/{{orderId}}/payment
   
   {
     "token": "9f243106-d4a4-4327-a7cb-e3ec22031ed2" // Obtained from Step 2
   }
   

   The response will show that the payment is successful. Check the recipient’s email for a purchase receipt.

Visa Intelligence Commerce

In the current model, Crossmint acts as the MoR and will appear in the user’s card statement. Crossmint manages fulfillment, chargebacks, and customer support post‑purchase.

This will soon evolve thanks to our integration with Visa Intelligent Commerce (VIC):

• Purchases will appear just like any other card transaction on the user’s statement
• Users will benefit from Visa’s existing infrastructure for fulfillment, chargebacks, rewards, and more
• Users will go through the same card entry flow, as shown above, and a VIC token will be obtained
• Agents will be able to execute purchases using these VIC tokens with virtually any merchant