The Pay component makes it easy for the User to pay and subscribe with pre-configured acceptable payment types. The Pay component can process a payment and store payment methods (e.g. wallet, token, network) for subscriptions.

Our components are configurable, embeddable web components designed to simplify your integration to Loop while retaining your platform's look, feel and control of your Merchant and User's experience.

Processing payins for subscription involves the same three initial steps as taking a payment on the web to collect the initial payment and three additional steps to take for each subsequent payin.

Steps to take initial payment on the web

1. Embed the Pay component into your website
2. Initialize the Pay component with the details of the payment, passing in a subscriptionRefId
3. Listen to the Pay component response and save the customerId
4. (Optional) Listen to webhooks to find out when the payin processes

Steps to take subsequent payments

1. (optional) Check the status of the payment method, and if necessary, providing steps to rectify any issues. See here for directions.
2. Create a payin in the Loop API, using the customerId you saved
3. Listen to webhooks to find out when the payin processes

---

Steps to take initial payment on the web

Embed the Loop Pay component

The first step is to embed Loop's Pay component on a checkout page for the User to connect their wallet and select their payment method.

The config prop is central attribute that controls what the component will look like and what functionality is available. Passing in the merchantId is how the Pay component knows what payment types to display.

The context configuration attribute defines which functionality will be available within the component. Use the connectAndPayconfiguration.

Initialize the Pay component with the details of the payment

The paymentDetails prop defines the details of the payment itself. For subscriptions you must pass in the subscriptionRefId, which will be used in subsequent payins and to store the User's payment method.

Listen to events

The Pay component will emit an event when the payment confirms onchain. Confirmation times may very by blockchain.

---

Steps to take subsequent payments

(optional) Check the status of the payment method, and if necessary, providing steps to rectify any issues.

See here for directions.

Create a payin in the Loop API to send information about the payin

A payin needs to be created in order to charge the wallet. To do this, call the create payin endpoint and pass in the merchantId, usdAmount, billDate and subscriptionRefId. Payins can be created at any point prior to a payment. A payin that is create with a bill date that has passed will be processed immediately.

The payin will charge the default paymentMethod associated with the subscriptionRefId. You can optionally pass in another paymentMethodId to not charge the default.

The payin will respond with the current status of the Users paymentMethod.

Listen to webhooks to find out when the payin processes

Since subsequent payments are completed without the Pay component, you will need to listen to webhooks to be notified when a transaction completes onchain. When the payment confirms onchain, the payment.processed webhook will fire.

If there is a pending payin that is 10 minutes past due, the missed_payin.payment webhook will fire.