Initialization

Once the package has been added to your project, initialize the application by importing initLoopConnect 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 { initLoopConnect } from "@loop-crypto/connect";

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

Authentication

To use the Pay component, you will need an apiKey, which you can manage through Loop's API (create API key). We will also provide you with an entityId, which uniquely identifies your company and retrieves your application settings.

The initialization function also accepts a merchantId, which identifies sub accounts or projects to help separate reporting and settings. If you are not setup with a merchant account, the merchantId will simply duplicate your entityId.

initLoopConnect({
    apiKey: "your_api_key_here",
    entityId: "your_entity_id_here",
    merchantId: "your_merchant_id_here",
});

🎉

You are now authenticated and ready to collect payment! You may skip directly to adding the "PayIn" component now, or continuing configuring Loop Connect for a more custom experience.

Events

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

💡

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 {
    entityId: 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";
}

Awaiting initLoopConnect

The initLoopConnect() 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 initLoopConnect({
    apiKey: "your_api_key_here",
    entityId: "your_entity_id_here",
    merchantId: "your_merchant_id_here",
});

// OR ----

initLoopConnect({
    apiKey: "your_api_key_here",
    entityId: "your_entity_id_here",
    merchantId: "your_merchant_id_here",
}).then((initializationSuccessful: boolean) => {
    console.log(`Initialization successful: ${initializationSuccessful}`);
});

When the initialization process has completed successfully, initLoopConnect() 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.