Embedded checkout
Open the hosted checkout in a modal on your site with embed.js or the React components.
Create the payment on your server (the API key never reaches the browser), then hand the payment id or checkout_url to the page.
Script tag
<script src="https://pay.your-domain.com/embed.js" defer></script>
<button data-cryptopay-payment="pay_…" data-cryptopay-success-url="/thanks">Pay with crypto</button>
<script>
CryptoPay.openCheckout({
checkoutUrl: payment.checkout_url, // or paymentId
locale: "en",
onStatus: (status) => console.log(status),
onSuccess: () => location.assign("/thanks"),
});
</script>React
import { CryptoPayButton, CryptoPayCheckout } from "@cryptopay/react";
<CryptoPayButton paymentId={payment.id} baseUrl="https://pay.your-domain.com" onSuccess={() => router.push("/thanks")} />
<CryptoPayCheckout checkoutUrl={payment.checkout_url} onStatus={setStatus} />The modal is an iframe over the hosted checkout in embed mode; status messages are origin-checked. Treat onSuccess as a UX signal and ship goods only on payment.confirmed from your webhook endpoint.