This guide will walk you through the basic steps of implementing a user interface integrated with the Headless Checkout. The first step in the process will be to create an Order via API call.

You can create an order on load and add the recipient later, or wait to create the order when you have the recipient info ready. Creating the order immediately helps obtain the price quote for display. Let’s proceed with that approach in mind.

​

Building Your App

There are four key components you’ll need to represent in the UI for your users.

1. Purchase Preview - a visual explanation of what they are buying and the price
2. Wallet Connection - cross-chain payments will require the ability to connect a wallet
3. Payment Status - keeping the user updated about the payment acceptance
4. Delivery Status - progress of delivery and information upon completion/failure

​

Purchase Preview

It is common to create an order upon initial render for your user, and then update the details of that order as the adjustments are made by the user. You’ll need to create a function in your application that can call the create-order API and save the response.

useEffect(() => {
    if (order != null) {
        return;
    }

    createOrder({
        payment: {
            method: "ethereum-sepolia",
            currency: "eth",
        },
        locale: "en-US",
        lineItems: {
            collectionLocator: "crossmint:YOUR_CROSSMINT_COLLECTION_ID",
            callData: {
                totalPrice: "0.001",
            },
        },
    });
}, [order]);

​

Wallet Connection

To enable the cross-chain payments feature, you’ll need to provide an easy way for users to connect their wallet. This guide will not go into detail about how to add any specific tools, since there are a variety available and the implementation of each is unique to the tool.

However, you will want to set up your app to listen for changes to the primary connected wallet and selected network so that the order is updated automatically.

useEffect(() => {
    if (order == null || primaryWallet == null) {
        return;
    }

    const currentRecipient = order.lineItems[0].delivery.recipient?.walletAddress;
    const isSameWallet = currentRecipient === primaryWallet.address;
    const isSameNetwork = order.payment.method === selectedNetwork;
    if (isSameWallet && isSameNetwork) {
        return;
    }

    updateOrder({
        recipient: {
            walletAddress: primaryWallet.address,
        },
        payment: {
            method: selectedNetwork,
            currency: "eth",
            payerAddress: primaryWallet.address,
        },
    });
}, [primaryWallet, selectedNetwork]);