@coincircuit/checkout

CoinCircuit Checkout SDK. Add a payment modal to your site with a few lines of code.

Install

npm install @coincircuit/checkout

Usage (Vanilla JS)

import { CoinCircuitCheckout } from '@coincircuit/checkout';

const checkout = new CoinCircuitCheckout();

// Call from a click handler
button.addEventListener('click', () => {
  checkout.open({
    reference: 'cs_ref_abc123',
    theme: 'dark',
    onPaymentComplete: (data) => {
      console.log('Paid!', data.transactionHash);
    },
    onClose: () => {
      console.log('Checkout closed');
    },
  });
});

Usage (React)

import { CoinCircuitCheckoutButton } from '@coincircuit/checkout/react';

function PayPage() {
  return (
    <CoinCircuitCheckoutButton
      reference="cs_ref_abc123"
      theme="dark"
      label="Pay Now"
      onPaymentComplete={(data) => console.log(data)}
      onClose={() => console.log('closed')}
    />
  );
}

How it works

1. Your backend creates a payment session via the CoinCircuit API
2. You pass the session reference to the SDK
3. The SDK opens a full-screen modal with the checkout page in an iframe
4. The customer completes payment
5. Your callbacks fire with payment data
6. Modal closes automatically on success

Callbacks

| Callback | When | |----------|------| | onReady | Checkout page finished loading | | onPaymentComplete | Payment confirmed on-chain | | onPaymentFailed | Payment failed | | onExpired | Session expired | | onClose | User closed the modal |

Links

• API Reference
• Node.js SDK

License

MIT