Getting started with Google Pay for JavaScript Library

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.

  1. 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
  2. Then click "Join group".

    googlepay-gettingstarted-0411-01-en.png


  3. Once you have set your preferences, click "Join group".

    googlepay-gettingstarted-0411-02-en.png


  4. You will be presented with a page that confirms you have been granted access to the Google test suite:

    googlepay-gettingstarted-0411-03-en.png


  5. 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.

    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.

    googlepay-gettingstarted-0411-04-en.png

 

Configuring your payment checkout

  Ensure you have completed all of the steps above before proceeding.

  1. 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.

  2. 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>

  3. 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.

  4. 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=<DOMAIN>/js/v3/st.js></script>
<script>
(function() {
var st = SecureTrading({ 
<! -- st.js configuration -->      
}); 
st.GooglePay({
<! -- Google Pay configuration -->
});
})();
</script>
</body>
</html>

 

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=<DOMAIN>/js/v3/st.js></script>
<script>
(function() {
var st = SecureTrading({ 
jwt : 'INSERT YOUR JWT HERE'     
}); 
st.GooglePay({
<! -- Google Pay configuration -->
});
})();
</script>
</body>
</html>

 

Initialise Google Pay

The following example shows a basic Google Pay configuration that includes the required fields.

  While the example below contains what you need to get started, you can tailor the Google Pay checkout to better fit your needs with optional fields. For a full list of properties provided by Google Pay, please visit their API documentation:
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
table-required.png allowedCardNetworks List

The supported values for this property will depend on the payment methods supported on your Trust Payments account.

Please contact our Support Team to confirm.

table-required.png 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.

table-required.png 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=<DOMAIN>/js/v3/st.js></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>

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request