Examples

Card checkout

Tokenize a card, sign the amount and create a Wompi sandbox transaction — shown for Astro, Next.js, TanStack Start and Elysia.

Live The form below calls the same SDK methods you'd use in production. Enter your publicKey, privateKey and integrityKey below to charge a sandbox card, then check the framework examples to adapt the server route to your stack.

Try it

Submit the form to see the SDK call in action.

Framework examples

Four steps regardless of framework — fetch the acceptance token, tokenize the card, sign the amount, create the transaction. Pick your stack:

src/pages/api/checkout.ts

import type { APIRoute } from "astro";
import { WompiClient } from "@pulgueta/wompi";
import { getSignatureKey } from "@pulgueta/wompi/server";
import { WOMPI_PUBLIC_KEY, WOMPI_PRIVATE_KEY, WOMPI_INTEGRITY_KEY } from "astro:env/server";

export const prerender = false;

export const POST: APIRoute = async ({ request }) => {
  const { card, customerEmail, amountInCents } = await request.json();

  const wompi = new WompiClient({
    publicKey: WOMPI_PUBLIC_KEY,
    privateKey: WOMPI_PRIVATE_KEY,
    sandbox: true,
  });

  const [merchantError, merchant] = await wompi.merchants.getMerchant();
  if (merchantError) return Response.json({ error: merchantError.message }, { status: 502 });

  const [tokenError, token] = await wompi.tokens.tokenizeCard(card);
  if (tokenError) return Response.json({ error: tokenError.message }, { status: 422 });

  const reference = `order-${Date.now()}`;
  const signature = await getSignatureKey({ reference, amountInCents, integrityKey: WOMPI_INTEGRITY_KEY });

  const [transactionError, transaction] = await wompi.transactions.createTransaction({
    acceptance_token: merchant.presigned_acceptance!.acceptance_token,
    amount_in_cents: amountInCents,
    currency: "COP",
    signature,
    customer_email: customerEmail,
    reference,
    payment_method: { type: "CARD", token: token.id, installments: 1 },
  });

  if (transactionError) return Response.json({ error: transactionError.message }, { status: 422 });
  return Response.json({ transaction });
};

app/api/checkout/route.ts

import { NextRequest, NextResponse } from "next/server";
import { WompiClient } from "@pulgueta/wompi";
import { getSignatureKey } from "@pulgueta/wompi/server";

export async function POST(request: NextRequest) {
  const { card, customerEmail, amountInCents } = await request.json();

  const wompi = new WompiClient({
    publicKey: process.env.WOMPI_PUBLIC_KEY!,
    privateKey: process.env.WOMPI_PRIVATE_KEY!,
    sandbox: true,
  });

  const [merchantError, merchant] = await wompi.merchants.getMerchant();
  if (merchantError) return NextResponse.json({ error: merchantError.message }, { status: 502 });

  const [tokenError, token] = await wompi.tokens.tokenizeCard(card);
  if (tokenError) return NextResponse.json({ error: tokenError.message }, { status: 422 });

  const reference = `order-${Date.now()}`;
  const signature = await getSignatureKey({
    reference,
    amountInCents,
    integrityKey: process.env.WOMPI_INTEGRITY_KEY!,
  });

  const [transactionError, transaction] = await wompi.transactions.createTransaction({
    acceptance_token: merchant.presigned_acceptance!.acceptance_token,
    amount_in_cents: amountInCents,
    currency: "COP",
    signature,
    customer_email: customerEmail,
    reference,
    payment_method: { type: "CARD", token: token.id, installments: 1 },
  });

  if (transactionError) return NextResponse.json({ error: transactionError.message }, { status: 422 });
  return NextResponse.json({ transaction });
}

app/api/checkout.ts

import { createServerFn } from "@tanstack/react-start";
import { WompiClient } from "@pulgueta/wompi";
import { getSignatureKey } from "@pulgueta/wompi/server";

type CheckoutInput = {
  card: { number: string; exp_month: string; exp_year: string; cvc: string; card_holder: string };
  customerEmail: string;
  amountInCents: number;
};

export const checkout = createServerFn({ method: "POST" })
  .validator((data: CheckoutInput) => data)
  .handler(async ({ data: { card, customerEmail, amountInCents } }) => {
    const wompi = new WompiClient({
      publicKey: process.env.WOMPI_PUBLIC_KEY!,
      privateKey: process.env.WOMPI_PRIVATE_KEY!,
      sandbox: true,
    });

    const [merchantError, merchant] = await wompi.merchants.getMerchant();
    if (merchantError) throw new Error(merchantError.message);

    const [tokenError, token] = await wompi.tokens.tokenizeCard(card);
    if (tokenError) throw new Error(tokenError.message);

    const reference = `order-${Date.now()}`;
    const signature = await getSignatureKey({
      reference,
      amountInCents,
      integrityKey: process.env.WOMPI_INTEGRITY_KEY!,
    });

    const [transactionError, transaction] = await wompi.transactions.createTransaction({
      acceptance_token: merchant.presigned_acceptance!.acceptance_token,
      amount_in_cents: amountInCents,
      currency: "COP",
      signature,
      customer_email: customerEmail,
      reference,
      payment_method: { type: "CARD", token: token.id, installments: 1 },
    });

    if (transactionError) throw new Error(transactionError.message);
    return { transaction };
  });

src/routes/checkout.ts

import { Elysia, t } from "elysia";
import { WompiClient } from "@pulgueta/wompi";
import { getSignatureKey } from "@pulgueta/wompi/server";

export const checkoutRoute = new Elysia().post(
  "/checkout",
  async ({ body: { card, customerEmail, amountInCents } }) => {
    const wompi = new WompiClient({
      publicKey: Bun.env.WOMPI_PUBLIC_KEY!,
      privateKey: Bun.env.WOMPI_PRIVATE_KEY!,
      sandbox: true,
    });

    const [merchantError, merchant] = await wompi.merchants.getMerchant();
    if (merchantError) throw new Error(merchantError.message);

    const [tokenError, token] = await wompi.tokens.tokenizeCard(card);
    if (tokenError) throw new Error(tokenError.message);

    const reference = `order-${Date.now()}`;
    const signature = await getSignatureKey({
      reference,
      amountInCents,
      integrityKey: Bun.env.WOMPI_INTEGRITY_KEY!,
    });

    const [transactionError, transaction] = await wompi.transactions.createTransaction({
      acceptance_token: merchant.presigned_acceptance!.acceptance_token,
      amount_in_cents: amountInCents,
      currency: "COP",
      signature,
      customer_email: customerEmail,
      reference,
      payment_method: { type: "CARD", token: token.id, installments: 1 },
    });

    if (transactionError) throw new Error(transactionError.message);
    return { transaction };
  },
  {
    body: t.Object({
      card: t.Object({
        number: t.String(),
        exp_month: t.String(),
        exp_year: t.String(),
        cvc: t.String(),
        card_holder: t.String(),
      }),
      customerEmail: t.String(),
      amountInCents: t.Number(),
    }),
  }
);

Try it

Your sandbox keys

Framework examples