---
title: "GrabPay Component"
description: "Add GrabPay to your Components integration."
url: "https://docs.adyen.com/payment-methods/grabpay/web-component"
source_url: "https://docs.adyen.com/payment-methods/grabpay/web-component.md"
canonical: "https://docs.adyen.com/payment-methods/grabpay/web-component"
last_modified: "2019-11-13T11:41:00+01:00"
language: "en"
---

# GrabPay Component

Add GrabPay to your Components integration.

[View source](/payment-methods/grabpay/web-component.md)

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

## Requirements

Select the [server-side flow](/online-payments/build-your-integration) that your integration uses:

### Tab: Sessions flow

| Requirement          | Description                                                                                                                                                             |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Integration type** | Make sure that you have built a Sessions flow [Web Components integration](/online-payments/build-your-integration/sessions-flow?platform=Web\&integration=Components). |
| **Setup steps**      | Before you begin, [add GrabPay in your Customer Area](/payment-methods/add-payment-methods).                                                                            |

### Tab: Advanced flow

| Requirement          | Description                                                                                                                                                              |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Integration type** | Make sure that you have built an Advanced flow [Web Components integration](/online-payments/build-your-integration/advanced-flow?platform=Web\&integration=Components). |
| **Setup steps**      | Before you begin, [add GrabPay in your Customer Area](/payment-methods/add-payment-methods).                                                                             |

To make a GrabPay [PayLater](/payment-methods/grabpay) 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:

### Tab: `/sessions`

This is the default with Web Components v5.0.0 or later.

| Parameter name                                                                                               | Required                                                                                    | Description                                                                                                                    |
| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| [deliveryAddress](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-deliveryAddress) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The address where the purchased goods should be delivered, including the country, city, street, house number, and postal code. |
| [lineItems](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-lineItems)             | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Price and product information about the purchased items, to be included on the invoice sent to the shopper.                    |

#### curl

```bash
curl https://checkout-test.adyen.com/v69/sessions \
-H 'x-api-key: ADYEN_API_KEY' \
-H 'content-type: application/json' \
-d '{
    "merchantAccount": "YOUR_MERCHANT_ACCOUNT",
    "amount": {
        "value": 1000,
        "currency": "SGD"
    },
    "returnUrl": "https://your-company.example.com/checkout?shopperOrder=12xy..",
    "reference": "YOUR_ORDER_NUMBER",
    "countryCode": "SG",
    "deliveryAddress": {
        "city": "Singapore",
        "country": "SG",
        "houseNumberOrName": "109",
        "postalCode": "179097",
        "street": "North Bridge Road"
    },
    "lineItems":[
      {
         "quantity":"1",
         "taxPercentage":"2100",
         "description":"Shoes",
         "id":"Item #1",
         "amountIncludingTax":"400",
         "productUrl": "URL_TO_PURCHASED_ITEM",
         "imageUrl": "URL_TO_PICTURE_OF_PURCHASED_ITEM"
      }
   ]
}'
```

#### Java

```java
// Adyen Java API Library v39.3.0
import com.adyen.Client;
import com.adyen.enums.Environment;
import com.adyen.model.checkout.*;
import java.time.OffsetDateTime;
import java.util.*;
import com.adyen.model.RequestOptions;
import com.adyen.service.checkout.*;

// For the LIVE environment, also include your liveEndpointUrlPrefix.
Client client = new Client("ADYEN_API_KEY", Environment.TEST);

// Create the request object(s)
LineItem lineItem1 = new LineItem()
  .quantity(1L)
  .taxPercentage(2100L)
  .imageUrl("URL_TO_PICTURE_OF_PURCHASED_ITEM")
  .description("Shoes")
  .id("Item #1")
  .amountIncludingTax(400L)
  .productUrl("URL_TO_PURCHASED_ITEM");

Amount amount = new Amount()
  .currency("SGD")
  .value(1000L);

DeliveryAddress deliveryAddress = new DeliveryAddress()
  .country("SG")
  .city("Singapore")
  .houseNumberOrName("109")
  .street("North Bridge Road")
  .postalCode("179097");

CreateCheckoutSessionRequest createCheckoutSessionRequest = new CreateCheckoutSessionRequest()
  .reference("YOUR_ORDER_NUMBER")
  .lineItems(Arrays.asList(lineItem1))
  .amount(amount)
  .merchantAccount("YOUR_MERCHANT_ACCOUNT")
  .deliveryAddress(deliveryAddress)
  .countryCode("SG")
  .returnUrl("https://your-company.example.com/checkout?shopperOrder=12xy..");

// Send the request
PaymentsApi service = new PaymentsApi(client);
CreateCheckoutSessionResponse response = service.sessions(createCheckoutSessionRequest, new RequestOptions().idempotencyKey("UUID"));
```

