Overview

Official Flintn Payment Checkout makes it easy to integrate payments into your application.

Quick Start

SDK (Recommended)

npm install flintn-checkout

import { FlintNPayment } from 'flintn-checkout';

const payment = new FlintNPayment({
  config: {
    clientSessionId: 'your_client_session_id',
  },
  onPayment: (result) => {
    if (result.status === 'PAYMENT_SUCCESS') {
      console.log('Payment succeeded:', result.data);
    } else {
      console.log('Payment failed:', result.error);
    }
  },
});

payment.mount('#payment-container');

Manual

const ORIGIN = 'https://pay.flintn.com';

const container = document.getElementById('payment-container');

const iframe = document.createElement('iframe');
iframe.src = ORIGIN + '/iframe/';
iframe.title = 'Checkout form';
iframe.style.cssText = 'width: 100%; height: 100%; border: none;';
iframe.sandbox = 'allow-scripts allow-forms allow-popups allow-same-origin';
iframe.allow = 'payment *; clipboard-write';
container.appendChild(iframe);

const config = {
  clientSessionId: 'your_client_session_id',
};

function sendConfig() {
  if (!iframe.contentWindow) return;
  iframe.contentWindow.postMessage(
    { type: 'WIDGET_CONFIG', payload: config },
    ORIGIN,
  );
}

iframe.addEventListener('load', sendConfig);

window.addEventListener('message', (event) => {
  if (event.origin !== ORIGIN) return;

  const { type, payload } = event.data || {};

  switch (type) {
    case 'WIDGET_READY':
      sendConfig();
      break;

    case 'PAYMENT':
      console.log('Payment result:', payload);
      break;

    case 'EXPRESS_PAYMENT':
      console.log('Express payment result:', payload);
      break;

    case 'REDIRECT':
      if (payload?.url) {
        window.location.href = payload.url;
      }
      break;
  }
});

Next Steps

• SDK Installation — Full SDK setup with JavaScript or React, callbacks, and configuration

• Manual Installation — Direct iframe integration with postMessage communication