Checkout Sessions component

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

Usage

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

<LoopConnectCheckoutSession
    // Optional properties go here
/>

Component properties

The following optional properties ("props") can be added to the LoopConnectCheckoutSession component for more fine grain control.

Event callbacks

💡

Both onWalletChange and onNetworkChange (defined above as initLoopConnectCheckout properties) can be provided in the same format to the LoopConnectCheckoutSession component for your convenience. Just note that each individual component will trigger their own provided callback for the same event occurrence, as these events are tied to the user's wallet which is a single connection shared application wide.

onCheckoutSessionStateChange

The onCheckoutSessionStateChange event handler will receive an object which contains the state property set to one of the following string values indicating the component's current state of payment.

<LoopConnectCheckoutSession
    // other props
    onCheckoutSessionStateChange={
        ({ state, message, data }) => console.log(`${state}: ${message}`, data);
    }
/>

onCheckoutSessionFailed

The onCheckoutSessionFailed event handler will receive an object which contains the type property set to one of the following string values indicating the reason the payment was not sent for processing successfully.

<LoopConnectCheckoutSession
    // other props
    onCheckoutSessionFailed={
        ({ type, message, data }) => console.log(`${type}: ${message}`, data);
    }
/>

Custom styling

The component's UI can be customized by providing a string of CSS custom properties and values. The values assigned to the property must be valid CSS for that type of property, which corresponds to a CSS declaration. In the table below, each custom property is linked to the corresponding CSS property it represents to ensure clarity.

<LoopConnectCheckoutSession
    // other props
    customStyles={`
        --loop-connect-font: italic 700 1rem 'Poppins', sans-serif;
        --loop-connect-widget-shadow: 0 0 0.5rem rgba(99,99,99,0.3);
    `}
/>

💡

Note that the customStyles property can also be provided to the initLoopConnectCheckout as a property and will apply the styles to all Loop Connect components application-wide. Properties then applied to individual components will override those app-wide values, creating a cascade effect.

Quickstart Example

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

// 1. Import the package
import { initLoopConnectCheckout, LoopConnectCheckoutSession } from "@loop-crypto/connect-checkout";

// 2. Initialize is outside of the application
initLoopConnectCheckout({
    checkoutSessionId: "your-checkout-session-id",
});

// 3. Add the CheckoutSession component to the React application
createRoot(document.getElementById("root")).render(
    <StrictMode>
        <LoopConnectCheckoutSession />
    </StrictMode>
);