Checkout widget

Loop provides a checkout widget that can be integrated in the context of your company's website or application to enable your customers to pay with crypto. The modal allows end users to give Loop authorization to enable autopay.

If you would like to explore the checkout experience before integrating the modal, a sample version of the modal is available as a Sandbox here.

The video below shows how the checkout widget is used by one of our clients Quests who embedded it in their checkout process.

Setting up your integration

1. First, you should open a Loop account by contacting us. Once an account is opened, you can view your entityId in the Company Dashboard

2. Create an Item (for example, a subscription)

3. Get the itemId using the v1/items endpoint

4. Install the widget with npm or Yarn, using NPM package readme instructions

5. Launch the widget, using the entityId and itemId values for your Item

How does the widget work?

Applications can embed the autopay button as a React component. Then, applications pass the entityId and itemId in as a property to the react component. This allows us to know which entity and item to provide autopay for.

Connecting wallet, payment method + authorization

Users will need to connect their wallet to the modal. If users are already connected to the application, this log-in can be automatically used within the modal.

Users will then be able to select a payment token and give Loop authorization. In the case of subscriptions, the authorization is typically 13 pay periods (1st payment + 1 year for monthly subscriptions). Companies can choose the amount to suggest, but end customers always maintain control over the final allowance amount that gets set.

Setting the customer email

Companies can optionally set the customer email address when the modal is initialized. The parameter used on initialization to set the email address is documented in the NPM package readme.

Note, you should pass in the encoded form of the email into the URL for it to properly handle special characters. For example, I should not pass "[e-mail]" in the URL; instead, I should pass "[e-mail]" in the URL for the email to display correctly on the checkout page as "[e-mail]".

Displaying the cart

Companies can optionally display the cart, which displays the Item details in checkout when a customer is using the modal to checkout. The cart defaults to being hidden. The parameter used on initialization to show the cart is documented in the NPM package readme.

Setting external subscription IDs

Companies can optionally pass external subscription IDs if they have Stripe or Chargebee integrations deployed, which are then used to update the corresponding subscription in the external system. The parameter used on initialization to set the external subscription ID is documented in the NPM package readme.

Setting external coupon codes

Companies can optionally pass coupon codes if they have Stripe or Chargebee integrations deployed. These coupon codes are then passed to the external system when checkout is completed. The parameter used on initialization to set the coupon code is documented in the NPM package readme.

Setting a custom default spending cap

Companies can override the default spending cap (the allowance amount) that is suggested by Loop during checkout. By default, Loop will suggest 13x the amount of the subscription for monthly subscriptions and 1x the amount of the one-time payment for one-time payments. However, companies may want to override this default suggested amount if the amount of the subscription will vary based on factors such as metered usage, subscription quantities, or the use of coupons or discount codes.

The parameter used on initialization to set a custom default spending cap is documented in the NPM package readme. When the custom spending cap parameter is set, the checkout will display the amount specified. An example is shown below: