In addition to React components, Loop Connect 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 LoopConnectPaymentMethods component page.

Manage payment methods

Loop Connect's payment-methods web component renders a customizable UI for users to manage their saved payment methods, including viewing, editing authorization amounts, adding new methods, and setting default payment methods.

<loop-connect-payment-methods 
    customer-ref-id="test-user-id">
</loop-connect-payment-methods>

Attributes

The following table maps the custom attributes available for the loop-connect-payment-methods web component to the corresponding properties of the standard React component.

Attribute name	Equivalent React property
`customer-id`	`customerId`
`customer-ref-id`	`customerRefId`
`minimum-authorization-usd-amount`	`minimumAuthorizationUsdAmount`
`disabled`	`disabled`
`custom-styles`	`customStyles`

Details on each attribute can be found in sections for customer identification, and styling.

Payment Methods events

The loop-connect-payment-methods 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. The specification for each event type can be found documented along with the React version of this component.

Custom event	Handler attribute / property	Callback object type
`ready`	`onready`	`PaymentMethodsReadyEvent`
`readyfailed`	`onreadyfailed`	`PaymentMethodsReadyFailedEvent`
`statechange`	`onstatechange`	`PaymentMethodsStateChangeEvent`
`tokenchange`	`ontokenchange`	`PaymentMethodsTokenChangeEvent`
`authorizationupdated`	`onauthorizationupdated`	`PaymentMethodsAuthorizationUpdatedEvent`
`customercreated`	`oncustomercreated`	`PaymentMethodsCustomerCreatedEvent`
`created`	`oncreated`	`PaymentMethodsCreatedEvent`
`updated`	`onupdated`	`PaymentMethodsUpdatedEvent`
`deleted`	`ondeleted`	`PaymentMethodsDeletedEvent`
`failure`	`onfailure`	`PaymentMethodsFailedEvent`

Additional details on each event and its return type can be found in the Payment Methods 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-payment-methods 
    id="paymentMethods"
    customer-ref-id="test-user-id">
</loop-connect-payment-methods>

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

    // Define the event handler function
    const handlePaymentMethodsReady = (event) => console.log('The payment methods component is ready.', event);

    // Add an event listener and attach the handler function
    paymentMethods.addEventListener('ready', handlePaymentMethodsReady);
</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-payment-methods 
    id="paymentMethods"
    customer-ref-id="test-user-id">
</loop-connect-payment-methods>

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

    // Define the event handler function
    const handlePaymentMethodsReady = (event) => console.log('The payment methods component is ready.', event);

    // Assign the event listener to the `onready` property
    paymentMethods.onready = handlePaymentMethodsReady;
</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 handlePaymentMethodsReady = (event) => console.log('The payment methods component is ready.', event);
</script>

<loop-connect-payment-methods 
    customer-ref-id="test-user-id"
    onready="handlePaymentMethodsReady(event)">
</loop-connect-payment-methods>

Quickstart examples

Below are a few examples in common JS frameworks that implement the "PaymentMethods" 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</title>
        <script type="module">
            import { initLoopConnect } from '@loop-crypto/connect';

            initLoopConnect({
                jwtToken: "your-jwt-token-here",
                entityId: "your-entity-id-here",
                merchantId: "your-merchant-id-here",
            });
        </script>
    </head>
    <body>
        <loop-connect-payment-methods
            id="paymentMethods"
            customer-ref-id="test-user-id"
        ></loop-connect-payment-methods>
        <script>
            const paymentMethods = document.getElementById("paymentMethods");
            paymentMethods.addEventListener('statechange', (event) => { 
                console.log(`State changed: ${event.detail.message}`);
            })
        </script>
    </body>
</html>

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

    initLoopConnect({
        jwtToken: "your-jwt-token-here",
        entityId: "your-entity-id-here",
        merchantId: "your-merchant-id-here",
    });

    const paymentMethods = ref(null);

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

<template>
    <loop-connect-payment-methods
        ref="paymentMethods"
        customer-ref-id="test-user-id"
    ></loop-connect-payment-methods>
</template>

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

    initLoopConnect({
        jwtToken: "your-jwt-token-here",
        entityId: "your-entity-id-here",
        merchantId: "your-merchant-id-here",
    });

    let paymentMethods;

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

<loop-connect-payment-methods
    bind:this={paymentMethods}
    customer-ref-id="test-user-id"
></loop-connect-payment-methods>