StablePay Integration Demo

CHOOSE YOUR INTEGRATION

Three ways to integrate StablePay checkout

★

WIDGET

◆

HOSTED

■

API

EMBEDDED WIDGET

Add checkout directly to your website with one script tag.

<!-- 1. Include the script -->
<script src="https://stablepay.com/checkout.js"></script>

<!-- 2. Add the widget -->
<div class="stablepay-checkout"
     data-merchant="YOUR_ID"
     data-amount="10.00"
     data-chain="BASE_SEPOLIA">
</div>

import { useEffect } from 'react';

function Checkout() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://stablepay.com/checkout.js';
    document.body.appendChild(script);
  }, []);

  return (
    <div className="stablepay-checkout"
         data-merchant="YOUR_ID"
         data-amount="10.00" />
  );
}

<template>
  <div class="stablepay-checkout"
       :data-merchant="merchantId"
       :data-amount="amount" />
</template>

<script>
export default {
  data() {
    return {
      merchantId: 'YOUR_ID',
      amount: '10.00'
    }
  },
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://stablepay.com/checkout.js';
    document.body.appendChild(script);
  }
}
</script>

FEATURES:

★ Works on any website
★ Auto-detects MetaMask & Phantom
★ Mobile responsive
★ Customizable theme

HOSTED CHECKOUT

Redirect customers to a StablePay-hosted checkout page.

// 1. Create order
const order = await fetch('/api/v1/orders', {
  method: 'POST',
  body: JSON.stringify({
    merchantId: 'YOUR_ID',
    amount: '10.00',
    chain: 'BASE_SEPOLIA'
  })
});

const { id } = await order.json();

// 2. Redirect to checkout
window.location.href =
  `https://stablepay.com/checkout?id=${id}`;

FEATURES:

★ No frontend code needed
★ PCI compliant
★ Built-in security
★ Returns to your site

CUSTOM API INTEGRATION

Build your own checkout UI using our REST API.

// Create order
POST /api/v1/orders
{
  "merchantId": "xxx",
  "amount": "10.00",
  "chain": "BASE_SEPOLIA"
}

// Get order status
GET /api/v1/orders/:orderId

// Confirm payment
POST /api/v1/orders/:orderId/confirm
{
  "txHash": "0xabc..."
}

FEATURES:

★ Full control over UX
★ Custom branding
★ Advanced features
★ Backend integration

LIVE DEMO

Try it yourself on Base Sepolia testnet

NEED TESTNET USDC?

Get free testnet USDC from the Base Sepolia faucet to test payments.

AMOUNT (USDC)

CHAIN

10.00

CHAIN: BASE SEPOLIA

STABLEPAY INTEGRATION DEMO

CHOOSE YOUR INTEGRATION

EMBEDDED WIDGET

HOSTED CHECKOUT

CUSTOM API INTEGRATION

LIVE DEMO