Initialization

Once the package has been added to your project, initialize the application by importing initLoopConnectCheckout at the top of your application stack. The function should be run once and will maintain the state of a connected wallet and configuration data across all pages and components within your application. For most React applications, this means calling the function in your entry file, just before ReactDOMClient.createRoot() is called.

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

initLoopConnectCheckout({
    // configuration properties will go here
});

Configuration properties

To initialize the application with the correct session data, add your checkout session id to the initialization function. The session id will begin with cs_, following by a string od alphanumeric characters. When creating your checkout session from the Loop Dashboard, you will receive a checkout url that has this form: https://checkout.loopcrypto.xyz/cs_0123abcdvqexza6bkzkqx4txyz, where cs_0123abcdvqexza6bkzkqx4txyz is the checkoutSessionId value in this example.

initLoopConnectCheckout({
    checkoutSessionId: "your-checkout-session-id",
});

Events

The initLoopConnectCheckout function accepts optional event callback handlers to inform your application of important system-wide events.

initLoopConnectCheckout({
    checkoutSessionId: "your-checkout-session-id",
    onInitialized: (e) => console.log("Success", e)
    // other events can be added here
});

💡

Note that the onWalletChange and onNetworkChange events can also be triggered as an event by the PayIncomponent by assigning it the same properties.

Callback prop types

The event callback functions receive data about the event through a single property, where each event receives an object with a different type. The following types correspond to the types specified in the "Events" table above.

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";
}

Advanced setup

Awaiting initLoopConnectCheckout

The initLoopConnectCheckout() function is asynchronous, returning a boolean when resolved. The returning boolean can be used to determine initialization success or failure without providing event callbacks.

const initializationSuccessful: boolean = await initLoopConnectCheckout({
   checkoutSessionId: "your-checkout-session-id"
});
console.log(`Initialization successful: ${initializationSuccessful}`);

// OR ----

initLoopConnectCheckout({
    checkoutSessionId: "your-checkout-session-id",
}).then((initializationSuccessful: boolean) => {
    console.log(`Initialization successful: ${initializationSuccessful}`);
});

When the initialization process has completed successfully, initLoopConnectCheckout() resolves and returns true at the same time the onInitialized callback is called if provided. If the initialization failed, false is returned and the onInitFailed callback is called if provided.