Checkout web component

You can use LoopCheckout as a native web component for maximum compatibility.

Usage

<loop-crypto-checkout
    payment-usd-amount="1000"
    await-confirmation="true"
    state-notification="embedded"
    onready="handleReady(event)"
></loop-crypto-checkout>

Attributes

Attribute name	Description
`payment-usd-amount` (required)	Payment amount in USD cents
`minimum-authorization-usd-amount`	Minimum authorization in USD cents
`suggested-authorization-usd-amount`	Suggested authorization (deprecated)
`await-confirmation`	Await on-chain confirmation
`state-notification`	`"event-only"` or `"embedded"`
`failure-notification`	`"event-only"` or `"embedded"`
`complete-notification`	`"event-only"` or `"embedded"`
`confirming-notification`	`"event-only"` or `"embedded"`
`add-to-existing-authorization`	Always prompt for increasing authorization
`disabled`	Disable UI
`custom-styles`	Custom CSS for this widget instance
`subscription-ref-id`	Subscription reference ID
`customer-ref-id`	Customer reference ID
`invoice-ref-id`	Invoice reference ID

Event handler attributes

Attribute	Event type
`onready`	`"ready"`
`onreadyfailed`	`"readyfailed"`
`onstatechange`	`"statechange"`
`onfailure`	`"failure"`
`onwalletchange`	`"walletchange"`
`onnetworkchange`	`"networkchange"`
`ontokenchange`	`"tokenchange"`
`onauthorizationupdated`	`"authorizationupdated"`
`onauthorizationconfirmed`	`"authorizationconfirmed"`
`oncreated`	`"created"`
`onconfirmed`	`"confirmed"`

Quickstart Examples

HTML/JS

<loop-crypto-checkout
    payment-usd-amount="1000"
    onready="event => console.log('Ready', event)"
></loop-crypto-checkout>

Vue

<script setup>
import { onMounted, ref } from 'vue';
onMounted(() => {
  document.getElementById('checkout').addEventListener('ready', (event) => {
    console.log('Ready', event);
  });
});
</script>
<template>
  <loop-crypto-checkout id="checkout" payment-usd-amount="1000" />
</template>

Svelte

<script>
  import { onMount } from 'svelte';
  let checkout;
  onMount(() => {
    checkout.addEventListener('ready', (event) => {
      console.log('Ready', event);
    });
  });
</script>
<loop-crypto-checkout bind:this={checkout} payment-usd-amount="1000" />

See the Events section for detailed event types.