Payment-method icon

GrabPay Component

Add GrabPay to your Components integration.

This page explains how to add GrabPay to your existing Web Components integration.

Requirements

Select the server-side flow that your integration uses:

To make a GrabPay PayLater payment, you also need to collect and send additional information:

  • The delivery address
  • Information about the purchased items

API reference

Collecting and sending additional information is only needed for GrabPay PayLater payments. However, we highly recommend you do the same in your initial integration for GrabPay Wallet because it will help save development resources if you plan to enable GrabPay PayLater afterwards.

To make a GrabPay PayLater payment, either postpaid or installment, you need to send additional fields. Select which endpoint you are using:

Component configuration

The Component to use depends on the shopper's country/region:
  • grabpay_MY if the shopper is in Malaysia paying with Malaysian Ringgit.
  • grabpay_PH if the shopper is in the Philippines paying with Philippine Peso.
  • grabpay_SG if the shopper is in Singapore paying with Singapore Dollars.

In the examples below, we use a scenario where the shopper is in Singapore.

Step 1: Create a DOM element

Create a DOM element on your checkout page, placing it where you want the payment method form to be rendered:

 <div id="grabpay_SG-container"></div>

Step 2: Create an instance of the Component

v6.0.0 or later

Create an instance of the Component, passing:

  • Your instance of AdyenCheckout.
const grabPaySG = new Redirect(checkout, { type: 'grabpay_SG' }).mount('#grabpay_SG-container');

Use the create method of your AdyenCheckout instance, in this case checkout, to create the Component:

const grabPaySGComponent = checkout.create('grabpay_SG').mount('#grabpay_SG-container');

Test and go live

To test your GrabPay integration:

  1. Contact our Support Team for your test wallet credentials.
  2. In the simulator, log in to Grab with the phone number you registered, and specify the one-time password you receive on that phone number.

Check the status of the GrabPay test payments in your Customer Area > Transactions > Payments.

Before you can accept live GrabPay payments, you need to submit a request for GrabPay in your live Customer Area.

See also