Skip to main content
In addition to React components, Loop Connect Checkout offers native Web Components that provide identical functional, with broader environmental compatibility. For a more detailed explanation of usage, functionality, and types, refer to the LoopConnectCheckoutSession component page.

​
Usage

<loop-connect-checkout-session></loop-connect-checkout-session>

​
Attributes

The following table maps the custom attributes available for the loop-connect-checkout-session web component to the corresponding properties of the standard React component.
Attribute nameEquivalent React property
state-notificationstateNotification
failure-notificationfailureNotification
confirming-notificationconfirmingNotification
complete-notificationcompleteNotification
notification-email-fallbacknotificationEmailFallback
disableddisabled
custom-stylescustomStyles

​
Checkout session events

The loop-connect-checkout-session component also allows optional event callback handlers to be configured, just as the React component does. The callback functions take the form ({ detail: EventType }) => void, where detail is within the CustomEvent callback object. Here, EventType is used as a placeholder to represent the individually defined type for each event.
Custom eventHandler attribute / propertyCallback object type
readyonreadyCheckoutSessionReadyEvent
readyfailedonreadyfailedCheckoutSessionReadyFailedEvent
tokenchangeontokenchangeCheckoutSessionTokenChangeEvent
statechangeonstatechangeCheckoutSessionStateChangeEvent
authorizationconfirmedonauthorizationconfirmedCheckoutSessionAuthorizationConfirmedEvent
authorizationupdatedonauthorizationupdatedCheckoutSessionAuthorizationUpdatedEvent
createdoncreatedCheckoutSessionCreatedEvent
confirmedonconfirmedCheckoutSessionConfirmedEvent
failureonfailureCheckoutSessionFailedEvent
Additional details on each event and its return type can be found in the CheckoutSession events section.

​
Custom event listener

Listen to the component for custom events by selecting the element and calling its native addEventListener method to attach a listener that executes and receives a data object when the event has been triggered. 
<loop-connect-checkout-session 
    id="checkout">
</loop-connect-checkout-session>

<script>
    // Select the component by its "id" attribute
    const checkout = document.getElementById('checkout');

    // Define the event handler function
    const handleCheckoutReady = (event) => console.log('The checkout session component is ready.', event);

    // Add an event listener and attach the handler function
    checkout.addEventListener('ready', handleCheckoutReady);
</script>

​
Event handler property

As in standard in Javascript, event handlers can be assigned directly to the selected element’s event handler properties. 
<loop-connect-checkout-session 
    id="checkout">
</loop-connect-checkout-session>

<script>
    // Select the component by its "id" attribute
    const checkout = document.getElementById('checkout');

    // Define the event handler function
    const handleCheckoutReady = (event) => console.log('The checkout session component is ready.', event);

    // Assign the event listener to the `onready` property
    checkout.onready = handleCheckoutReady;
</script>

​
Event handler attribute

Likewise, an event handler function can be assigned to the component in HTML using an event handler attribute without the need to select the component. 
<script>
    // Define the event handler function, which will be assigned to the 'onready' attribute in html
    const handleCheckoutReady = (event) => console.log('The checkout session component is ready.', event);
</script>

<loop-connect-checkout-session 
    onready="handleCheckoutReady(event)">
</loop-connect-checkout-session>

​
Quickstart examples

Below are a few examples in common JS frameworks that implement the “CheckoutSession” component, adding a listener for the statechange event. 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Loop Connect Checkout</title>
        <script type="module">
            import { initLoopConnectCheckout } from '@loop-crypto/connect-checkout';

            initLoopConnectCheckout({
                checkoutSessionId: "your-checkout-session-id"
            });
        </script>
    </head>
    <body>
        <loop-connect-checkout-session
            id="checkout"
        ></loop-connect-checkout-session>
        <script>
            const checkout = document.getElementById("checkout");
            checkout.addEventListener('statechange', (event) => { 
                console.log(`State changed: ${event.detail.message}`);
            })
        </script>
    </body>
</html>
⌘I