Web / JavaScript SDK

The CoverPay JavaScript SDK provides a drop-in BNPL checkout for any web application. No framework required — works with vanilla JS, jQuery, Vue, Svelte, or any other setup. For React, see the dedicated React SDK.

Installation

npm install @coverpay/sdk

Or with yarn:

yarn add @coverpay/sdk

Or via CDN:

<script src="https://cdn.coverpayme.com/sdk/v1/coverpay.min.js"></script>

Initialization

Create a CoverPay instance with your client ID and environment. Do this once when your app loads.

import { CoverPay } from '@coverpay/sdk';

const coverpay = CoverPay.create({
  clientId: 'your_client_id',
  environment: 'sandbox', // or 'production'
});

Opening the Checkout

Call coverpay.open() to launch the checkout modal. The user selects a BNPL provider, confirms the plan, and you receive a payment token.

const result = await coverpay.open({
  amount: 9999,              // Amount in cents ($99.99)
  merchantName: 'My Store',
  customerEmail: 'user@example.com', // optional
  theme: 'dark',             // optional: 'light' | 'dark' | 'auto'
});

if (result.success) {
  // Send token to your server to confirm the payment
  const { paymentToken, provider, plan } = result;
  await fetch('/api/confirm', {
    method: 'POST',
    body: JSON.stringify({ paymentToken }),
  });
}

Handling Results

The open() method returns a promise that resolves with a result object.

// Success result
{
  success: true,
  paymentToken: 'cp_tok_abc123...',
  provider: 'klarna',
  plan: {
    type: 'pay_in_4',
    installments: 4,
    installmentAmount: 2500, // cents
    totalAmount: 9999,
    apr: 0,
  },
}

// Failure result
{
  success: false,
  error: {
    code: 'user_cancelled',
    message: 'User closed the checkout',
  },
}

You can also use callback-style with onSuccess and onError:

coverpay.open({
  amount: 9999,
  merchantName: 'My Store',
  onSuccess: (result) => {
    console.log('Token:', result.paymentToken);
    console.log('Provider:', result.provider);
    console.log('Plan:', result.plan);
  },
  onError: (error) => {
    console.error('Error code:', error.code);
    console.error('Message:', error.message);
  },
  onClose: () => {
    console.log('Modal closed');
  },
});

Configuration Reference

CoverPay.create() options

coverpay.open() options

Events

You can listen to lifecycle events on the CoverPay instance for more granular control.

coverpay.on('ready', () => {
  console.log('CoverPay SDK loaded and ready');
});

coverpay.on('providerSelected', (event) => {
  console.log('User selected:', event.provider);
  console.log('Plan:', event.planType);
});

coverpay.on('close', (event) => {
  console.log('Modal closed. Reason:', event.reason);
  // reason: 'completed' | 'user_cancelled' | 'error'
});

coverpay.on('error', (error) => {
  console.error('Error:', error.code, error.message);
});

Custom Styling

Customize the checkout appearance to match your brand.

const coverpay = CoverPay.create({
  clientId: 'your_client_id',
  environment: 'sandbox',
  style: {
    // Modal overlay
    overlay: {
      backgroundColor: 'rgba(0, 0, 0, 0.6)',
    },
    // Modal container
    modal: {
      borderRadius: '16px',
      maxWidth: '420px',
    },
    // Primary button
    primaryButton: {
      backgroundColor: '#f59e0b',
      color: '#000000',
      borderRadius: '12px',
    },
    // Provider card
    providerCard: {
      borderRadius: '12px',
      borderColor: 'rgba(255, 255, 255, 0.06)',
    },
  },
});

Complete Example

import { CoverPay } from '@coverpay/sdk';

// 1. Initialize once
const coverpay = CoverPay.create({
  clientId: 'cp_live_abc123',
  environment: 'production',
});

// 2. Listen for events
coverpay.on('ready', () => {
  document.getElementById('pay-btn').disabled = false;
});

coverpay.on('providerSelected', (e) => {
  analytics.track('bnpl_provider_selected', {
    provider: e.provider,
  });
});

// 3. Open on button click
document.getElementById('pay-btn').addEventListener('click', async () => {
  try {
    const result = await coverpay.open({
      amount: getCartTotal(), // cents
      merchantName: 'My Store',
      customerEmail: getCustomerEmail(),
      orderId: getCurrentOrderId(),
      theme: 'dark',
    });

    if (result.success) {
      // 4. Confirm server-side
      const response = await fetch('/api/checkout/confirm', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          paymentToken: result.paymentToken,
          orderId: getCurrentOrderId(),
        }),
      });

      if (response.ok) {
        window.location.href = '/order/success';
      }
    }
  } catch (error) {
    console.error('Checkout error:', error);
  }
});

// 4. Clean up when done
// coverpay.destroy();

CDN / Script Tag Usage

If you're not using a bundler, include the SDK via a script tag.

<script src="https://cdn.coverpayme.com/sdk/v1/coverpay.min.js"></script>
<script>
  const coverpay = CoverPay.create({
    clientId: 'your_client_id',
    environment: 'sandbox',
  });

  document.getElementById('bnpl-btn').onclick = function() {
    coverpay.open({
      amount: 4999,
      merchantName: 'My Store',
      onSuccess: function(result) {
        alert('Payment authorized: ' + result.paymentToken);
      },
    });
  };
</script>

<button id="bnpl-btn">Pay with BNPL</button>