VaultAlpha

Keep sensitive data off your servers.

Collect cards, bank accounts, wallet keys and personal data with Elements. Store them as tokens and use them without the raw values ever touching your servers.

See how Vault stores and sends data.

Tokenize · Store · Forward

/Tallyform
Product preview

Checkout

Elements
Data type
Cardholder name
CVC
MM / YY

Test cards

Fields run in Elements. Your servers only ever see the token.

Your code

const elements = pandabase.elements();
elements.create("card").mount("#field");

const { token } = await elements.tokenize();

token

Created
{
  "id": "tok_01fwxhcg",
  "type": "card",
  "data": {
    "last4": "4242",
    "brand": "visa",
    "funding": "credit",
    "segment": "consumer",
    "exp_month": 12,
    "exp_year": 2029,
    "issuer": { "name": "Chase", "country": "US" }
  },
  "fingerprint": "fp_1xcdt",
  "cvc_expires_at": "in 1 hour"
}

The raw value stays in Vault. You get a token and the details that are safe to show.

Use cases

What teams keep in Vault

The same tokens work for payments, wallets, identity and payouts. Pick where the data goes, and Vault fills it in on the way out.

Store a card once. Charge it through any processor.

Keep cards in Vault instead of locked inside one processor. Send each charge to whichever processor is cheaper, approves more, or is up.

  • Retry a declined charge on a backup processor
  • Switch processors without asking customers for their card again
  • Your servers only handle the token
Forward through VaultExample

Your server

tok_7hq2mv9x

Visa •••• 4242

Vault
Destination

Request

POST /v1/proxy
X-Forward-Url: https://api.processor-a.example/charges

{
  "number": "{{ tok_7hq2mv9x | card.number }}",
  "exp": "{{ tok_7hq2mv9x | card.exp }}",
  "cvc": "{{ tok_7hq2mv9x | card.cvc }}"
}

Response

—
{
  "id": "…",
  "status": "…"
}

Developers

The Vault API

Elements in the browser, a small API on the server, and SDKs for Node.js, Python and Go.

  • Card, bank account, wallet and SSN fields
  • Styled to match your own form
  • React or plain JavaScript
Explore the docs
import { Elements, CardField, useElements } from "@pandabase/elements-react";function CardForm() {  const elements = useElements();  async function save() {    const { token, error } = await elements.tokenize();    if (error) return console.error(error.message);    await fetch("/api/cards", {      method: "POST",      body: JSON.stringify({ token: token.id }),    });  }  return (    <>      <CardField />      <button onClick={save}>Save card</button>    </>  );}export function Checkout() {  return (    <Elements publishableKey="pk_live_…">      <CardForm />    </Elements>  );}

Collect in the browser

Elements render secure fields inside your page. Raw values go straight to Vault, and your code gets a token back.

Vault is in alpha. Package names and endpoints may change.

FAQ

Frequently asked questions

Answers about Vault, tokens and who can see your data. Ask us anything else.

  • Cards, bank accounts, crypto wallet keys, Social Security numbers and any other value you'd rather not keep in your own database. Each value is stored once and you get a token to use in its place.