Link Search Menu Expand Document

Collect payments with Elements

Retain control of your card data while enabling your business to use any current or new processing relationships as you extend your business’s product lines, look to increase auth rates, or reduce your overall cost of payments. No matter why you’re here, we will always enable you to use the data how you want to use it. Even if that means exporting the data out of Basis Theory.

Basis Theory is here to make sure you can keep the lowest level of PCI compliance while retaining your ability to use your card data whenever and however you need to. We enable you to capture cards via form elements, exchange or forward that data to any other approved vendor or processor, and continue to grow and extend your business into its next growth cycle!

If you’d like to follow along with this guide from scratch, we suggest creating Vanilla JS sandbox using codesandbox.io and getting started from there! Want to jump right into our sample app? Find it here!

Table of contents

  1. Add Elements to your website
  2. Setup and Use a Token Reactor
  3. Using your new Reactor
  4. Use the reaction data to charge a customer
  5. Use the raw card data whenever you need

Add Elements to your website

To start, you’ll need a new Elements Application with the card:create permission

Using our hosted elements, you can collect cards on any webpage you need to, while maintaining the lowest possible PCI compliance level.

<html>
  <head>
    <script src="https://js.basistheory.com"></script>
    <script>
      var card;
      async function submitCard() {
          const name = document.getElementById("name").value;
    
          const atomic_card = await BasisTheory.elements.storeCreditCard({
              card,
              billingDetails: {
                  name
              }
          });
          
        console.log(atomic_card);
      }

      window.addEventListener("load", async () => {
          await BasisTheory.init(<ELEMENTS_API_KEY>, {
              elements: true
          });

          card = BasisTheory.elements.create("card", style);

          await card.mount("#card");

          card.on("change", (e) => {
              const button = document.getElementById("submit_button");
              button.disabled = !e.complete;
          });
      });
    </script>
  </head>
  <body>
    <div class="container">
      <div id="form">
        <div class="row">
          <label for="name">Name</label>
          <input id="name" placeholder="Jane Doe" />
        </div>
        <div class="row temp" id="card"></div>
        <button id="submit_button" type="button" onclick="submitCard()">
          Submit
        </button>
      </div>
    </div>
  </body>
</html>

Setup and Use a Token Reactor

Configure one of our pre-built Reactor Formulas, enabling you to quickly exchange raw card data for a processor token (e.g. Stripe).

To set up a Reactor, head over to our Portal and set up a new Stripe Reactor. If you’re looking for step-by-step guide on how to set up a Reactor, head over to our guide.

Using your new Reactor

To use your Stripe Reactor, you’ll need a server-to-server application with the following permissions card:read, card:create, and reactor:read.

Once you’ve created your Stripe Reactor, use the reactor_id and your Atomic Card token’s ID to exchange for a Stripe token, which you’ll be able to use to charge your customer.

const reactionToken = await bt.atomicCards.react(atomic_card.id, {
    reactorId: REACTOR_ID
});

return reactionToken.data.id;

Now that you have your Stripe Payment Method, you can store this within your own platform and avoid becoming dependent on Basis Theory for your future transactions. As soon as you need a new Stripe Payment Method, just call the /react endpoint for that card, and you’ll have a newly attached token.

Use the reaction data to charge a customer

Now, you’re able to access the token created by your Reactor. You may be using this for analytical BIN information, fraud analytics, or to charge a card using the processor token you’ve created.

const stripe = require("stripe")(STRIPE_API_KEY);

const paymentIntent = await stripe.paymentIntents.create({
  amount: 1099,
  currency: "usd",
  payment_method: paymentMethodId, // Payment Method from Stripe Reaction in step 2
  confirm: true
});

return paymentIntent;

Use the raw card data whenever you need

With Basis Theory, we enable the highest level of usability for your card data possible. Is your primary processor down? react with a back-up processor. Soft decline and want to reprocess? react with another processor. Want to understand your customers card analytics? react with a BIN List like Parrot.

Anything is possible when you store your card data with us. To expand your possibilities, just configure a new Reactor.

See it in action

See a sample and the code that drives it below. Want to experience the sandbox yourself? Check it out here.