#### PHP

```php
<?php
// Adyen PHP API Library v28.2.0
use Adyen\Client;
use Adyen\Environment;
use Adyen\Model\Checkout\LineItem;
use Adyen\Model\Checkout\Amount;
use Adyen\Model\Checkout\DeliveryAddress;
use Adyen\Model\Checkout\CreateCheckoutSessionRequest;
use Adyen\Service\Checkout\PaymentsApi;

$client = new Client();
$client->setXApiKey("ADYEN_API_KEY");
// For the LIVE environment, also include your liveEndpointUrlPrefix.
$client->setEnvironment(Environment::TEST);


// Create the request object(s)
$lineItem1 = new LineItem();
$lineItem1
  ->setQuantity(1)
  ->setTaxPercentage(2100)
  ->setImageUrl("URL_TO_PICTURE_OF_PURCHASED_ITEM")
  ->setDescription("Shoes")
  ->setId("Item #1")
  ->setAmountIncludingTax(400)
  ->setProductUrl("URL_TO_PURCHASED_ITEM");

$amount = new Amount();
$amount
  ->setCurrency("SGD")
  ->setValue(1000);

$deliveryAddress = new DeliveryAddress();
$deliveryAddress
  ->setCountry("SG")
  ->setCity("Singapore")
  ->setHouseNumberOrName("109")
  ->setStreet("North Bridge Road")
  ->setPostalCode("179097");

$createCheckoutSessionRequest = new CreateCheckoutSessionRequest();
$createCheckoutSessionRequest
  ->setReference("YOUR_ORDER_NUMBER")
  ->setLineItems(array($lineItem1))
  ->setAmount($amount)
  ->setMerchantAccount("YOUR_MERCHANT_ACCOUNT")
  ->setDeliveryAddress($deliveryAddress)
  ->setCountryCode("SG")
  ->setReturnUrl("https://your-company.example.com/checkout?shopperOrder=12xy..");

$requestOptions['idempotencyKey'] = 'UUID';

// Send the request
$service = new PaymentsApi($client);
$response = $service->sessions($createCheckoutSessionRequest, $requestOptions);
```

#### C\#

```cs
// Adyen .net API Library v32.1.1
using Adyen;
using Environment = Adyen.Model.Environment;
using Adyen.Model;
using Adyen.Model.Checkout;
using Adyen.Service.Checkout;

// For the LIVE environment, also include your liveEndpointUrlPrefix.
var config = new Config()
{
    XApiKey = "ADYEN_API_KEY",
    Environment = Environment.Test
};
var client = new Client(config);

// Create the request object(s)
LineItem lineItem1 = new LineItem
{
  Quantity = 1,
  TaxPercentage = 2100,
  ImageUrl = "URL_TO_PICTURE_OF_PURCHASED_ITEM",
  Description = "Shoes",
  Id = "Item #1",
  AmountIncludingTax = 400,
  ProductUrl = "URL_TO_PURCHASED_ITEM"
};

Amount amount = new Amount
{
  Currency = "SGD",
  Value = 1000
};

DeliveryAddress deliveryAddress = new DeliveryAddress
{
  Country = "SG",
  City = "Singapore",
  HouseNumberOrName = "109",
  Street = "North Bridge Road",
  PostalCode = "179097"
};

CreateCheckoutSessionRequest createCheckoutSessionRequest = new CreateCheckoutSessionRequest
{
  Reference = "YOUR_ORDER_NUMBER",
  LineItems = new List<LineItem>{ lineItem1 },
  Amount = amount,
  MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
  DeliveryAddress = deliveryAddress,
  CountryCode = "SG",
  ReturnUrl = "https://your-company.example.com/checkout?shopperOrder=12xy.."
};

// Send the request
var service = new PaymentsService(client);
var response = service.Sessions(createCheckoutSessionRequest, requestOptions: new RequestOptions { IdempotencyKey = "UUID"});
```

