NFT Checkout Quick Start

1. Create the session on your server

const response = await fetch(
  'https://api.belong.net/api/v3/checkout/sessions',
  {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
      'x-api-key': process.env.BELONG_API_KEY!,
    },
    body: JSON.stringify({
      collectionId: process.env.BELONG_COLLECTION_ID,
      externalOrderId: order.id,
      items: [
        {
          name: order.productName,
          description: 'Digital proof of purchase',
          mintPrice: order.cryptoPrice,
          image: order.nftImage,
          externalProductRef: order.variantId,
          quantity: 1,
        },
      ],
      paymentMethods: ['crypto_wallet'],
      allowedOrigin: 'https://shop.example',
      webhookUrl: 'https://shop.example/api/belong/webhook',
    }),
  }
)

if (!response.ok) throw new Error('Could not create Belong checkout')
const checkout = await response.json()

2. Mount the hosted checkout on the storefront

<div id="belong-checkout" style="height: 720px"></div>

import {
  BELONG_CHECKOUT_ORIGIN,
  createPaymentFrame,
  isPaymentEvent,
  PaymentEvent,
  PaymentTarget,
} from '@belongnet/sdk'

const { frame } = createPaymentFrame({
  el: document.getElementById('belong-checkout')!,
  params: {
    target: PaymentTarget.Checkout,
    checkoutId: checkout.checkoutId,
    clientSecret: checkout.clientSecret,
  },
})

function onMessage(event: MessageEvent) {
  if (event.source !== frame.contentWindow) return
  if (!isPaymentEvent(event, BELONG_CHECKOUT_ORIGIN)) return

  if (event.data.type === PaymentEvent.PaymentSuccess) {
    showPaymentPendingServerConfirmation()
  }
  if (event.data.type === PaymentEvent.PaymentError) {
    showPaymentError(event.data.payload.error)
  }
}

window.addEventListener('message', onMessage)

The SDK supplies the current storefront origin to the hosted frame automatically. Belong sends messages only to the origin stored in the server-created checkout.

Browser success is a UI hint, not order proof. Mark the order paid only after verifying the signed webhook described in Event handling.