React Integration

Setup

Import the React components from the SDK:

import { InflowPayProvider, CardElement, PaymentResultStatus } from '@inflow_pay/sdk/react';

Complete Example

Step 1: Create a Payment (Backend)

app.post('/api/create-payment', async (req, res) => {
  const response = await fetch('https://api.inflowpay.xyz/api/server/payment', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Inflow-Api-Key': process.env.INFLOW_PRIVATE_KEY
    },
    body: JSON.stringify({
      products: [{ name: 'Pro Plan', price: 4999, quantity: 1 }],
      currency: 'EUR',
      customerEmail: req.body.email,
      billingCountry: req.body.country,
      purchasingAsBusiness: false,
      firstName: 'John',
      lastName: 'Doe',
    })
  });

  const data = await response.json();
  res.json({ paymentId: data.id });
});

Step 2: Render the Card Form (Frontend)

import { useState, useEffect } from 'react';
import { InflowPayProvider, CardElement, PaymentResultStatus } from '@inflow_pay/sdk/react';

function Checkout() {
  const [paymentId, setPaymentId] = useState<string | null>(null);

  useEffect(() => {
    fetch('/api/create-payment', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: '[email protected]', country: 'FR' })
    })
      .then(res => res.json())
      .then(data => setPaymentId(data.paymentId));
  }, []);

  if (!paymentId) return <div>Loading...</div>;

  return (
    <InflowPayProvider config={{ publicKey: 'inflow_pub_xxx' }}>
      <CardElement
        paymentId={paymentId}
        onComplete={(result) => {
          if (result.status === PaymentResultStatus.SUCCESS) {
            setTimeout(() => window.location.href = '/confirmation', 2000);
          }
          if (result.error) {
            console.error(result.error.message);
          }
        }}
        style={{
          fontFamily: 'Inter',
          button: {
            backgroundColor: '#0070F3',
            textColor: '#FFFFFF',
            borderRadius: '8px'
          }
        }}
        buttonText="Pay €49.99"
      />
    </InflowPayProvider>
  );
}

InflowPayProvider Props

Prop	Type	Required	Description
`config.publicKey`	string	Yes	Your public API key (`inflow_pub_xxx`)
`config.locale`	string	No	UI language: `en`, `de`, `es`, `fr`, `it`, `nl`, `pl`, `pt` (defaults to browser language)

CardElement Props

Prop	Type	Required	Description
`paymentId`	string	Yes	Payment ID from your backend
`onComplete`	function	No	Called when payment completes (success or failure)
`onError`	function	No	Called on SDK-level errors
`onReady`	function	No	Called when the card form is mounted and ready
`onChange`	function	No	Called when form validation state changes
`showDefaultSuccessUI`	boolean	No	Show built-in success screen (default: true)
`style`	object	No	Custom styling (see Styling & Customization)
`buttonText`	string	No	Custom submit button text
`placeholders`	object	No	Custom input placeholders

Payment Result

interface PaymentResult {
  status: 'SUCCESS' | 'FAILED';
  paymentId: string;
  error?: {
    code: string;
    message: string;
    retryable: boolean;
  };
}

Next.js

For Next.js App Router, use the 'use client' directive:

'use client';

import { InflowPayProvider, CardElement } from '@inflow_pay/sdk/react';

The SDK API may evolve. Refer to the npm package for the latest props and types.