#### NodeJS (JavaScript)

```js
// Adyen Node API Library v29.0.0
const { Client, CheckoutAPI } = require('@adyen/api-library');

// For the LIVE environment, also include your liveEndpointUrlPrefix.
const config = new Config({
  apiKey: "ADYEN_API_KEY",
  environment: EnvironmentEnum.TEST
});

const client = new Client(config);

// Create the request object(s)
const createCheckoutSessionRequest = {
  merchantAccount: "YOUR_MERCHANT_ACCOUNT",
  amount: {
    value: 1000,
    currency: "SGD"
  },
  returnUrl: "https://your-company.example.com/checkout?shopperOrder=12xy..",
  reference: "YOUR_ORDER_NUMBER",
  countryCode: "SG",
  deliveryAddress: {
    city: "Singapore",
    country: "SG",
    houseNumberOrName: "109",
    postalCode: "179097",
    street: "North Bridge Road"
  },
  lineItems: [ {
    quantity: "1",
    taxPercentage: "2100",
    description: "Shoes",
    id: "Item #1",
    amountIncludingTax: "400",
    productUrl: "URL_TO_PURCHASED_ITEM",
    imageUrl: "URL_TO_PICTURE_OF_PURCHASED_ITEM"
  } ]
}

// Send the request
const checkoutAPI = new CheckoutAPI(client);
const response = checkoutAPI.PaymentsApi.sessions(createCheckoutSessionRequest, { idempotencyKey: "UUID" });
```

#### Go

```go
// Adyen Go API Library v21.0.0
import (
  "context"
  "github.com/adyen/adyen-go-api-library/v21/src/common"
  "github.com/adyen/adyen-go-api-library/v21/src/adyen"
  "github.com/adyen/adyen-go-api-library/v21/src/checkout"
)
// For the LIVE environment, also include your liveEndpointUrlPrefix.
client := adyen.NewClient(&common.Config{
  ApiKey:      "ADYEN_API_KEY",
  Environment: common.TestEnv,
})

// Create the request object(s)
lineItem1 := checkout.LineItem{
  Quantity: common.PtrInt64(1),
  TaxPercentage: common.PtrInt64(2100),
  ImageUrl: common.PtrString("URL_TO_PICTURE_OF_PURCHASED_ITEM"),
  Description: common.PtrString("Shoes"),
  Id: common.PtrString("Item #1"),
  AmountIncludingTax: common.PtrInt64(400),
  ProductUrl: common.PtrString("URL_TO_PURCHASED_ITEM"),
}

amount := checkout.Amount{
  Currency: "SGD",
  Value: 1000,
}

deliveryAddress := checkout.DeliveryAddress{
  Country: "SG",
  City: "Singapore",
  HouseNumberOrName: "109",
  Street: "North Bridge Road",
  PostalCode: "179097",
}

createCheckoutSessionRequest := checkout.CreateCheckoutSessionRequest{
  Reference: "YOUR_ORDER_NUMBER",
  LineItems: []checkout.LineItem{
      lineItem1,
  },
  Amount: amount,
  MerchantAccount: "YOUR_MERCHANT_ACCOUNT",
  DeliveryAddress: &deliveryAddress,
  CountryCode: common.PtrString("SG"),
  ReturnUrl: "https://your-company.example.com/checkout?shopperOrder=12xy..",
}

// Send the request
service := client.Checkout()
req := service.PaymentsApi.SessionsInput().IdempotencyKey("UUID").CreateCheckoutSessionRequest(createCheckoutSessionRequest)
res, httpRes, err := service.PaymentsApi.Sessions(context.Background(), req)
```

