Skip to main content
The package can be added to your project via npm or yarn, then imported into your project.

​
npm

npm install @loop-crypto/connect-checkout

​
yarn

yarn add @loop-crypto/connect-checkout
📃 The latest version of the code and documentation for @loop-crypto/connect-checkout is published to the NPM registry.

​
Peer dependencies

The following packages must also be installed in your project manually if your application does not already use React:
  • "react": ">=18"
  • "react-dom": ">=18"

​
npm

npm install react react-dom

​
yarn

yarn add react react-dom

​
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.
PropertyCallback typesDescription
onInitializedInitializedEventThe provided checkoutSessionId was used to successfully obtain the necessary data to ready the component
onInitFailedInitFailedEventThe application failed to initialize
onWalletChangeWalletChangeEventThe user has changed their connected wallet
onNetworkChangeNetworkChangeEventThe user has changed their connected wallet’s network
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;
}

​
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.
⌘I