Directing the End-User to Pay

Redirect the end-user to the Hosted Payments Page to complete the payment

Following the successful creation of a payment in the previous step, where you received payment details from the API, this step focuses on utilizing the redirectUrl.

After creating the payment, your next action is to direct your end-user to the Hosted Payments Page for them to complete their payment. This redirection can be achieved either by directly redirecting the user or by embedding the URL within an iframe on your site.

Once redirected, your role is simply to wait.

The Hosted Payments Page, encountered by your end-user, is segmented into four distinct sections:

1. Digital assets selection,
2. Blockchain address and QR code,
3. Pending payment confirmation, and
4. Payment completion.

Each of these sections is illustrated below:

1. Digital asset and network selection: Here, users are prompted to select a Digital Asset (e.g., BTC, USDT, ETH) and network (e.g. TRON, BASE) to fulfill a payment request, in this case, 10 EUR from a merchant.

   

2. Blockchain address and QR Code Screen: This screen allows end users to scan a QR code to open their wallet on their phone or copy wallet details manually.

   

3. Pending Payment Screen: As soon as the transaction is visible on the blockchain, the user will be notified that the payment is in progress. Concurrently, the payment status updates to processing in the API.

3. As soon as the transaction can be seen on the blockchain,
the end-user will see a screen telling them the payment is in progress.
The payment state on the API will be in the processing state at this point.

4. Payment Completion Screen: Finally, when the payment has been fully processed and settled, the user is informed that the payment is complete, with the funds now available in the merchant's account.

4. Once the payment has been settled, the user sees that the payment is complete. At this point, the funds are present in the merchant account.

📘

Digital assets supported

Only the digital assets that are available on the hosted payments page can be used by end-users to complete the payment.

With the payment journey now complete for the end user, Layer1 proceeds to finalize and update the payment status on your portal and dispatches webhook notifications for you to update your system accordingly.