Initialization

Once the package is installed, initialize LoopCheckout by importing initLoopCryptoCheckout at the top of your application. This function should be called once, before rendering any checkout components.

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

initLoopCryptoCheckout({
    checkoutSessionId: "your-checkout-session-id",
    environment: "production", // or "demo"
    // Optional event handlers:
    onInitialized: (event) => { /* ... */ },
    onInitFailed: (event) => { /* ... */ },
    onWalletChange: (event) => { /* ... */ },
    onNetworkChange: (event) => { /* ... */ },
    customStyles: "...CSS..."
});

Configuration options

Property	Type	Description
`checkoutSessionId` (required)	`string`	Unique session ID for this checkout
`environment`	`"production"\|"demo"`	API environment (default: `production`)
`customStyles`	`string` (CSS)	Global custom styles for all widgets
`onInitialized`	`function`	Called when initialization succeeds
`onInitFailed`	`function`	Called if initialization fails
`onWalletChange`	`function`	Called when the user changes wallet
`onNetworkChange`	`function`	Called when the user changes network

Event callback types

interface InitializedEvent {
    merchantId: string;
}

interface InitFailedEvent {
    type: "initFailed";
    message: string;
    data: Record<string, any>;
}

interface WalletChangeEvent {
    address: string;
    ens: string | undefined;
}

interface NetworkChangeEvent {
    id: number;
    name: string;
    chain: "EVM" | "SOL";
}

💡
Initialization is asynchronous and returns a boolean indicating success or failure. You can also use the event callbacks for more granular control.