Uniwire Docs

Appearance

Custom Checkout Page ​

This page demonstrates how to create a custom checkout page with inline placement and programmatic SDK calls, giving you full control over the user interface and payment flow.

Overview ​

The Custom Checkout Page example shows how to:

  • Create your own checkout form with custom styling
  • Use inline placement to embed the payment widget
  • Call the SDK programmatically without relying on buttons
  • Handle form validation and user input
  • Integrate customer data with payment processing

Interactive Demo ​

Try the interactive example below to see how a custom checkout page works:

Custom Checkout Page

This example shows how to create a custom checkout page with inline placement and programmatic SDK calls.

Invoice

Your Brand
Invoice ID:N/A
Invoice Date:N/A
Description:Custom Product
Payment requested:N/A
Amount paid:0.00 N/A
Status: Awaiting

Code Examples ​

Basic Setup and Open ​

javascript
// Initialize the SDK
UniwireSDK.setup({
  account: "your-account-id",
  profile: "your-profile-id"
});

// Open payment with targetCurrency
UniwireSDK.open({
  product: "Custom Product",
  amount: "25.00",
  currency: "USD",
  targetCurrency: "BTC",
  placement: "custom-checkout-widget",
  kind: "inline"
});

Using targetInvoice ​

javascript
// Initialize the SDK
UniwireSDK.setup({
  account: "your-account-id", 
  profile: "your-profile-id"
});

// Open payment with targetInvoice
UniwireSDK.open({
  product: "Custom Product",
  amount: "25.00",
  currency: "USD",
  targetInvoice: "your-invoice-id",
  placement: "custom-checkout-widget",
  kind: "inline"
});

Complete Implementation ​

html
<!DOCTYPE html>
<html>
<head>
  <title>Custom Checkout</title>
</head>
<body>
  <!-- Your custom invoice design -->
  <div class="invoice-wrapper">
    <div class="invoice-header">
      <h2>Invoice</h2>
      <div class="invoice-brand">Your Brand</div>
    </div>
    
    <div class="invoice-details">
      <div class="detail-row">
        <span class="detail-label">Invoice ID:</span>
        <span class="detail-value" id="invoice-id">Loading...</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Amount:</span>
        <span class="detail-value" id="invoice-amount">$25.00</span>
      </div>
      <div class="detail-row">
        <span class="detail-label">Status:</span>
        <span class="detail-value" id="invoice-status">Awaiting</span>
      </div>
    </div>

    <!-- SDK Widget Container -->
    <div id="custom-checkout-widget"></div>
  </div>

  <script>
    // Initialize SDK
    UniwireSDK.setup({
      account: "your-account-id",
      profile: "your-profile-id"
    });

    // Open payment programmatically
    function openPayment() {
      UniwireSDK.open({
        product: "Custom Product",
        amount: "25.00",
        currency: "USD",
        targetCurrency: "BTC", // or use targetInvoice: "invoice-id"
        placement: "custom-checkout-widget",
        kind: "inline"
      });
    }

    // Listen for SDK events
    window.addEventListener("cryptochill-open", (event) => {
      const { data } = event.detail;
      document.getElementById("invoice-id").textContent = data.payment.id;
    });

    window.addEventListener("cryptochill-update", (event) => {
      const { data } = event.detail;
      // Update invoice details with real data
      document.getElementById("invoice-amount").textContent = 
        `${data.payment.invoice_currency.symbol}${data.payment.invoice_amount}`;
    });

    // Auto-open payment on page load
    openPayment();
  </script>
</body>
</html>

Key Parameters ​

  • targetCurrency: Specify the cryptocurrency to receive (e.g., "BTC", "ETH", "USDT-ETH")
  • targetInvoice: Use an existing invoice ID instead of creating a new one
  • placement: The ID of the container where the widget will mount
  • kind: "inline": Required for inline placement (not modal)

Next Steps ​