Checkout page
Loop provides checkout links to custom payment pages allowing customers to subscribe to products, make one-time purchases or pay an invoice.
Below we go into the expected functionality for the cart. To see the cart in action, you can use a live payment link on the Goerli testnet here.
Payment links for subscriptions and one-time payments differ slightly from invoices. In both cases, each payment link displays 3 steps (payment, contact, and review) and a cart. Loop's checkout works with both EOA and multisig wallets. For applications that prefer a pop-up checkout window, Loop provides a widget as well.
How do payment links technically work?
Loop's standard checkout combines an entity's entity_id with the unique item_id of one or more items (subscription, one-time payment, invoice, etc). In the case of child entities, each entity will have their own entity_id and thus checkout page.
Loop's standard format is:
You can create this URL using the logic described above. You can also find an item's full URL on the company dashboard or by retrieving it via API with the POST items and GET Items calls.
Loop has several additional parameters that can be passed into the URL to customize the checkout experience. You can read about these here.
Payment links for subscriptions and one-time payments
Steps
1. Payment
Customers can select the network and token they want to pay with from a pre-configured list of acceptable tokens. Because the customer is authorizing a specific token and network, they are prevented from ever mistakenly sending the wrong token or using the wrong network.
Loop works with any ERC-20 token. If there is a token that is not in your contract that you'd like to accept, reach out to us. It's important to note that ETH and MATIC are not ERC-20 tokens. However, Loop provides an easy way for companies to accept them by including a wrapping feature natively in the checkout process. When a customer selects WETH or WMATIC on the native chain, this functionality is displayed.
When the customer connects their wallet, they will be asked to sign an off-chain transaction to prove they own the wallet. After signing, they will be able to see their wallet's balance. The checkout page will not let a customer move on to the next step if they do not have enough balance to cover at least the first payment. This is true even in the case of a free trial. This minimum balance amount is either calculated by Loop or can be passed in as a parameter. See additional functionality for more information.
Additionally, if the customer has already purchased a subscription, they will see a notification and not be allowed to proceed. This is true even in the case of multi-item purchases if one of the items is a subscription that has already been purchased. This notification does not show up for one-time payments.
Lastly, if the customer is using a multi-sig, they will be able to connect one of the signer wallets and choose which associated multi-sig they would like to use. We have a helpful guide for end customers here.
2. Contact
Customers provide their email so that Loop can send a receipt and notify them of upcoming payments, which increases the rate of successful payments. If you are using an integration (Stripe, Chargebee), this email is used as a record locator to associate the checkout with an existing customer. While it is not advised, you can turn off requiring an email by contacting Loop. You may also pre-fill an email address by passing in the parameter.
3. Review
Customers sign one on-chain transaction, the ERC-20 allowance function. This function essentially "allows" Loop to transfer funds on the user's behalf.
The checkout page defaults to an authorization amount (i.e. allowance) of 1 year for monthly subscriptions. Companies can change this default amount by passing in a new suggested authorization amount, and the customer is able to edit this amount in their wallet before the transaction is sent by editing the allowance amount to be authorized.
Customers can also modify the amount at any time post authorization on Loop's customer portal or by calling the function on the token contract directly (sites like revoke.cash make this process simple). Thus, the payer is always in control of how much a company can bill.
Please note, a customer must authorize at least enough to cover the first payment plus a small buffer for slippage (0.5%) or else the checkout page will not let them move on. This amount is either calculated by Loop or can be passed in as a parameter. See additional functionality for more information.
If the customer selects a sufficient allowance in the checkout interface but then edits the amount in their wallet to an insufficient amount, they will be prevented from proceeding. They will receive a message saying "Your allowance is not enough to cover the first payment" and will be sent back to the last step to authorize a sufficient amount.
If the customer has enough allowance to cover the first payment, we let them proceed without having to sign another transaction.
Please note as well that the allowance is additive. This means that if a customer already has an allowance with a given company and then goes through the checkout again, the default allowance amount would be added to their existing allowance. For example, if the customer has an existing allowance of $100 and then selects the default allowance when going through checkout for a $10 item ($10 * 12 months = $120), then their allowance will ultimately be $220.
Cart
The cart pulls and displays the item's details (amounts, accepted ERC-20 tokens, frequency, descriptions) from our backend as pre-configured by the company.
When using our Stripe integration, the cart is able to display multiple items, free trials, and coupon codes but does not yet display quantities. We are actively working on this. Given this, you may want to hide the cart if you are using quantities. Please note, Loop will charge for the correct amount (i.e. including the quantity) as the invoice generated by Stripe will include these features. Please follow the respective guides in the Stripe and Chargebee sections to ensure you are set up correctly.
For our invoicing integrations with Xero and QuickBooks, discounts and quantities are supported but not shown as line items in the cart. Add the discount to the invoice when creating it in Xero or QuickBooks. Loop will then pull in the final amount to bill (inclusive of the discount or quantities). The discounted amount will be shown in the cart and ultimately billed for.
Payment links for invoices
Steps
1. Type in the invoice number and amount (optional)
Loop offers an invoicing landing page where you can use a static payment link that you include in all invoices and your customer can type in their invoice number and amount due (inclusive of any taxes, discounts, quantities, etc) to pay their bill.
Conversely, you can pre-populate the payment link so that it takes the customer directly to their unique checkout page. However, the invoice number isn't created until after the invoice is finalized. Thus, this method works best if you are manually sending the invoice to the customer.
2. Payment
Same as for a subscription and one-time payment.
3. Contact
Same as for a subscription and one-time payment.
3. Review
The functionality is the same as for a subscription and one-time payment with the added functionality of the ability to schedule the payment date. This is because invoices often have due date and net-payment terms. To increase on-time payments, Loop makes it simple for customers to schedule a payment upfront.
Customers simply select the date they would like to pay and Loop will schedule the payment for that date. Companies can see what date is scheduled on their company dashboard, having the comfort of knowing the payment will take place without having to bug their end customer.
FAQs:
Payments are scheduled for 12am on the date chosen, in the customer's local timezone.
Customers can schedule a payment as far into the future as they would like
Customers are prevented from selecting a payment date in the past
Customers are not able to edit a payment once it is scheduled
Cart
The cart pulls and displays the invoice's total amount (i.e. the amount input on the first step) as well as the due date displayed in the paying customer's local time and the invoice number.
Last updated
