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 name	Equivalent React property
`state-notification`	`stateNotification`
`failure-notification`	`failureNotification`
`confirming-notification`	`confirmingNotification`
`complete-notification`	`completeNotification`
`notification-email-fallback`	`notificationEmailFallback`
`disabled`	`disabled`
`custom-styles`	`customStyles`

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 event	Handler attribute / property	Callback object type
`ready`	`onready`	`CheckoutSessionReadyEvent`
`readyfailed`	`onreadyfailed`	`CheckoutSessionReadyFailedEvent`
`tokenchange`	`ontokenchange`	`CheckoutSessionTokenChangeEvent`
`statechange`	`onstatechange`	`CheckoutSessionStateChangeEvent`
`authorizationconfirmed`	`onauthorizationconfirmed`	`CheckoutSessionAuthorizationConfirmedEvent`
`authorizationupdated`	`onauthorizationupdated`	`CheckoutSessionAuthorizationUpdatedEvent`
`created`	`oncreated`	`CheckoutSessionCreatedEvent`
`confirmed`	`onconfirmed`	`CheckoutSessionConfirmedEvent`
`failure`	`onfailure`	`CheckoutSessionFailedEvent`

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>

<script setup>
    import { ref, onMounted } from "vue";
    import { initLoopConnectCheckout } from '@loop-crypto/connect-checkout';

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

    const checkout = ref(null);

    onMounted(() => {
        checkout.value.addEventListener("statechange", (event) => {
            console.log(`State changed: ${event.detail.message}`);
        });
    });
</script>

<template>
    <loop-connect-checkout-session
        ref="checkout"
    ></loop-connect-checkout-session>
</template>

<script>
    import { onMount } from 'svelte';
    import { initLoopConnectCheckout } from '@loop-crypto/connect-checkout';

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

    let checkout;

    onMount(() => {
        checkout.addEventListener("statechange", (event) => {
            console.log(`State changed: ${event.detail.message}`);
        });
    });
</script>

<loop-connect-checkout-session
    bind:this={checkout}
></loop-connect-checkout-session>