Checkout

Your checkout, or ours.

Create a payment with one API call. Take the card inside your own checkout with our embedded card fields, with no redirect, or on a hosted page in your name. 3-D Secure and receipts are handled either way.

Embedded in your page, or hosted 3-D Secure handled A signed webhook when it’s paid

1 · Your serverNode.js

const payment = await tuppence  .payments.create({    amount: 2000,    currency: "gbp",  });return payment.client_secret;

Card, Apple Pay and Google Pay

2 · Your pageReact

const tuppence = loadTuppence("pk_test_…"); function PayForm({ clientSecret }) {  useEffect(() => {    tuppence.then((t) => t      .paymentSheet({ clientSecret })      .mount("#pay"));  }, [clientSecret]);   // Card, Apple Pay and Google Pay  return <div id="pay" />;}

10:24

Lumen Labs · Basket Your basket

Field notebook × 2£14.00 Pencil set£6.00 Total£20.00

Checkout

Lumen Labs · Checkout Pay for order 1042 £20.00 Pay with

@tuppence/js Apple PayGoogle Pay •••• •••• •••• 3155 12 / 29123

Pay £20.00 Secure card fields by Tuppence

Your bank is checking it’s you Your bank wants to check it’s you. Its check opens in a secure window. Continue with your bank

LLumen Labs

Payment complete You paid £20.00 to Lumen Labs.

Order 1042 is confirmed.

Your £20.00 receipt from Lumen LabsYou paid £20.00 to Lumen Labs.

How it works

One payment. Take the card where you like.

Your server creates the payment, ready for either way in. Choose per checkout. The webhook, receipt and fee are the same.

Keeps customers on your site

Embedded in your checkout

Hand the payment’s client_secret to your page and @tuppence/js mounts secure card fields in your checkout, in your branding. Your customer stays on your site and the bank’s check opens in place. Card details go from the browser straight to our PCI DSS Level 1 card processor, never to your server or ours.

import { loadTuppence } from "@tuppence/js";

const tuppence = await loadTuppence("pk_live_…");
const sheet = tuppence.paymentSheet({ clientSecret })
  .mount("#card");

// When your customer presses Pay:
const { error, payment } = await sheet.confirm();

The browser SDK

Nothing to build

A hosted pay page

No front end needed. Send your customer to the payment’s approval_url by redirect, email or a message from your agent. The page shows your name, logo and colour, runs the bank’s check and returns them once they’ve paid.

// The create response carries it:
{
  "id": "pay_01K…",
  "approval_url": "…/pay/pay_01K…"
}

// Then, on your server:
res.redirect(payment.approval_url);

Hosted pages in the docs

Create the payment

Your server calls POST /v1/payments with an amount in pence and an idempotency key, so a retried request never charges twice.

Take the card

In your checkout with client_secret and @tuppence/js, or on our page at approval_url. 3-D Secure runs if the bank asks.

Hear that it worked

A signed payment.succeeded webhook reaches your server, your customer gets a receipt, and the money joins your balance.

What checkout does

The hard parts of taking a card, handled.

Strong Customer Authentication

When a card needs 3-D Secure, the payment waits for the bank’s check and continues when it passes.

Cards on file

With the customer’s agreement (the terms are shown on the page), save their card and charge it later with /v1/payments/charge_saved, or save one with nothing charged.

Pre-authorisation

Hold the amount when the order is placed, then capture what it came to within six days, or release it.

Payments an agent starts

An AI agent can create a payment through the API or the MCP server, and the payer approves it on the hosted page. Saved cards are charged only under terms the payer agreed to.

Declines your customer understands

A refused card returns a message written for your customer. If a response is lost, the SDK checks what happened instead of sending the card again.

Your brand, either way

Display name, logo, accent colour (kept readable automatically), support contact and the text on your customer’s statement.

Receipts

A receipt email and a receipt page for every successful payment, in your branding.

Card-testing protection

A burst of declines pauses the payment link and alerts you, so it can’t be used to test stolen cards.

Unusual charges flagged

Charges that don’t fit an account’s or an agent’s normal pattern are flagged, and can require the customer to authenticate again.

The Payments API

Every step has an endpoint.

Test mode behaves like live, with test cards, test payouts, a test clock and helpers that open disputes or settle payouts on demand.

API reference

POST /v1/payments
POST /v1/payments/{id}/confirm
POST /v1/payments/{id}/capture
POST /v1/payments/{id}/cancel
POST /v1/payments/charge_saved
POST /v1/refunds
GET /v1/balance
POST /v1/payouts
POST /v1/disputes/{id}/submit
POST /v1/webhook_endpoints

One account

Three ways Tuppence pays.

Payments Online, at the counter and on your platform, from 0.79% a card payment. Accounts & cards One balance, free payouts, and cards that give 0.89% back. Business tools A till, an online store, bookings and your books. The software is free.

Payments that give more back.

Start in test mode in a minute. Go live once you’re verified.

Start building Read the docs