Skip to main content

← All Payment Providers

​
Overview

Basis Theory Elements provides a secure method for tokenizing credit card information on the frontend. Card data is tokenized directly with Basis Theory — sensitive card details never touch your servers. This reduces your PCI scope by avoiding sensitive data transmission through your servers. When you pass a Basis Theory token to Rye, the payment is forwarded directly to the merchant’s payment vault. For Shopify merchants, the card is forwarded directly to Shopify’s payment vault, so Rye does not act as the merchant of record, eliminating duplicate transaction fees. For non-Shopify merchants, Rye is the merchant of record.

​
Use Rye’s Basis Theory Key to Generate Card Tokens

To generate a Basis Theory card token for confirming a Rye checkout intent, you must use Rye’s Basis Theory public key, not your own Basis Theory key. This ensures the token is created under Rye’s account. Using your own key will cause the checkout intent to fail. 
RYE_BT_PUBLIC_KEY_PRODUCTION=key_prod_us_pub_F4RCCEspEdE5hdtQnFfAFx

RYE_BT_PUBLIC_KEY_STAGING=key_test_us_pub_Gtquo4kCeDkj2hTFWJSYCX

​
Generate a Token Using Demo App

You can use the demo app to generate a Basis Theory token for testing: For the card number, use the test card number 4242 4242 4242 4242 with any future expiration date and any 3-digit CVC. Alternatively, you can use the steps below to create a simple React app to generate the token.

​
Generate a Token Using React App

This guide walks through the Basis Theory React Elements approach, including a React demo app. For a complete example, see rye-com/basis-theory-cc-capture-ui.

​
Create a New React App

npm create vite@latest bt-demo -- --template react
cd bt-demo

​
Install Basis Theory Dependencies

npm install @basis-theory/react-elements

​
React Example Code

  • Replace the code in src/App.jsx with the code below.
  • For testing in Rye staging: use the key key_test_us_pub_Gtquo4kCeDkj2hTFWJSYCX (line 8).
  • For testing in Rye production: use the key key_prod_us_pub_F4RCCEspEdE5hdtQnFfAFx (line 11).
import React, { useRef, useState } from 'react';
import {
  BasisTheoryProvider,
  CardElement,
  useBasisTheory,
} from '@basis-theory/react-elements';

// Use this key to test in the Rye staging environment. Test card number: 4242 4242 4242 4242.
const BT_API_KEY = 'key_test_us_pub_Gtquo4kCeDkj2hTFWJSYCX';

// Use this key to test in the Rye production environment. Uncomment the line below and comment out the staging key above.
//const BT_API_KEY = 'key_prod_us_pub_F4RCCEspEdE5hdtQnFfAFx';

function BasisTheoryTokenizer() {
  const { bt } = useBasisTheory(BT_API_KEY, { elements: true });
  const cardRef = useRef(null);
  const [status, setStatus] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!bt) return;

    try {
      const token = await bt.tokens.create({
        type: 'card',
        data: cardRef.current,
      });
      setStatus(`✅ Token: ${token.id}`);
    } catch (error) {
      setStatus(`❌ ${error.message}`);
    }
  };

  return (
    <BasisTheoryProvider bt={bt}>
      <form
        onSubmit={handleSubmit}
        className='max-w-md mx-auto mt-8 p-6 border border-gray-300 rounded-xl shadow-sm bg-white'
      >
        <h2 className='text-lg font-semibold mb-4 text-gray-800'>
          Enter Card Details
        </h2>
        <div className='mb-4 p-2 border border-gray-300 rounded'>
          <CardElement id='card-element' ref={cardRef} />
        </div>
        <button
          type='submit'
          disabled={!bt}
          className='w-full bg-indigo-600 text-white font-medium py-2 px-4 rounded hover:bg-indigo-700 transition'
        >
          Tokenize Card
        </button>
        {status && (
          <p className='mt-4 text-sm text-gray-700 bg-gray-100 p-2 rounded'>
            {status}
          </p>
        )}
      </form>
    </BasisTheoryProvider>
  );
}

export default function BasisTheoryDemo() {
  return (
    <div className='min-h-screen bg-gray-50 flex items-center justify-center'>
      <BasisTheoryTokenizer />
    </div>
  );
}

export function App(props) {
  return <BasisTheoryDemo />;
}

​
Run the App Locally

The app will run locally at http://localhost:5173. Open that page in your browser to enter card details and generate a Basis Theory token. The token will be returned in the format xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx. For testing in the Rye staging environment, use the test card number 4242 4242 4242 4242 with any future expiration date and any 3-digit CVC. 
npm run dev

​
Generate a Token Using Other Basis Theory SDKs

In addition to React, Basis Theory provides SDKs for other platforms, including vanilla JavaScript, iOS, and Android. The flow is similar across SDKs: initialize Basis Theory with Rye’s public key, present the card entry UI, and Basis Theory will return a token that you can pass to Rye.

​
Use the Token with Rye

Once you have a Basis Theory token, you can use it to complete a purchase through the Rye API. There are two flows available: a single-step purchase and a two-step flow.

​
Single-Step Purchase

Submit a complete purchase in one call by providing the product, buyer details, and payment method together: 
curl -X POST https://api.rye.com/v1/checkout-intents/purchase \
  -H "Authorization: Bearer $RYE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "productUrl": "https://example-store.myshopify.com/products/example-product",
    "quantity": 1,
    "buyer": {
      "firstName": "Jane",
      "lastName": "Doe",
      "email": "jane@example.com",
      "phone": "+15551234567",
      "address1": "123 Main St",
      "city": "New York",
      "province": "NY",
      "postalCode": "10001",
      "country": "US"
    },
    "paymentMethod": {
      "type": "basis_theory_token",
      "basisTheoryToken": "<TOKEN_ID>"
    }
  }'

​
Two-Step Flow

If you have already created a checkout intent, you can submit payment separately using the intent ID: 
curl -X POST https://api.rye.com/v1/checkout-intents/{id}/payment \
  -H "Authorization: Bearer $RYE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "paymentMethod": {
      "type": "basis_theory_token",
      "basisTheoryToken": "<TOKEN_ID>"
    }
  }'

​
Notes

  • Basis Theory tokens can be reused, but the CVC may need to be refreshed for subsequent orders.
  • Sensitive card data is handled entirely by Basis Theory and never touches your servers, reducing your PCI scope.