With the Pay component

The Pay component makes it easy for the User to initiate a payment on pre-configured acceptable payment types.

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 a one-time payins involves three steps:

Embed the Loop Pay component into your website
Initialize the Pay component with the details of the payment
Listen to events to confirm payment

Processing payins for subscriptions 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 that are conducted without the use of the widget. You can find those directions here.

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 a one-time payment you only need to pass in the paymentUsdAmount.

Listen to events

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