Skip to main content
The order lifecycle can be summarized as follows:
1

Order Creation or Update

Your application determines recipient info for the buyer. It can be an email wallet or wallet address. Create or update an order with this info to proceed to next step.
2

API Response

The API response returned from create/update order call(s) will include a clientSecret and order object that your application uses to render the Crossmint Embedded Component.
3

Render Crossmint Embedded Component

Use the clientSecret and order.orderId returned in the API response to render the Crossmint Embedded Component for credit card checkout.
4

User Completes Payment

The buyer completes checkout via credit card.
5

Poll for Status

Your application will poll the GET order status and update the UI as the order progresses to the next phase.
During the initial quote phase of the order the payment status will be requires-quote.
Once the quote phase is completed, the order enters the payment phase and will have the status awaiting-payment, which indicates that the order is ready to be paid. For the complete, authoritative list of payment statuses and their meanings, see the Status Codes page. |

​
Render the Crossmint Embedded Component

When the order is ready to accept payment, the API response will include a clientSecret and order object. You can use these with the Crossmint Embedded Component to collect the user’s credit card payment. 
{
  "clientSecret": "_YOUR_CLIENT_SECRET_",
  "order": {
    "orderId": "5ddc0090-7f63-4f6a-b68d-a91f8253b02e",
    "phase": "payment",
    "locale": "en-US",
    "lineItems": [], // removed for brevity
    "quote": {
      "status": "valid",
      "quotedAt": "_timestamp_",
      "expiresAt": "_timestamp_",
      "totalPrice": {
        "amount": "0.5",
        "currency": "usd"
      }
    },
    "payment": {
      "status": "awaiting-payment",
      "method": "basis-theory",
      "currency": "usd",
      "preparation": {},
      "receiptEmail": "test@example.com"
    }
  }
}
After creating an order, you’ll need to render the Crossmint Embedded Component to collect payment information. This secure, embeddable UI component lets you accept payment methods, validates input, and handles errors: 
import { CrossmintEmbeddedCheckout, CrossmintProvider } from "@crossmint/client-sdk-react-ui";

export function MyCheckoutPage({ clientSecret, order, recipientWalletAddress, receiptEmail }) {
  return (
    <div className="w-full">
      <CrossmintProvider apiKey="<YOUR_CLIENT_SIDE_KEY>">
        <CrossmintEmbeddedCheckout 
          recipient={{ walletAddress: recipientWalletAddress}}
          clientSecret={clientSecret}
          orderId={order.orderId}
          payment={{
            crypto: {
                enabled: false,
            },
            fiat: {
                enabled: true,
                allowedMethods: {
                    card: true,
                    applePay: false,
                    googlePay: false,
                },
            },
            defaultMethod: "fiat",
            receiptEmail: receiptEmail,
          }}
          appearance={{
              rules: {
                  DestinationInput: {
                      display: "hidden",
                  },
                  ReceiptEmailInput: {
                      display: "hidden",
                  },
              },
          }} />
      </CrossmintProvider>
    </div>
  );
}
The CrossmintEmbeddedCheckout component is highly customizable. You can adjust colors, styling, layout, and behavior to match your brand. Learn more in our UI customization guide.

​
Poll for Status Updates

After making the payment via whichever payment method, you'll need to poll the Get Order API to check on the delivery status and present this info to your user. Refer to the complete get order API reference here. GET https://staging.crossmint.com/api/2022-06-09/orders/<orderId>

​
Handling Refunded Payments

When polling for order status, you may encounter a situation where payment.status is completed but the order also contains a payment.refunded property. This indicates that the payment was initially successful but has since been refunded. 
{
    "order": {
        "payment": {
            "status": "completed",
            "refunded": {
                "amount": "1.00",
                "currency": "usd"
            }
        }
    }
}
The payment.refunded object includes the following fields:
  • amount: The amount that was refunded
  • currency: The currency of the refund
When you encounter this state, your application should:
  1. Display an appropriate message to the user indicating that their payment was refunded
  2. Prevent any further actions related to the order (such as delivery expectations)
  3. Provide options for the user to place a new order if desired
This state typically occurs when there was an issue with processing the order after payment was received, such as insufficient liquidity for memecoin purchases or compliance issues.