Web Checkout Integration

Overview

The Web Checkout integration allows you to embed our payment widget directly into your website, providing a seamless payment experience for your customers without leaving your site.

Integration Steps

Step 1: Add the JavaScript SDK

First, include our JavaScript SDK in your checkout page by adding this script tag to your HTML head:

<!-- Add this to your HTML head -->
<script src="https://cdn.jsdelivr.net/gh/ReasonZx/crypto-payments-widget@2.3.0/dist/crypto-payments-widget.js"></script>

Step 2: Create a container element

Add a div with id 'payment-container' where you want the payment widget to appear. This container should have at least 400px by 400px of space:

<div id="payment-container"></div>

Step 3: Initialize the widget

Initialize the payment widget with your vendor ID and payment details:

const widget = new PaymentWidget({
    type: 'defaultPayment',
    vendorID: 'your_vendor_id',                // Your Stablio vendor ID (string)
    amount: 49.99,                             // Payment amount (number)
    currency: 'USD',                           // Currency: 'USD' or 'EUR'             [optional] string defaults to 'USD'
    userID: 'customer123',                     // Customer identifier                  [optional] string
    webhook: 'https://your-site.com/webhook',  // Webhook URL for server notifications [optional] string
});

Step 4: Listen for status changes

Set up event listeners to track payment status changes and update your UI accordingly or receive notifications via webhooks :

document.getElementById('payment-container').addEventListener('payment_status', (event) => {
    const { status, data } = event.detail;
    
    switch(status) {
        case 'payment_completed':
            console.log(`Payment completed! User: ${data.userID}`);
            break;
            
        case 'payment_expired':
            console.log(`Payment expired! User: ${data.userID}`);
            break;
            
        case 'payment_pending':
            console.log(`Payment pending! Address: ${data.address}`);
            break;
    }
});

Configuration Options

The PaymentWidget constructor accepts the following options:

Event Types

The payment widget emits the following event types: