Talk to an engineer
v3 Headless checkout components, shipped as an SDK

Build your own checkout. We handle the payments underneath.

Naturpay is a headless, fully customizable checkout you assemble from components. Mount the payment flow directly inside your app, style every pixel as your own, and let our SDK and API carry cards, wallets, 3-D Secure and tokenization underneath.

Read the docs Browse components
Headless by default Typed SDK, idempotent API PCI scope handled for you
payment_intent.succeededwebhook delivered · 240 ms
Your domain, your stylesno iframe redirect
Embedded by engineering teams at
NORTHWINDCartlineFORGE&COTidepoolLumen OS

Why build it yourself

A checkout you own, not one you redirect to

Hosted pages and locked-down widgets force your customers onto someone else's design. Naturpay hands you the building blocks instead — components, hooks, an SDK and a clean API — so the payment step looks and behaves like the rest of your product.

Headless components

Card fields, wallet buttons, address capture and the full payment element ship as framework-ready components you compose yourself. No iframe you can't touch, no template you have to accept.

React · Vue · Web Components

Total design control

Drive every token — type, color, spacing, radius, motion — through an appearance object, or drop to raw CSS and own the markup entirely. Your checkout, your design system, no compromises.

Appearance API · CSS hooks

Payments carried underneath

You build the front end; we run the rest. Cards, wallets, 3-D Secure, network tokenization, retries and settlement all happen behind the SDK, and card data never lands on your servers.

PCI DSS L1 · SCA

A typed, idempotent API

Create payment intents, attach methods and confirm from your server with idempotency keys, predictable errors and typed responses. Webhooks are signed and replayable, so your ledger stays exact.

REST · webhooks · SDKs

Test mode that mirrors live

Build against a sandbox that returns the same shapes as production. Trigger declines, disputes and 3-D Secure flows on demand, replay webhooks locally, and ship knowing the edge cases are covered.

Sandbox · CLI · fixtures

Scope offloaded

Fields are served and tokenized by Naturpay, keeping raw card data out of your systems and your PCI scope at SAQ A. Strong customer authentication is triggered only when a transaction needs it.

SAQ A · tokenization

From install to first charge

From npm install to live

Create an intent on your server, mount the payment element in your front end, confirm and listen for the webhook. No redirect, no hosted page, no surprise template — just your UI calling our SDK.

  • Install one package and initialize with your publishable key.
  • Mount the payment element into any node you control.
  • Confirm on the server and react to a signed webhook.
// 1 — create a payment intent on your server
import { Naturpay } from 'naturpay';
const wv = new Naturpay(process.env.WV_SECRET);

const intent = await wv.intents.create({
  amount: 12800,
  currency: 'eur',
  capture: 'automatic',
}, { idempotencyKey: order.id });
// 2 — mount the element in your UI
import { PaymentElement } from 'naturpay/react';

function Pay({ clientSecret }) {
  return (
    <PaymentElement
      secret={clientSecret}
      appearance={theme}
    />
  );
}
// 3 — handle the signed webhook
const event = wv.webhooks.verify(
  body, sig, process.env.WV_WHSEC
);

if (event.type === 'payment.succeeded') {
  await fulfill(event.data.intent);
}

The component catalogue

Pick the pieces, compose the flow

Every part of the payment step is its own component, so you can drop in the whole element or wire up the fields one by one. Each is headless, themeable and validated for you.

<PaymentElement />all-in-one

Payment element

The complete payment step — wallets, cards and local methods in one mountable component that adapts to the buyer.

<CardFields />granular

Card fields

Individually mountable number, expiry and CVC inputs you can place anywhere in your own form layout.

<WalletButton />express

Wallet button

Express wallet buttons that appear only when the device supports them, for one-tap confirmation.

See all components

Built for production

What platform teams measure

38ms
Median element render
From mount call to interactive fields, measured on real mobile sessions.
99.99%
API uptime
A trailing-year figure for the payments API, served from the edge worldwide.
40+
Composable components
Elements, fields and hooks across React, Vue and framework-free builds.
135+
Currencies at checkout
Display and charge in the buyer's currency, settle in your own.
appearance 
const theme = {
  variables: {
    fontFamily: 'Inter, sans-serif',
    colorAccent: '#c2410c',
    colorSurface: '#16120f',
    radius: '4px',
    spacingUnit: '6px',
  },
  rules: {
    '.Field': { border: '1px solid #3a2f26' },
    '.Field:focus': { border: '1px solid #c2410c' },
    '.WalletButton': { radius: '3px' },
  },
};

Customization

Style every pixel like it's yours

Start with an appearance object for the fast path, then drop to CSS rules for full control of each element. The checkout inherits your fonts, colors and spacing so it reads as one continuous product — never a bolted-on widget.

  • Design tokens for type, color, radius, spacing and motion.
  • Per-element CSS rules and state selectors for the last 10%.
  • Light, dark and brand themes that switch at runtime.

“We'd outgrown a hosted page that never matched our app. With Naturpay we rebuilt the whole payment step from components in a sprint — same flow, our design, and card data still never touches our servers. The API just behaved.”

Dana Reyes

Staff Engineer, Northwind Commerce

1 sprint

from hosted redirect to a fully embedded, on-brand checkout.

Before you ask

For the engineers

Is the checkout really headless, or just a themeable widget?

Genuinely headless. You can mount the whole payment element, or compose the individual card, expiry, CVC and wallet components into your own markup and layout. The fields are served by Naturpay for PCI reasons, but everything around them — structure, styles, copy, behavior — is yours.

Which frameworks do you support?

There are first-party React and Vue packages, plus framework-free Web Components and a vanilla JS SDK that works anywhere. Server SDKs cover Node, Python, Ruby, Go and PHP, and the REST API is there if your stack isn't on that list.

Do raw card details ever reach my servers?

No. The card fields are isolated and tokenized by Naturpay before anything leaves the browser, so raw numbers never hit your backend. That keeps your PCI scope at SAQ A while you still control the entire surrounding experience.

How do you handle 3-D Secure and strong customer authentication?

The SDK handles the full 3-D Secure flow for you and only triggers a challenge when the issuer or regulation requires one. You confirm the intent; we run the authentication step inline and return a clear result you can branch on.

What does testing look like?

A full sandbox returns the same response shapes as live. You can force declines, disputes and authentication challenges with test methods, replay signed webhooks through the CLI, and use fixtures so your integration tests stay deterministic.

How do webhooks and idempotency work?

Every state change emits a signed webhook you can verify with one SDK call, and events are replayable so a missed delivery never desyncs your ledger. Write requests accept an idempotency key, so a retried call is safe and never double-charges.

Build your checkout on Naturpay

Spin up a test key, mount the payment element, and run a real flow in your own UI this afternoon. When you're ready for production, talk to an engineer about volume and go-live.

Read the docs Talk to an engineer