Funding through Checkout Page

The Wallet Engine Checkout page is the fastest way to start accepting the local payment methods. The Checkout page handles the payment acceptance, PCI compliance… with very little coding required.

Prior to this use case, your customer selects the top-up channel using the Checkout page. First, your application requests to Wallet Engine platform to generate the Checkout page URL. Second, redirect the customer to the URL you received in the response.

Based on the channel you can keep your customer on your webpage, application by embedding our payment iframe into your existing checkout page. You can also redirect your customers to the Checkout page and we will redirect back to you when your customers finish the checkout process.

During the checkout process, instructions relevant to the selected payment method are displays. It helps your customer follows the instructions or confirmation based on the payment method type and whether it was successful.

Use Case Overview

• Alice, your customers want to pay with her credit card numbers. She selects the Visa Debit option at the top-up page. This option can help pay her order instantly, without waiting time. Your backend asks Wallet Engine to verify and generate a new checkout page request. This will bring up the request_id as well as a reference, and the browser_url.

• Redirect your customer to the URL you received above, the redirect URL displays the Checkout page. In this screen, Alice needs to enter the Card Number, Name on Card, CVV Code, and Expiration Date, and press the button to process the payment.

• After a customer follows the instructions to complete the payment and successfully, the Wallet Engine will redirect the customer to the URL that was configurated.

Checkout Page Workflow

In previous steps:

• Your application displays a top-up channel for a Credit Card with a fee.

• The customer selects the Credit Card payment method and clicks Confirm.

Highlights in your workflow and the basic stage.

…

• Stage 1:

  • Your application backend requests Wallet Engine to generate a new checkout page.

  • Wallet Engine processes the request and responses with the request_id and the browser_url.

• Stage 2:

  • Your application opens the browser_url in the iframe or on a new website tab…

    • Based on the payment method, instructions relevant to the selected payment method are displayed. The customer follows the instructions to complete the payment.

    • Payment methods like Credit Card are verifiable and complete instantly, but with the other like Paylah, Grabpay,… the customer may be required another step outside the application to complete the payment.

• Stage 3:

  • If the payment is completed successfully, Wallet Engine notifies your application backend that the payment was completed successfully and redirects the customer to the complete URL.

  • Your application notifies the customer that the wallet has been top-upped or the purchase succeeded.

Implementing the Workflow

How you'll use Wallet Engine’s API to implement the workflow.

When the customer clicks Confirm, your application backend calls the API below to generate a new checkout page:

/topup/rapyd/checkout

POST https://sandbox.walletengine.io/api/topup/rapyd/checkout

Request Body

Name	Type	Description
app_id	string
amount	number
channel_id	string

200

{
  "request_id": "5f3223cf64afc",
  "browser_url": "https://sandboxcheckout.rapyd.net?token=checkout_8086322cbd36dc624510f413e2569b04"
}

Example Request

{
  "app_id": "1db2a50be7626",
  "amount": 25,
  "channel_id": "sg_credit_rapyd_visa"
}

Your application redirects to the browser_url and the customer follows the instructions to complete the payment.

Closing the Transaction

With most of the payment methods, the checkout page will redirect back to your website. For others, your application is closed and the user uses another application to scan the barcode or perform some manual steps outside the application or device.

Wallet Engine sends you a webhook with the details of the transaction then you can display a page telling your customer that their top-up or purchase was successful and closes out the transaction with your customer.