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"]