#### Python

```py
# Adyen Python API Library v13.6.0
import Adyen

adyen = Adyen.Adyen()
adyen.client.xapikey = "ADYEN_API_KEY"
# For the LIVE environment, also include your liveEndpointUrlPrefix.
adyen.client.platform = "test" # The environment to use library in.

# Create the request object(s)
json_request = {
  "merchantAccount": "YOUR_MERCHANT_ACCOUNT",
  "amount": {
    "value": 1000,
    "currency": "SGD"
  },
  "returnUrl": "https://your-company.example.com/checkout?shopperOrder=12xy..",
  "reference": "YOUR_ORDER_NUMBER",
  "countryCode": "SG",
  "deliveryAddress": {
    "city": "Singapore",
    "country": "SG",
    "houseNumberOrName": "109",
    "postalCode": "179097",
    "street": "North Bridge Road"
  },
  "lineItems": [ {
    "quantity": "1",
    "taxPercentage": "2100",
    "description": "Shoes",
    "id": "Item #1",
    "amountIncludingTax": "400",
    "productUrl": "URL_TO_PURCHASED_ITEM",
    "imageUrl": "URL_TO_PICTURE_OF_PURCHASED_ITEM"
  } ]
}

# Send the request
result = adyen.checkout.payments_api.sessions(request=json_request, idempotency_key="UUID")
```

#### Ruby

```rb
# Adyen Ruby API Library v10.4.0
require "adyen-ruby-api-library"

adyen = Adyen::Client.new
adyen.api_key = 'ADYEN_API_KEY'
# For the LIVE environment, also include your liveEndpointUrlPrefix.
adyen.env = :test # Set to "live" for live environment

# Create the request object(s)
request_body = {
  :merchantAccount => 'YOUR_MERCHANT_ACCOUNT',
  :amount => {
    :value => 1000,
    :currency => 'SGD'
  },
  :returnUrl => 'https://your-company.example.com/checkout?shopperOrder=12xy..',
  :reference => 'YOUR_ORDER_NUMBER',
  :countryCode => 'SG',
  :deliveryAddress => {
    :city => 'Singapore',
    :country => 'SG',
    :houseNumberOrName => '109',
    :postalCode => '179097',
    :street => 'North Bridge Road'
  },
  :lineItems => [ {
    :quantity => '1',
    :taxPercentage => '2100',
    :description => 'Shoes',
    :id => 'Item #1',
    :amountIncludingTax => '400',
    :productUrl => 'URL_TO_PURCHASED_ITEM',
    :imageUrl => 'URL_TO_PICTURE_OF_PURCHASED_ITEM'
  } ]
}

# Send the request
result = adyen.checkout.payments_api.sessions(request_body, headers: { 'Idempotency-Key' => 'UUID' })
```

#### NodeJS (TypeScript)

