npm package: @loop-crypto/loop-checkout-widget
Description: Loop Checkout Widget
Author: Léo Galley
Latest version: 0.8.0

# 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

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

#### yarn

```sh
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:

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

## Quickstart examples

### JavaScript

```html
<!-- 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

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

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

## Usage

### Initialization options

```ts
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: "customer@email.com",

    // 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:

```js
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).

```js
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).

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

## Support

If you experience any issues, [email us](support@loopcrypto.xyz) or contact us on [Telegram](https://t.me/LoopCrypto_Official).

```

```