Loop Crypto: Checkout Widget

Installation

The package is available on npm, yarn and npmscripts.

Install and import the package

Loop Cyrpto's checkout modal can be added to your project via npm or yarn, then imported into your project.

npm

npm install @loop-crypto/loop-checkout-widget

yarn

yarn add @loop-crypto/loop-checkout-widget

Importing the initialization function

Once added to your project by either method, import the package into your code:

import initializeLoopCheckoutWidget from "@loop-crypto/loop-checkout-widget";

Quickstart examples

JavaScript

<!-- An element to trigger the checkout -->
<button id="checkout-button">Open checkout</button>

<!-- Script to initialize the widget -->
<script type="text/javascript">
    // NOTE: Replace "[entityId]" with your assigned id
    const { openWidget } = initializeLoopCheckoutWidget({
        entityId: "[entityId]",
    });

    // Call the openWidget() function, in this example, on click of a button
    const button = document.getElementById("checkout-button");
    button.addEventListener("click", (event) => {
        // NOTE: Replace "[itemId]" with your item's assigned id
        openWidget("[itemId]");
    });
</script>

React

const { openWidget } = initializeLoopCheckoutWidget({
    entityId: "[entityId]",
});

export const YourComponent = () => {
    return (
        <button onClick={(event) => openWidget("[itemId]")}>
            Open checkout
        </button>
    );
};

Usage

Initialization options

const {
    // Open the widget
    openWidget,

    // Close the widget
    closeWidget,

    // Detach the widget from the DOM
    destroyWidget,
} = initializeLoopCheckoutWidget({
    // ######### REQUIRED PROPERTIES

    entityId: "[entityId]",

    // ######### OPTIONAL PROPERTIES

    // Override widget container style
    containerStyle: { zIndex: 999999 },

    // Show the cart in the checkout widget
    cartEnabled: true,

    // Success callback, called when the customer successfully checked out
    onSuccess: () => console.log("Success"),

    // Close callback, called when the checkout widget is closed
    onClose: () => console.log("Closed"),

    // Coupon code
    coupon: "DISCOUNT20PERCENT",

    // Discount percent
    discount: 20,

    // Trial days
    trial: 15,

    // User's email address
    email: "[email protected]",

    // Id for your external subscription
    externalSubscriptionId: "myExternalSubscription",

    // A string message that will be returned back to you as part of the subscribed and canceled webhooks
    refId: "user-42",

    // The suggested allowance that will be sent to the wallet, denominated in cents
    defaultSpendingCap: "30000",

    // The minimum require balance in the selected token in order to complete the checkout process, denominated in cents
    minimumBalanceRequired: "15000",
});

Override container styles

By default the plugin container has a z-index of 999999. If you experience issues with overlay styling or a conflicting z-index, you can pass a containerStyle argument to the initializeLoopCheckoutWidget method with valid CSS properties. Each property becomes a CSS declaration applied to the container element's style attribute:

initializeLoopCheckoutWidget({
    entityId: "[entityId]",
    containerStyle: {
        zIndex: 5000,
    },
});

Return a custom reference through event webhooks

As part of the webhook notifications generated when a subscription is confirmed or canceled, a custom string value (up to 255 characters) can be returned back to you for your own internal reference.

If a reference value is set by both methods in the same session, only the string send through the call to openWidget will be returned back to you via the webhooks.

Set at initialization

Add the optional string refId property to the object passed to initializeLoopCheckoutWidget. This is ideal for passing back information specific to the current session (for example, a user id, or a session id).

initializeLoopCheckoutWidget({
    entityId: "[entityId]",
    refId: "user-42",
});

Set by item

Add an optional string refId property to an object passed as the second argument when calling openWidget. This is ideal for passing back dynamically updated information (for example, a timestamp) or information specific to an item (for example, an item name, or a referral id).

openWidget("[itemId]", { refId: "MonthlySubscription" });

Support

If you experience any issues, email us or contact us on Telegram.