Payment-method icon

GCash Component

Add GCash to your Components integration.

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

Requirements

Select which endpoint you are using:

Requirement Description
Integration type Make sure that you have built a Sessions flow Web Components integration.
Setup steps Before you begin:

API reference

You do not need to send additional fields for GCash. To see optional fields that you can send for all payment methods, choose the endpoint you integrated:

Component configuration

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:

Copy code
 <div id="gcash-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.
Copy code
const gcash = new Redirect(checkout, { type: 'gcash' }).mount('#gcash-container');

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

Copy code
const gcashComponent = checkout.create('gcash').mount('#gcash-container');

Recurring payments

GCash supports recurring transactions. To make recurring transactions, you need to:
  1. Create a shopper token.
  2. Use the token to make future payments for the shopper.

Create a token

To create a token, include in your /payments request:

  • storePaymentMethod: true
  • shopperReference: Your unique identifier for the shopper (minimum length three characters).

When the payment has been settled, you receive a webhook containing:

  • eventCode: RECURRING_CONTRACT
  • originalReference: The pspReference of the initial payment.
  • pspReference: This is the token that you need to make recurring payments for this shopper.

Make sure that your server is able to receive RECURRING_CONTRACT as part of your standard webhooks. You can enable the RECURRING_CONTRACT event code in the webhook settings page.

Make a payment with a token

To make a payment with the token, include in your /payments request:

  • paymentMethod.storedPaymentMethodId: The pspReference from the RECURRING_CONTRACT webhook.

    You can also get this value using the /listRecurringDetails endpoint.

  • shopperReference: The unique shopper identifier that you specified when creating the token.

  • shopperInteractionContAuth

  • recurringProcessingModel: Use Subscription for a series of transactions following a fixed time interval or UnscheduledCardOnFile for contracts with non-fixed time interval.

    Expand view
    Copy link to code block
    Copy code
    Copy code
    curl https://checkout-test.adyen.com/v68/payments \
    -H 'x-api-key: ADYEN_API_KEY' \
    -H 'content-type: application/json' \
    -d '{
    "amount":{
    "value":1000,
    "currency":"PHP"
    },
    "paymentMethod":{
    "type":"gcash",
    "storedPaymentMethodId":"7219687191761347"
    },
    "reference":"YOUR_ORDER_NUMBER",
    "merchantAccount":"YOUR_MERCHANT_ACCOUNT",
    "shopperReference":"YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j",
    "shopperInteraction":"ContAuth",
    "recurringProcessingModel": "Subscription"
    }'

Test and go live

To test successful GCash live payments, you need to use a real mobile number registered with a GCash account.

If you are encountering issues with testing GCash payments, contact our Support Team.

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

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

See also