Skip to main content

Google Pay

You can start accepting Google Pay payments on the Web using Hosted Payment Page or Google Pay Component. No additional configuration is required for the Hosted Payment Page. It already supports all available payment methods and does not require coding.

Our Google Pay Component renders Google Pay to your payment page. When a customer selects Google Pay, the component presents the Google Pay payment sheet where a customer can choose a card he wants to use. If a customer selects a card that requires 3D Secure confirmation the payment confirmation step will automatically show a 3D Secure confirmation popup.

note

We recommend using our new Payment Request Component instead of Google Pay Component. Payment Request Component gives you a single integration for Apple Pay and Google Pay. Customers see a Google Pay or an Apple Pay button, depending on what their device and browser combination supports.

If you prefer to integrate directly against the Google Pay API, follow our Google Pay direct API integration guide.

Before you begin

This page explains how to add Google Pay to your payment page. To accept Google Pay payments you need to have at least one configured card processor.

To configure card processors go to MONEI Dashboard → Settings → Payment Methods → Card payments.

Before you start, you need to:

  • Make sure that you have Google Pay enabled in MONEI Dashboard → Settings → Payment Methods.
  • Add a card in Chrome.
  • Serve your application over HTTPS. This is a requirement both in development and in production. One way to get up and running is to use a service like ngrok.

To test your integration:

  • Use your test mode Account ID and API Key.
  • You can use any real card details, you will not be charged in the test mode (card details are automatically replaced with the test card).
  • You can check the status of the test payment in your MONEI Dashboard → Payments (in test mode).
Google Pay Terms

By integrating Google Pay™, you adhere to the Google Pay APIs Acceptable Use Policy and accept the terms defined in the Google Pay API Terms of Service.

Integration

1. Create a Payment Server-side

Create a Payment on your server with an amount and currency. Always decide how much to charge on the server side, a trusted environment, as opposed to the client. This prevents malicious customers from being able to choose their own prices.

POST https://api.monei.com/v1/payments
curl --request POST 'https://api.monei.com/v1/payments' \
--header 'Authorization: pk_test_3c140607778e1217f56ccb8b50540e00' \
--header 'Content-Type: application/json' \
--data-raw '{
"amount": 110,
"currency": "EUR",
"orderId": "14379133960355",
"description": "Test Shop - #14379133960355",
"customer": {
"email": "john.doe@microapps.com"
},
"callbackUrl": "https://example.com/checkout/callback"
}'

The following parameters are required:

  • amount positive integer - Amount intended to be collected by this payment. A positive integer representing how much to charge in the smallest currency unit (e.g., 100 cents to charge 1.00 USD)
  • currency string - Three-letter ISO currency code, in uppercase. Must be a supported currency.
  • orderId string - An order ID from your system. A unique identifier that can be used to reconcile the payment with your internal system.
  • callbackUrl string - The URL to which a payment result should be sent asynchronously.

Check all available request parameters.

Included in the returned Payment object is a payment id, which is used on the client side to securely complete the payment process instead of passing the entire Payment object.

2. Add Google Pay button to your payment page Client-side

Include monei.js on your checkout page by adding the script tag to the head of your HTML file.

checkout.html
<head>
<title>Checkout</title>
<script src="https://js.monei.com/v2/monei.js"></script>
</head>

Add MONEI Google Pay Component to your payment page. Create empty DOM node (container) with unique ID in your payment form.

checkout.html
<div id="gpay_container">
<!-- A MONEI Google Pay Component will be inserted here. -->
</div>

Initialize Google Pay Component

client.js
// Create an instance of the Google Pay component.
var googlePay = monei.GooglePay({
paymentId: '{{payment_id}}',
onSubmit(result) {
moneiTokenHandler(result.token);
},
onError(error) {
console.log(error);
}
});

// Render an instance of the GooglePay component into the `gpay_container` <div>.
googlePay.render('#gpay_container');
note

Google Pay Component is also available as a React and Vue component. Check out our examples.

Check the MONEI JS Reference for more options.

3. Confirm the payment Client-side

To complete the payment you need to confirm it using monei.js confirmPayment function

You need to provide a paymentId (obtained in step 1) and paymentToken generated with Google Pay Component. You can also provide additional parameters like customer.email. Check all available parameters.

client.js
// Confirm the payment
function moneiTokenHandler(token) {
return monei
.confirmPayment({paymentId: '{{payment_id}}', paymentToken: token})
.then(function (result) {
// At this moment you can show a customer the payment result
// But you should always rely on the result passed to the callback endpoint on your server
// to update the order status
console.log(result);
})
.catch(function (error) {
console.log(error);
});
}

After the payment is submitted MONEI will automatically show a popup window with 3D Secure confirmation screen (if needed)

note

As an alternative process you can submit generated paymentToken to your sever and then confirm payment on the server-side.

4. An asynchronous request is sent to your server.

MONEI will notify you about the payment status by sending an HTTP POST request to the callbackUrl. The request body will contain full payment object in JSON format.

This ensures that you get the payment status even when customer closed the browser window or lost internet connection.

The request also contains a MONEI-Signature header. Verify this signature to confirm that received request is sent from MONEI.

To acknowledge receipt of the request, your endpoint must return a 200 HTTP status code to MONEI. All other response codes, including 3xx codes, indicate to MONEI that you did not receive the event.

If MONEI does not receive a 200 HTTP status code, the notification attempt is repeated. After multiple failures to send the notification over multiple days, MONEI marks the request as failed and stops trying to send it to your endpoint.

Google Pay direct API integration

If you prefer to integrate directly against the Google Pay API, follow Google’s instructions.

Specify following tokenization specification

const tokenizationSpecification = {
type: 'PAYMENT_GATEWAY',
parameters: {
gateway: 'monei',
gatewayMerchantId: 'MONEI_ACCOUNT_ID'
}
};

To use Google Pay API directly you need to request production access and obtain your merchantId in Google Console (this step is not required if you are using our Google Pay Сomponent).

paymentDataRequest.merchantInfo = {
merchantName: 'Example Merchant',
merchantId: 'GOOGLE_MERCHANT_ID'
};

Exchange Google Pay token for MONEI Payment Token that can be used to confirm payment as described in step 3.

function processPayment(paymentData) {
// Encode Google Pay token as a base64 string
const token = window.btoa(paymentData.paymentMethodData.tokenizationData.token);
return monei.api
.createToken({
paymentId: '{{payment_id}}',
paymentMethod: {
googlePay: {
token: token
}
}
})
.then(function (result) {
return moneiTokenHandler(result.token);
});
}

Before you go live