Step 1: Get Your Inputs Ready
During implementation of the checkout, you will need these variables:
Step 2: Add Script to Your Page
Include our JavaScript SDK in your checkout page:
<!-- 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 3: Initialize Payment Widget
Create a div with id 'payment-container' for the payment widget. It should have at least 400px by 400px space.
Replace the orange variables in the code below and then use it to initialize the widget:
<body>
<div id="payment-container"></div>
<script>
const widget = new PaymentWidget({
type: 'defaultPayment',
vendorID: 'your_vendor_id', //must be a string
amount: your_amount, //must be a number
currency: 'your_currency', //[optional] must be 'EUR' or 'USD'
userID: 'your_customer_id', //[optional] must be a string
webhook: 'your_webhook', //[optional] must be a string
});
</script>
</body>
Step 4: Listen for status changes
The widget will emit events and Stablio will send POST requests to your webhook when there is an update in the payment process.
You can use these events to know when the user has finished the payment and update your website accordingly.
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.address}`);
break;
case 'payment_pending':
console.log(`Payment pending! Address: ${data.address}`);
break;
}
});
Step 5: See Insights
Once payments start coming in, you can access insights and analytics from your dashboard.
📊
Home Tab
View payment analytics, transaction volumes, and revenue trends at a glance.
👥
Customers Tab
Track individual customer payment histories and analyze spending patterns.
💡 Tip: Use these insights to optimize your payment experience and understand your customers better.
🎉 Congratulations! You've completed the Web Checkout setup guide.
You're now ready to start accepting Stablecoin payments on your website!