Vanilla JS Integration

Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>Checkout</title>
</head>
<body>
  <h2>Complete Your Payment</h2>
  <div id="card-container"></div>

  <script src="https://cdn.jsdelivr.net/npm/@inflow_pay/sdk/dist/sdk.umd.js"></script>
  <script>
    const provider = new InflowPaySDK.InflowPayProvider({
      config: { publicKey: 'inflow_pub_xxx' }
    });

    fetch('/api/create-payment', { method: 'POST' })
      .then(res => res.json())
      .then(data => {
        const cardElement = provider.createCardElement({
          paymentId: data.paymentId,
          container: '#card-container',
          onComplete: (result) => {
            if (result.status === InflowPaySDK.PaymentResultStatus.SUCCESS) {
              setTimeout(() => window.location.href = '/confirmation', 2000);
            }
          },
          onError: (error) => {
            console.error('SDK error:', error);
          },
          style: {
            fontFamily: 'Inter',
            button: {
              backgroundColor: '#0070F3',
              textColor: '#FFFFFF'
            }
          }
        });
        cardElement.mount();
      });
  </script>
</body>
</html>

Using npm Instead of CDN

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

const provider = new InflowPayProvider({
  config: { publicKey: 'inflow_pub_xxx' }
});

const cardElement = provider.createCardElement({
  paymentId: 'pay_xxx',
  container: '#card-container',
  onComplete: (result) => {
    if (result.status === PaymentResultStatus.SUCCESS) {
      // Payment successful
    }
  }
});

cardElement.mount();

API

InflowPayProvider

const provider = new InflowPayProvider({
  config: {
    publicKey: 'inflow_pub_xxx',  // Required
    locale: 'en',                  // Optional (defaults to browser language)
  }
});

createCardElement Options

Option	Type	Required	Description
`paymentId`	string	Yes	Payment ID from your backend
`container`	string or HTMLElement	Yes	CSS selector or DOM element
`onComplete`	function	No	Called when payment completes
`onReady`	function	No	Called when form is ready
`onChange`	function	No	Called on validation state change
`onError`	function	No	Called on SDK errors
`showDefaultSuccessUI`	boolean	No	Show built-in success screen (default: true)
`style`	object	No	Custom styling
`buttonText`	string	No	Custom button text
`placeholders`	object	No	Custom input placeholders

CardElement Methods

Method	Description
`mount()`	Mount the card form to the DOM
`destroy()`	Cleanup and unmount

Custom Success UI

By default, the SDK shows a built-in success screen. To use your own:

const cardElement = provider.createCardElement({
  paymentId: 'pay_xxx',
  container: '#card-container',
  showDefaultSuccessUI: false,
  onComplete: (result) => {
    if (result.status === PaymentResultStatus.SUCCESS) {
      document.getElementById('card-container').innerHTML = `
        <div class="custom-success">
          <h2>Thank you!</h2>
          <p>Order confirmed.</p>
        </div>
      `;
    }
  }
});

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