```ts
// Adyen Node API Library v29.0.0
import { Client, CheckoutAPI, Types } from "@adyen/api-library";

// For the LIVE environment, also include your liveEndpointUrlPrefix.
const config = new Config({
  apiKey: "ADYEN_API_KEY",
  environment: EnvironmentEnum.TEST
});

const client = new Client(config);

// Create the request object(s)
const lineItem1: Types.checkout.LineItem = {
  quantity: 1,
  taxPercentage: 2100,
  imageUrl: "URL_TO_PICTURE_OF_PURCHASED_ITEM",
  description: "Shoes",
  id: "Item #1",
  amountIncludingTax: 400,
  productUrl: "URL_TO_PURCHASED_ITEM"
};

const amount: Types.checkout.Amount = {
  currency: "SGD",
  value: 1000
};

const deliveryAddress: Types.checkout.DeliveryAddress = {
  country: "SG",
  city: "Singapore",
  houseNumberOrName: "109",
  street: "North Bridge Road",
  postalCode: "179097"
};

const createCheckoutSessionRequest: Types.checkout.CreateCheckoutSessionRequest = {
  reference: "YOUR_ORDER_NUMBER",
  lineItems: [lineItem1],
  amount: amount,
  merchantAccount: "YOUR_MERCHANT_ACCOUNT",
  deliveryAddress: deliveryAddress,
  countryCode: "SG",
  returnUrl: "https://your-company.example.com/checkout?shopperOrder=12xy.."
};

// Send the request
const checkoutAPI = new CheckoutAPI(client);
const response = checkoutAPI.PaymentsApi.sessions(createCheckoutSessionRequest, { idempotencyKey: "UUID" });
```

### Tab: `/payments`

If you implemented an additional use case, or integrated with Web Components before v5.0.0.

| Parameter name                                                                                               | Required                                                                                    | Description                                                                                                                    |
| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| [deliveryAddress](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-deliveryAddress) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The address where the purchased goods should be delivered, including the country, city, street, house number, and postal code. |
| [lineItems](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-lineItems)             | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Price and product information about the purchased items, to be included on the invoice sent to the shopper.                    |

#### curl

```bash
curl https://checkout-test.adyen.com/v72/payments \
-H 'x-api-key: ADYEN_API_KEY' \
-H 'content-type: application/json' \
-d '{
    "merchantAccount": "YOUR_MERCHANT_ACCOUNT",
    "amount": {
        "value": 1000,
        "currency": "SGD"
    },
    "reference": "YOUR_ORDER_NUMBER",
    "paymentMethod": {
        "type": "grabpay_SG"
    },
    "returnUrl": "https://your-company.example.com/checkout?shopperOrder=12xy..",
    "deliveryAddress": {
        "city": "Singapore",
        "country": "SG",
        "houseNumberOrName": "109",
        "postalCode": "179097",
        "street": "North Bridge Road"
    },
    "lineItems":[
      {
         "quantity":"1",
         "taxPercentage":"2100",
         "description":"Shoes",
         "id":"Item #1",
         "amountIncludingTax":"400",
         "productUrl": "URL_TO_PURCHASED_ITEM",
         "imageUrl": "URL_TO_PICTURE_OF_PURCHASED_ITEM"
      }
   ]
}'
```

#### Java

```java
// Set ADYEN_API_KEY with the API key from the Customer Area.
// Change to Environment.LIVE and add the Live URL prefix when you are ready to accept live payments.
    Client client = new Client("ADYEN_API_KEY", Environment.TEST);
    Checkout checkout = new Checkout(client);

    PaymentsRequest paymentsRequest = new PaymentsRequest();

    String merchantAccount = "YOUR_MERCHANT_ACCOUNT";
    paymentsRequest.setMerchantAccount(merchantAccount);

    Amount amount = new Amount();
    amount.setCurrency("SGD");
    amount.setValue(15000L);
    paymentsRequest.setAmount(amount);

    DefaultPaymentMethodDetails paymentMethodDetails = new DefaultPaymentMethodDetails();
    paymentMethodDetails.setType("grabpay_SG");
    paymentsRequest.setPaymentMethod(paymentMethodDetails);

    paymentsRequest.setReference("YOUR_ORDER_NUMBER");
    paymentsRequest.setReturnUrl("https://your-company.example.com/checkout?shopperOrder=12xy..");

    Address deliveryAddress = new Address();
    deliveryAddress.setCity("Singapore");
    deliveryAddress.setCountry("SG");
    deliveryAddress.setHouseNumberOrName("109");
    deliveryAddress.setPostalCode("179097");
    deliveryAddress.setStreet("North Bridge Road");

    List<LineItem> lineItems = new ArrayList<>();
    lineItems.add(
            new LineItem()
                    .quantity(1L)
                    .taxPercentage(2100L)
                    .description("Shoes")
                    .id("Item #1")
                    .amountIncludingTax(400L)
                    .productUrl("URL_TO_PURCHASED_ITEM")
                    .imageUrl("URL_TO_PICTURE_OF_PURCHASED_ITEM")
    );

    paymentsRequest.setLineItems(lineItems);

    PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest);
```

