import { useEffect } from 'react';
export default function Checkout() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://wetakestables.shop/checkout-widget.js';
document.head.appendChild(script);
document.addEventListener('stablepay:payment.success', (event) => {
console.log('Payment successful:', event.detail);
// Save to your database
});
}, []);
return (
<div className="stablepay-checkout"
data-merchant="YOUR_MERCHANT_ID"
data-amount="10.00"
data-chain="BASE_MAINNET">
</div>
);
}
'use client';
import Script from 'next/script';
export default function CheckoutPage() {
return (
<>
<Script src="https://wetakestables.shop/checkout-widget.js" />
<div className="stablepay-checkout"
data-merchant={process.env.NEXT_PUBLIC_STABLEPAY_MERCHANT_ID}
data-amount="10.00"
data-chain="BASE_MAINNET">
</div>
</>
);
}
<template>
<div class="stablepay-checkout"
:data-merchant="merchantId"
data-amount="10.00"
data-chain="BASE_MAINNET">
</div>
</template>
<script setup>
import { onMounted } from 'vue';
const merchantId = import.meta.env.VITE_STABLEPAY_MERCHANT_ID;
onMounted(() => {
const script = document.createElement('script');
script.src = 'https://wetakestables.shop/checkout-widget.js';
document.head.appendChild(script);
});
</script>
<!-- Add to your WordPress post/page -->
<script src="https://wetakestables.shop/checkout-widget.js"></script>
<div class="stablepay-checkout"
data-merchant="YOUR_MERCHANT_ID"
data-amount="10.00"
data-chain="BASE_MAINNET">
</div>
<!-- Or use shortcode (requires plugin) -->
[stablepay_checkout amount="10.00" product="Premium Membership"]