SDK Overview & Security

What Is the Inflow SDK?

The @inflow_pay/sdk package provides a drop-in card payment form that you embed in your website. It supports both React and vanilla JavaScript applications.

The SDK uses an iframe-based architecture: card details are entered in a secure iframe hosted by Inflow, so sensitive card data never touches your servers.

How It Works: The Two-Step Flow

Every SDK integration follows the same two steps:

Step 1 — Your backend creates a payment

Call POST /api/server/payment with your private API key (X-Inflow-Api-Key) and the standard base URL https://api.inflowpay.xyz. Do not include the card field — the SDK collects the card in the browser. The response contains the payment id you'll pass to the frontend.

curl -X POST https://api.inflowpay.xyz/api/server/payment \
  -H "X-Inflow-Api-Key: your_private_key" \
  -H "Content-Type: application/json" \
  -d '{
    "products": [{ "name": "Pro Plan", "price": 4999, "quantity": 1 }],
    "currency": "EUR",
    "customerEmail": "[email protected]",
    "billingCountry": "FR",
    "purchasingAsBusiness": false
  }'

Where is this endpoint in the API reference? It lives in the Payment - Server to server section — but don't let the name put you off: this is the right endpoint for SDK integrations too. As long as you don't send the card field, you use the default base URL, and no server-to-server activation is needed. The api-card.inflowpay.com base URL and the support activation only apply if you transmit raw card details yourself, which the SDK does for you.

Step 2 — Your frontend mounts the SDK

Your frontend initializes the SDK with your public API key (publicKey).
The SDK renders a card input form inside a secure iframe, bound to the paymentId from Step 1.
The customer enters their card details and submits.
The SDK handles tokenization, 3D Secure authentication, and payment confirmation automatically.
Your app receives the result via the onComplete callback.

See the full examples: React Integration · Vanilla JS Integration

Starting with a free trial or saving a card without charging? The SDK also accepts a setupId instead of a paymentId — see Free Trial & Card Setup.

Building an upsell funnel? Create the payment with savePaymentMethod: true to save the customer's card, then charge later offers in one click from your backend — see One-Click Upsells, Downsells & Instant Purchases.

Security

Feature	Description
PCI Compliant	Card data is collected and tokenized within a secure iframe. Your servers never handle raw card numbers
Iframe Isolation	The payment form runs in a sandboxed iframe, isolated from your page's JavaScript
HTTPS Only	All communication between the SDK and Inflow servers is encrypted
Public Key Only	The frontend uses your public key, which is safe to expose in browser code
Tokenization	Card details are tokenized before any processing

Never expose your private API key (X-Inflow-Api-Key) in frontend code. It should only be used in your backend.

Supported Features

Card payments (Visa, Mastercard, Amex, Discover)
3D Secure (3DS) authentication — handled automatically
Built-in success UI (customizable or replaceable)
Custom styling (fonts, colors, dark mode)
React and vanilla JavaScript integration
CDN option for vanilla HTML pages
TypeScript support with full type definitions
Responsive design, WCAG compliant
Multiple locale support (en, de, es, fr, it, nl, pl, pt)

The SDK evolves quickly. Always refer to the npm package page for the latest API details and version.