#### PHP

```php
// Set your X-API-KEY with the API key from the Customer Area.
$client = new \Adyen\Client();
$client->setXApiKey("ADYEN_API_KEY");
$service = new \Adyen\Service\Checkout($client);

$params = array(
  "amount" => array(
    "currency" => "SGD",
    "value" => 1000
  ),
  "reference" => "YOUR_ORDER_NUMBER",
  "paymentMethod" => array(
    "type" => "grabpay_SG"
  ),
  "returnUrl" => "https://your-company.example.com/checkout?shopperOrder=12xy..",
  "merchantAccount" => "YOUR_MERCHANT_ACCOUNT",
  "deliveryAddress" => [
     "city" => "Singapore",
     "country" => "SG",
     "houseNumberOrName" => "109",
     "postalCode" => "179097",
     "street" => "North Bridge Road"
  ],
  "lineItems" => [
     [
        "quantity" => "1",
        "taxPercentage" => "2100",
        "description" => "Shoes",
        "id" => "Item #1",
        "amountIncludingTax" => "400",
        "productUrl" => "URL_TO_PURCHASED_ITEM",
        "imageUrl" => "URL_TO_PICTURE_OF_PURCHASED_ITEM"
     ]
  ]
);
$result = $service->payments($params);
```

#### C\#

```cs
// Set your X-API-KEY with the API key from the Customer Area.
var client = new Client ("ADYEN_API_KEY", Environment.Test);
var checkout = new Checkout(client);

var amount = new Adyen.Model.Checkout.Amount("SGD", 1000);
var details = new Adyen.Model.Checkout.DefaultPaymentMethodDetails{
  Type = "grabpay_SG"
};
var paymentsRequest = new Adyen.Model.Checkout.PaymentRequest
{
  Reference = "YOUR_ORDER_NUMBER",
  Amount = amount,
  ReturnUrl = "https://your-company.example.com/checkout?shopperOrder=12xy..",
  MerchantAccount = "YOUR_MERCHANT_ACCOUNT",
  DeliveryAddress = new Adyen.Model.Checkout.Address
  {
       City = "Singapore",
       Country = "SG",
       HouseNumberOrName = "109",
       PostalCode = "179097",
       Street = "North Bridge Road"
  },
  LineItems = new List<LineItem>
  {
    new LineItem(quantity:1, taxPercentage:2100, description:"Shoes", id:"Item #1", amountIncludingTax:400, productUrl:"URL_TO_PURCHASED_ITEM", imageUrl:"URL_TO_PICTURE_OF_PURCHASED_ITEM"),
  },
  PaymentMethod = details
};

var paymentResponse = checkout.Payments(paymentsRequest);
```

#### NodeJS (JavaScript)

```js
// Adyen Node API Library v16.1.0
// Require the parts of the module you want to use
const { Client, CheckoutAPI } = require('@adyen/api-library');

// Initialize the client object
const client = new Client({apiKey: "YOUR_X_API_KEY", environment: "TEST"});

// Create the request object
const paymentRequest = {
  merchantAccount: "YOUR_MERCHANT_ACCOUNT",
  amount: {
    value: 1000,
    currency: "SGD"
  },
  reference: "YOUR_ORDER_NUMBER",
  paymentMethod: {
    type: "grabpay_SG"
  },
  returnUrl: "https://your-company.example.com/checkout?shopperOrder=12xy..",
  deliveryAddress: {
    city: "Singapore",
    country: "SG",
    houseNumberOrName: "109",
    postalCode: "179097",
    street: "North Bridge Road"
  },
  lineItems: [ {
    quantity: "1",
    taxPercentage: "2100",
    description: "Shoes",
    id: "Item #1",
    amountIncludingTax: "400",
    productUrl: "URL_TO_PURCHASED_ITEM",
    imageUrl: "URL_TO_PICTURE_OF_PURCHASED_ITEM"
  } ]
}

// Make the request
const checkoutAPI = new CheckoutAPI(client);
const response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: "UUID" });
```

