Skip to main content

Getting Started

Prerequisites​

You need a Public Application API key with the token:create permission.

To create one, log in to the Basis Theory Portal, create a new application of type "Public", and grant the token:create permission.

Never use Management or Private API keys in frontend code.

1. Install​

npm install --save @basis-theory/web-elements

2. Initialize​

import { basistheory } from '@basis-theory/web-elements';

const bt = await basistheory('<PUBLIC_API_KEY>', { environment: 'test' });

Set environment to 'test' during development and 'us' (or 'eu') in production.

3. Add a Card Element​

<form id="payment-form">
  <div id="card-element"></div>
  <button type="submit" id="submit-btn" disabled>Pay</button>
</form>
const cardElement = bt.createElement('card', {
  targetId: 'card-element',
});

await cardElement.mount('#card-element');

4. Handle Validation and Tokenize​

const submitBtn = document.getElementById('submit-btn');

cardElement.on('change', (event) => {
  submitBtn.disabled = !event.complete;
});

document.getElementById('payment-form').addEventListener('submit', async (e) => {
  e.preventDefault();

  const token = await bt.tokens.create({
    type: 'card',
    data: cardElement,
  });

  console.log('Token created:', token.id);
});

Next Steps​

Last updated on