CryptoCheckout documentation

The checkout runs in an iframe you open from your own page. Your customer never leaves your site.

Install

<script src="https://www.cryptocheckout.ai/sdk.js"
        integrity="sha384-cjNZpyXGzEF9lSh5wnh8mtsi3YU56F0n0bToTaUBqdDCVZ2AFw4GYqnxlSU3I+ob"
        crossorigin="anonymous"></script>

Copy the snippet from API & SDK in your dashboard rather than this page. Yours has your merchant ID and payout address filled in, and the integrity hash there is always current.

Minimal integration

<script>
  const checkout = CryptoCheckout.init({
    merchantId: "your-merchant-id",
    settlementAnchor: "0xYourPayoutWalletAddress",
    onPaymentConfirmed: (payload) => {
      window.location = "/thank-you";
    },
  });

  document.querySelector("#pay").addEventListener("click", () => {
    checkout.updateCart({ total: 49.00, currency: "EUR" });
    checkout.open();
  });
</script>

`CryptoCheckout.init(config)`

Returns a checkout instance.

string

required

Your merchant ID, from the dashboard.

string

required

Your on-chain payout address. The checkout verifies this against the blockchain before accepting payment and blocks on mismatch. Why this matters.

function

Called when the payment reaches finality. Receives the payment payload.UI only — fulfil orders from webhooks.

function

Called when a payment attempt fails.

Called when the customer dismisses the checkout.

function

Called when the checkout has loaded and completed verification.

Instance methods

method

Sets the amount to charge. Call before open().

Show cart

number

required

Order total in your display currency.

string

required

EUR or USD.

method

Opens the checkout overlay.

method

Closes it programmatically.

method

Tears down the instance and removes its listeners. Call this in your framework’s cleanup hook.

Framework examples

import { useEffect, useRef } from "react";

export function PayButton({ total, currency = "EUR" }) {
  const checkout = useRef(null);

  useEffect(() => {
    checkout.current = window.CryptoCheckout.init({
      merchantId: import.meta.env.VITE_CC_MERCHANT_ID,
      settlementAnchor: import.meta.env.VITE_CC_ANCHOR,
      onPaymentConfirmed: () => (window.location.href = "/thank-you"),
    });
    return () => checkout.current?.destroy();
  }, []);

  const pay = () => {
    checkout.current.updateCart({ total, currency });
    checkout.current.open();
  };

  return <button onClick={pay}>Pay with crypto</button>;
}

<script setup>
import { onMounted, onUnmounted, ref } from "vue";

const props = defineProps({ total: Number, currency: { default: "EUR" } });
const checkout = ref(null);

onMounted(() => {
  checkout.value = window.CryptoCheckout.init({
    merchantId: import.meta.env.VITE_CC_MERCHANT_ID,
    settlementAnchor: import.meta.env.VITE_CC_ANCHOR,
    onPaymentConfirmed: () => (window.location.href = "/thank-you"),
  });
});

onUnmounted(() => checkout.value?.destroy());

function pay() {
  checkout.value.updateCart({ total: props.total, currency: props.currency });
  checkout.value.open();
}
</script>

<template><button @click="pay">Pay with crypto</button></template>

Content Security Policy

If you set a CSP, allow our origin:

script-src  https://www.cryptocheckout.ai;
frame-src   https://www.cryptocheckout.ai;

Use https://www.cryptocheckout.ai, with the www. The apex redirects, and a redirect breaks the origin check the SDK performs.

Troubleshooting

The checkout opens but stays blank

Almost always CSP. Check the browser console for a frame-src violation.

The script doesn't execute at all

A stale integrity hash. The browser refuses to run a file whose hash doesn’t match the pin. Re-copy the snippet from your dashboard.

It shows a configuration mismatch warning

Your settlementAnchor doesn’t match what’s attested on-chain. Check Settings → Payout — most often the anchor in your HTML is an old address. This is the protection working. Verification.

onPaymentConfirmed never fires

Expected if the customer closed the tab. The payment still completed — your webhook is the reliable signal. Finality.

Get started

Core concepts

Integration

Webhooks

Your money

Dashboard

Compliance

Reference

Embed the checkout

Install

Minimal integration

`CryptoCheckout.init(config)`

Instance methods

Framework examples

Content Security Policy

Troubleshooting

​Install

​Minimal integration

​CryptoCheckout.init(config)

​Instance methods

​Framework examples

​Content Security Policy

​Troubleshooting

Install

Minimal integration

`CryptoCheckout.init(config)`

Instance methods

Framework examples

Content Security Policy

Troubleshooting