Checkout Sessions component

The CheckoutSessions component renders a customizable UI for users to connect their wallet, select a token, and complete payment for a checkout session.

Usage

import { LoopCryptoCheckout } from "@loop-crypto/checkout";

<LoopCryptoCheckout
    // Required props
    // ...see below
    // Optional event handlers and UI options
/>

Props

Prop	Type	Description
`couponCodeId`	`string`	Coupon code for discounts
`notificationEmailFallback`	`string`	Fallback email for notifications
`addToExistingAuthorization`	`boolean`	Always prompt for increasing authorization
`stateNotification`	`string`	`"event-only"` or `"embedded"` (default: `"event-only"`)
`failureNotification`	`string`	`"event-only"` or `"embedded"` (default: `"event-only"`)
`completeNotification`	`string`	`"event-only"` or `"embedded"` (default: `"event-only"`)
`confirmingNotification`	`string`	`"event-only"` or `"embedded"` (default: `"event-only"`)
`awaitConfirmation`	`boolean`	Wait for on-chain confirmation (default: `true`)
`disabled`	`boolean`	Disable all UI interactions
`customStyles`	`string`	Custom CSS for this widget instance

Event Callbacks

Event prop	Callback type	Description
`onLoopCryptoCheckoutReady`	`(event) => void`	Component is ready
`onLoopCryptoCheckoutReadyFailed`	`(event) => void`	Initialization failed
`onLoopCryptoCheckoutStateChange`	`(event) => void`	State changes (see below)
`onLoopCryptoCheckoutFailed`	`(event) => void`	Payment failed
`onLoopCryptoCheckoutTokenChange`	`(event) => void`	Token selection changed
`onLoopCryptoCheckoutAuthorizationUpdated`	`(event) => void`	Authorization updated
`onLoopCryptoCheckoutAuthorizationConfirmed`	`(event) => void`	Authorization confirmed
`onLoopCryptoCheckoutCreated`	`(event) => void`	Payment created
`onLoopCryptoCheckoutConfirmed`	`(event) => void`	Payment confirmed on-chain

Notification Modes

event-only: Only fires event callbacks (default)
embedded: Shows status/failure/confirmation messages in the UI

Quickstart Example

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { initLoopCryptoCheckout, LoopCryptoCheckout } from "@loop-crypto/checkout";

initLoopCryptoCheckout({
    checkoutSessionId: "your-checkout-session-id",
    environment: "development"
});

createRoot(document.getElementById("root")).render(
    <StrictMode>
        <LoopCryptoCheckout
            // ...props
        />
    </StrictMode>
);

See the Events section for detailed callback types and state transitions.