Direct integration of Google Pay

With the direct Google Pay integration, your checkout page loads the Google Pay JavaScript SDK and triggers the native Google Pay payment sheet. Once the customer authorizes the payment, Google returns an encrypted payment token that you pass directly to the Payments API using the googlePayPaymentToken parameter.

This approach gives you full control over the checkout UI while Mollie handles payment processing and settlement.

Prerequisites before you start

• Your checkout page is served over HTTPS with a valid TLS certificate.
• Google Pay is enabled for your Mollie profile. Go to Dashboard → Organization settings → Website profiles, select your profile, and enable Google Pay.
• You have registered with the Google Pay & Wallet Console and obtained a Google Merchant ID.

Implementation

Follow the tutorial for Google Pay to implement Google Pay in your checkout and follow the specific Mollie configurations below.

Tokenization specification

For Google to encrypt the card details of your customer, configure the tokenizationSpecification by setting the gateway to mollie and set your Mollie Profile ID:

const tokenizationSpecification = {
  type: 'PAYMENT_GATEWAY',
  parameters: {
    'gateway': 'mollie',
    'gatewayMerchantId': 'pfl_YOUR_PROFILE_ID'
  }
};

Card networks and authentication methods

Mollie supports American Express, Mastercard and Visa networks. For authentication, both device tokens (CRYPTOGRAM_3DS) and card details (PAN_ONLY) are supported.

const allowedCardNetworks = ["AMEX", "MASTERCARD", "VISA"];

const allowedCardAuthMethods = ["PAN_ONLY", "CRYPTOGRAM_3DS"];

Process the payment

When you call loadPaymentData and your customer authorizes the payment, you will receive a paymentData object. Extract the payment token from the paymentData object and send this to your server without modifying it.

paymentsClient.loadPaymentData(paymentDataRequest).then(function(paymentData){
  // pass this token without modification
  paymentToken = paymentData.paymentMethodData.tokenizationData.token;
  fetch('/create-payment', {                                               
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ googlePayToken }),
	})
}).catch(function(err){
  console.error(err);
});

On your server, call the Payments API to create the payment. Set the method to creditcard and pass the token using the googlePayPaymentToken field.

curl -X POST https://api.mollie.com/v2/payments \
    -H "Content-Type: application/json" \
    -H "Authorization: Bearer test_dHar4XY7LxsDOtmnkVtjNVWXLSlXsM" \
    -d '{
  "method": "creditcard",
  "amount": {
    "currency": "EUR",
    "value": "100.00"
  },
  "description": "Order #1337",
  "googlePayPaymentToken": "{\"protocolVersion\":\"EC_v1\",\"signature\":\"MEYCIQCO6kv6Xy..."}",
  "webhookUrl": "https://example.org/webhook",
  "redirectUrl": "https://example.org/redirect"
}'

<?php

$mollie = new \Mollie\Api\MollieApiClient();
$mollie->setApiKey("test_dHar4XY7LxsDOtmnkVtjNVWXLSlXsM");

$payment = $mollie->payments->create([
    "method"                => "creditcard",
    "amount"                => [
        "currency" => "EUR",
        "value"    => "100.00"
    ],
    "description"           => "Order #1337",
    "googlePayPaymentToken" => $googlePayToken, // ensure the token is a json encoded string
    "webhookUrl"            => "https://example.org/webhook",
    "redirectUrl"           => "https://example.org/redirect"
]);

🚧

The redirectUrl is required because your customer may need to be redirected to complete the payment.

Handle payment status

Depending on the device or browser your customer is using, the payment may be processed immediately or you will have to redirect them to the checkoutUrl. Refer to the status property of the payment to understand which action you will have to take.