Talk to an engineer
SDKs Front-end, server and platform connectors

Drops into the stack you run.

Naturpay meets your codebase where it is. Mount the checkout with a first-party package for React, Vue, Svelte, Web Components or plain JavaScript, drive payments from a typed server SDK in your language, and wire it to a headless storefront or a custom cart through clean connectors. One API underneath, the same shapes everywhere.

Read the docs See the SDKs
Five front-end packages Five server SDKs REST for everything else
npm i naturpayadded 1 package · 0 peers
Same API, any stacktyped end to end

Front-end frameworks

Mount it where your UI already lives

Each package wraps the same headless payment element in idioms your framework expects — components and hooks in React, a plugin and composables in Vue, an action in Svelte, a custom element anywhere. No framework? The vanilla SDK mounts into any DOM node.

React

Typed components and hooks, with a provider that carries the intent and appearance down the tree. Works with the app router, server components and Suspense.

import {PaymentElement} from 'naturpay/react'

Vue

A plugin and a set of composables that feel native to the Composition API. Reactive intent, two-way validation state and SSR-safe hydration included.

import {PaymentElement} from 'naturpay/vue'

Svelte

A use:action and a thin store that bind the element to your markup with almost no boilerplate. Plays cleanly with SvelteKit load functions and form actions.

import {payment} from 'naturpay/svelte'

Web Components

A framework-free custom element you can drop into any page — Angular, Solid, Astro or hand-written HTML. Style it through the same appearance tokens.

<naturpay-element></>

Vanilla JS

The core SDK with no framework at all. Initialize with your key, build the checkout, and mount it into any node by selector. Everything else is built on this.

wv.checkout().mount('#pay')

Typed by default

Every front-end package ships with TypeScript types generated from the same schema as the API, so intents, events and errors autocomplete and check at build time.

// types.d.ts bundled

One element, your idiom

The same mount, three ways

Whatever the framework, you are mounting the same headless payment element against the same client secret. Switch the panels to see the identical flow expressed in React, Vue and plain JavaScript — the API underneath never changes.

mount the element 
// React — components and hooks
import { NaturpayProvider, PaymentElement } from 'naturpay/react';

function Checkout({ clientSecret }) {
  return (
    <NaturpayProvider secret={clientSecret} appearance={theme}>
      <PaymentElement />
    </NaturpayProvider>
  );
}
// Vue — plugin and composables
<script setup>
import { PaymentElement, useCheckout } from 'naturpay/vue';
const { ready } = useCheckout({ secret: clientSecret, appearance: theme });
</script>

<template>
  <PaymentElement v-if="ready" />
</template>
// Vanilla — the core SDK
const wv = Naturpay('pk_live_…');
const checkout = wv.checkout({
  secret: clientSecret,
  appearance: theme,
});
checkout.mount('#pay');

Server SDKs

Run the payment from your backend

Create intents, confirm charges, issue refunds and verify webhooks from the language your services already speak. Every server library is idempotent, typed where the language allows, and returns the same predictable error shapes.

Node

A typed, promise-based client for any Node or edge runtime. Works in serverless functions, with native fetch and tree-shakeable imports.

npm i naturpay

Python

Sync and async clients with full type hints, ready for Django, FastAPI, Flask or a plain script. Pydantic models for every resource.

pip install naturpay

Ruby

An idiomatic gem that drops straight into Rails. Configure once with your secret key and call resources as plain Ruby objects.

gem install naturpay

Go

A small, context-aware package with typed structs and explicit errors. Built for high-throughput services and easy to vendor.

go get natur-pay.com/go

PHP

A Composer package that fits Laravel, Symfony or legacy code alike. PSR-compliant, with a clean client and signed webhook helpers.

composer require naturpay

REST and CLI

No SDK for your language? The REST API is stable and versioned, and the CLI scaffolds keys, tails events and replays webhooks from your shell.

curl api.natur-pay.com

Platform connectors

Wire it into your commerce layer

If you already run a storefront or a cart, a connector maps your orders to Naturpay intents and your fulfillment to signed webhooks — so the payment step plugs in without reshaping the rest of your commerce stack.

headless-storefrontconnector

Headless storefronts

Drive a decoupled front end from any commerce backend: create the intent in your API layer, mount the element in your storefront, fulfill on the webhook. Framework-agnostic.

custom-cartconnector

Custom carts

Built your own cart and order model? Map line items and totals to an intent, embed the checkout at the final step, and reconcile against the event stream.

oss-commerceconnector

OSS commerce frameworks

Open-source commerce frameworks slot in through a payment-provider interface, so adding Naturpay is a config block and a webhook route, not a rewrite.

subscriptionsconnector

Subscription billing

Tokenize once at checkout and reuse the saved method for recurring charges, with off-session confirmation and authentication handled when an issuer asks for it.

order-syncconnector

Order and ledger sync

Mirror every payment, refund and dispute into your order system through signed, replayable webhooks, so your books stay exact even after a missed delivery.

webhook-relayconnector

Webhook relay

Forward events to your queue or worker with verified signatures and at-least-once delivery, and replay any range from the dashboard or the CLI.

From zero to shipped

Four steps, any stack

Install

Add the front-end package for your framework and the server SDK for your language, or pull the REST client. One dependency on each side.

npm · pip · gem · go · composer

Mount

Create an intent on your server, pass the client secret to the front end, and mount the payment element into a node you control.

element · appearance

Confirm

Confirm the payment, let the SDK run 3-D Secure inline when it is needed, and branch on a clear, typed result.

confirm · 3-D Secure

Ship

Verify the signed webhook, fulfill the order, and go live with the same code you tested against the sandbox.

webhook · go live
Open the quickstart

Plug Naturpay into what you've built

Pick your framework, pull the SDK, and have a real payment running in your own stack this afternoon. When you outgrow the defaults, talk to an engineer about your setup.

Read the docs Talk to an engineer