#### Python

```py
# Adyen Python API Library v12.0.0
import Adyen

adyen = Adyen.Adyen()
adyen.client.xapikey = "YOUR_X_API_KEY"
adyen.client.platform = "test" # The environment to use library in.

json_request = {
  "merchantAccount": "YOUR_MERCHANT_ACCOUNT",
  "amount": {
    "value": 1000,
    "currency": "SGD"
  },
  "reference": "YOUR_ORDER_NUMBER",
  "paymentMethod": {
    "type": "grabpay_SG"
  },
  "returnUrl": "https://your-company.example.com/checkout?shopperOrder=12xy..",
  "deliveryAddress": {
    "city": "Singapore",
    "country": "SG",
    "houseNumberOrName": "109",
    "postalCode": "179097",
    "street": "North Bridge Road"
  },
  "lineItems": [ {
    "quantity": "1",
    "taxPercentage": "2100",
    "description": "Shoes",
    "id": "Item #1",
    "amountIncludingTax": "400",
    "productUrl": "URL_TO_PURCHASED_ITEM",
    "imageUrl": "URL_TO_PICTURE_OF_PURCHASED_ITEM"
  } ]
}

result = adyen.checkout.payments_api.payments(request=json_request, idempotency_key="UUID")
```

#### Ruby

```rb
# Adyen Ruby API Library v9.1.0
require "adyen-ruby-api-library"

adyen = Adyen::Client.new
adyen.api_key = 'YOUR_X_API_KEY'
adyen.env = :test # Set to "live" for live environment

request_body = {
  :merchantAccount => 'YOUR_MERCHANT_ACCOUNT',
  :amount => {
    :value => 1000,
    :currency => 'SGD'
  },
  :reference => 'YOUR_ORDER_NUMBER',
  :paymentMethod => {
    :type => 'grabpay_SG'
  },
  :returnUrl => 'https://your-company.example.com/checkout?shopperOrder=12xy..',
  :deliveryAddress => {
    :city => 'Singapore',
    :country => 'SG',
    :houseNumberOrName => '109',
    :postalCode => '179097',
    :street => 'North Bridge Road'
  },
  :lineItems => [ {
    :quantity => '1',
    :taxPercentage => '2100',
    :description => 'Shoes',
    :id => 'Item #1',
    :amountIncludingTax => '400',
    :productUrl => 'URL_TO_PURCHASED_ITEM',
    :imageUrl => 'URL_TO_PICTURE_OF_PURCHASED_ITEM'
  } ]
}

result = adyen.checkout.payments_api.payments(request_body, headers: { 'Idempotency-Key' => 'UUID' })
```

## 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:

```html
 <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`.

```js
const grabPaySG = new Redirect(checkout, { type: 'grabpay_SG' }).mount('#grabpay_SG-container');
```

**

#### v5.x.x or earlier

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

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

## Test and go live

To test your GrabPay integration:

1. Contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other) 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](https://ca-test.adyen.com/) > **Transactions** > **Payments**.

Before you can accept live GrabPay payments, you need to [submit a request for GrabPay](/payment-methods/add-payment-methods) in your [live Customer Area](https://ca-live.adyen.com/).

## See also

* [Web Components integration guide](/online-payments/components-web)
* [Webhooks](/development-resources/webhooks)
* [Tokenization](/online-payments/tokenization)
* [API Explorer](https://docs.adyen.com/api-explorer/#/CheckoutService/latest/overview)