Embedded Checkout

// Server-side only — keep CREEM_API_KEY secret
import { createCreem } from 'creem_io';

const creem = createCreem({ apiKey: process.env.CREEM_API_KEY! });

const checkout = await creem.checkouts.create({
  productId: 'prod_YOUR_PRODUCT_ID',
  successUrl: 'https://yoursite.com/success', // optional
});

// `checkoutUrl` is typed as optional in the SDK — assert (or guard) it:
const checkoutUrl = checkout.checkoutUrl!;

// Send `checkoutUrl` to the browser, then embed it (below).

import { useCreemCheckout } from '@creem_io/react';

function BuyButton({ productId }: { productId: string }) {
  const openCheckout = useCreemCheckout();

  async function buy() {
    // Create the session on YOUR server (keeps the secret key off the client),
    // then open the returned URL — no need to pre-create sessions on load.
    const res = await fetch('/api/checkout', {
      method: 'POST',
      body: JSON.stringify({ productId }),
    });
    const { checkoutUrl } = await res.json();
    openCheckout({ checkoutUrl, onComplete: (detail) => console.log('paid', detail) });
  }

  return <button onClick={buy}>Subscribe</button>;
}

<div id="creem-checkout" style="height: 820px"></div>
<script>
  Creem.mount({
    checkoutUrl: 'CHECKOUT_URL',
    container: '#creem-checkout',
    onComplete: (detail) => unlockContent(detail.orderId),
  });
</script>

<a data-creem-checkout data-creem-url="CHECKOUT_URL">Buy now</a>

<a
  data-creem-checkout
  data-creem-url="CHECKOUT_URL"
  data-creem-theme="dark"
  data-creem-locale="fr"
>Buy now</a>

<iframe
  src="CHECKOUT_URL"
  allow="payment *; publickey-credentials-get *"
  style="border:0;width:460px;height:820px">
</iframe>

Creem.openCheckout({
  checkoutUrl: 'CHECKOUT_URL',
  theme: 'dark',   // 'light' | 'dark'
  locale: 'pt-BR', // BCP47 tag — forces the checkout language
});

// Root layout / top-level component — runs on every page
'use client';
import { useEffect } from 'react';
import { captureAffiliateRef } from '@creem_io/react'; // also in /vue, /svelte, /embed

export function AffiliateRefCapture() {
  useEffect(() => { captureAffiliateRef(); }, []);
  return null;
}

// On your affiliate landing page — capture into your own store
const ref = new URLSearchParams(location.search).get('creem_ref');
if (ref) sessionStorage.setItem('creem_ref', ref);

// When you open checkout — put it back on the checkout URL yourself
const stored = sessionStorage.getItem('creem_ref');
const url = new URL(checkoutUrl);
if (stored) url.searchParams.set('creem_ref', stored);
openCheckout({ checkoutUrl: url.toString() });

window.addEventListener('message', (event) => {
  // Only trust events from the checkout's own origin.
  if (event.origin !== 'https://www.creem.io') return;
  const data = event.data;
  if (data?.source !== 'creem-embed') return;
  if (data.type === 'ready') {
    console.log('checkout ready');
  } else if (data.type === 'completed') {
    // { checkoutId, orderId, orderNo, redirect, redirectUrl }
    console.log('completed', data);
  }
});