This is a sample application demonstrating how to integrate Basis Theory React Elements into a Next.js application. The implementation shows how to securely collect and tokenize sensitive card data using Basis Theory's React elements.
The Basis Theory integration must run client-side only. This is critical because:
Basis Theory Web Elements Requirements:
- Handle sensitive card data directly in the browser
- Create secure iframes loaded from
js.basistheory.com - Require browser-specific APIs and DOM access
- Need to handle user input and manage secure communication channels
This is implemented using:
"use client";
import dynamic from "next/dynamic";
// Dynamically import the CreditCardForm with no SSR
const CreditCardForm = dynamic(() => import("@/components/CreditCardForm"), { ssr: false });Example implementation showing secure card data collection:
"use client";
import { useRef, useState } from "react";
import { CardElement, useBasisTheory } from "@basis-theory/react-elements";
const CreditCardForm = () => {
const cardRef = useRef<ICardElement | null>(null);
const { bt } = useBasisTheory(process.env.NEXT_PUBLIC_BASIS_THEORY_KEY);
const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault();
try {
const token = await bt.tokens.create({
type: "card",
data: cardRef.current,
});
// Handle the token
} catch (err) {
console.error("Tokenization error", err);
}
};
return (
<form onSubmit={handleSubmit}>
<CardElement id="card" bt={bt} ref={cardRef} />
<button type="submit">Submit</button>
</form>
);
};-
Client-Side Processing
- Card data is collected and tokenized in the browser
- Sensitive data never touches your server
- Reduces PCI compliance scope
-
Secure Communication
- All communication happens through secure iframes
- Data is encrypted in transit
- API keys are kept in environment variables
-
Error Handling
- All sensitive operations are wrapped in try/catch
- Errors are logged for debugging
- Failed operations don't expose sensitive data
- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Set up your environment variables:
Create a
.env.localfile with your Basis Theory public API key:
NEXT_PUBLIC_BASIS_THEORY_KEY=your_public_api_key_here- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
import { CardElement, useBasisTheory } from "@basis-theory/react-elements";
const MyComponent = () => {
const { bt } = useBasisTheory(process.env.NEXT_PUBLIC_BASIS_THEORY_KEY);
return <CardElement id="card" bt={bt} ref={cardRef} />;
};const handleSubmit = async () => {
try {
const token = await bt.tokens.create({
type: "card",
data: cardRef.current,
});
// Handle the token
} catch (err) {
console.error("Tokenization error", err);
}
};The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out the Next.js deployment documentation for more details.