Trust Payments hosts a publicly-accessible JavaScript Library that you can embed in your checkout to allow your web-app solution to accept payments with Google Pay.
To begin your integration you will need to confirm/request the following details from our Support Team:
- Confirm your acquiring bank supports Google Pay as a payment option.
- Request a test and live site reference, with Google Pay added as an enabled feature and enable 3-D Secure for both test and live accounts.
- Request a JWT username & secret key linked to your test site reference.
Set up your Google account for testing
To begin testing Google Pay when targeting a test environment, you will need a Google account and you will need to join a group Google provides that allows you to use a set of API test cards for testing your Google Pay solution.
- Once you have registered a Google account, sign in to the account in your browser, navigate to the following page:
https://groups.google.com/g/googlepay-test-mode-stub-data -
Then click "Join group".
-
Once you have set your preferences, click "Join group".
-
You will be presented with a page that confirms you have been granted access to the Google test suite:
-
To ensure this is working, Google provide a demo page where you can click a Google Pay button to view the payment form.
Click here to open this in a new tab (link to external site).If everything is working as expected, you should be able to select any of the example payment methods and click "CONTINUE". This will process a test payment.
Configuring your payment checkout
Ensure you have completed all of the steps above before proceeding.
-
Include a link to our v3 JS library in your web page
<script src=<DOMAIN>/js/v3/st.js></script>
For<DOMAIN>, please refer to the information found under the JavaScript Library / Webservices API heading on this page. -
For the Google Pay button to appear on screen on initialisation, you must include a div in your html source with an id that is configured in the subsequent steps of this guide <div id="st-google-pay"></div>
-
The st.js library will require you to have a form with the following id <form id="st-form"/> - The name of the id can be modified by setting property stform in the SecureTrading config.
-
The notification frame is an optional div that can be added to your page to display a success, error or cancel message to the customer on payment completion. If you find the messaging useful, you may wish to alter the text. This can be done using the translations property set in the SecureTrading config. Click here to learn more.
<html>
<head>
</head>
<body>
<div id="st-notification-frame"></div>
<form id="st-form" action="https://www.example.com"/>
<div id="st-google-pay"></div>
<script src="<CDN_DOMAIN>"></script>
<script>
(function() {
var st = SecureTrading({
<! -- st.js configuration -->
});
st.GooglePay({
<! -- Google Pay configuration -->
});
})();
</script>
</body>
</html>
Replace <CDN_DOMAIN> with a supported domain. Click here for a full list.
Initialise st.js library
When initialising the st.js library, you must set property jwt, with a JSON Web Token generated on your server side.
JSON Web Tokens (JWT) are an open, industry standard RFC 7519 method for securely transmitting data between two parties. It protects against the modification of critical transaction data (e.g. the amount to be debited) by unauthorised parties during the payment session.
If you have yet to receive a JWT username and secret key, as described in the getting started section, please get in touch with our Support Team.
Click here to learn more about JWTs - We strongly advise to use a third party library when generating a JWT on your backend server, to avoid having to create your own JWT encoding and decoding methods.
<html>
<head>
</head>
<body>
<div id="st-notification-frame"></div>
<form id="st-form" action="https://www.example.com"/>
<div id="st-google-pay"></div>
<script src="<CDN_DOMAIN>"></script>
<script>
(function() {
var st = SecureTrading({
jwt : 'INSERT YOUR JWT HERE'
});
st.GooglePay({
<! -- Google Pay configuration -->
});
})();
</script>
</body>
</html>
Replace <CDN_DOMAIN> with a supported domain. Click here for a full list.
Initialise Google Pay
The following example shows a basic Google Pay configuration that includes the required fields.
st.GooglePay({
"buttonOptions": {
"buttonRootNode": "st-google-pay"
},
"paymentRequest": {
"allowedPaymentMethods": [{
"parameters": {
"allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],
"allowedCardNetworks": ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"]
},
"tokenizationSpecification": {
"parameters": {
"gateway": "trustpayments",
"gatewayMerchantId": "test_site12345"
},
"type": "PAYMENT_GATEWAY"
},
"type": "CARD"
}],
"environment":"TEST",
"apiVersion": 2,
"apiVersionMinor": 0,
"merchantInfo": {
"merchantId": "<e.g. 1234567890>"
},
"transactionInfo": {
"countryCode": "US",
"currencyCode": "USD",
"checkoutOption": "COMPLETE_IMMEDIATE_PURCHASE",
"totalPriceStatus": "FINAL",
"totalPrice": "10.00",
"displayItems": [{
"label": "Example item",
"price": "10.00",
"type": "LINE_ITEM",
"status": "FINAL"
}]
}
}
});
The following are additional considerations that are specific to your Trust Payments account:
| Property | Format | Description | |
| allowedCardNetworks | List |
The supported values for this property will depend on the payment methods supported on your Trust Payments account. |
|
| gatewayMerchantId | String |
The Trust Payments site reference configured in the Google Pay manager instance acts as your gateway merchant Id. When you are ready to move to the PRODUCTION environment, the gatewayMerchantId must be set to your live site reference. |
|
| gateway | String |
In your configuration, please set the property with value “trustpayments”. |
Processing a payment
Having completed the steps above, the mark-up of your checkout page should resemble the following example, allowing you to complete a Google Pay payment in the TEST environment.
<html>
<head>
</head>
<body>
<div id="st-notification-frame"></div>
<form id="st-form" action="https://www.example.com"/>
<div id="st-google-pay"></div>
<script src="<CDN_DOMAIN>"></script>
<script>
(function() {
var st = SecureTrading({
jwt: 'INSERT YOUR JWT HERE',
});
st.GooglePay({
"buttonOptions": {
"buttonRootNode": "st-google-pay"
},
"paymentRequest": {
"allowedPaymentMethods": [{
"parameters": {
"allowedAuthMethods": ["PAN_ONLY", "CRYPTOGRAM_3DS"],
"allowedCardNetworks": ["AMEX", "DISCOVER", "JCB", "MASTERCARD", "VISA"]
},
"tokenizationSpecification": {
"parameters": {
"gateway": "trustpayments",
"gatewayMerchantId": "test_site12345"
},
"type": "PAYMENT_GATEWAY"
},
"type": "CARD"
}],
"environment":"TEST",
"apiVersion": 2,
"apiVersionMinor": 0,
"merchantInfo": {
"merchantId": "<e.g. 1234567890>"
},
"transactionInfo": {
"countryCode": "US",
"currencyCode": "USD",
"checkoutOption": "COMPLETE_IMMEDIATE_PURCHASE",
"totalPriceStatus": "FINAL",
"totalPrice": "10.00",
"displayItems": [{
"label": "Example item",
"price": "10.00",
"type": "LINE_ITEM",
"status": "FINAL"
}]
}
}
});
})();
</script>
</body>
</html> Replace <CDN_DOMAIN> with a supported domain. Click here for a full list.