Getting started with Google Pay

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.

  You will need to create a Google Pay business account for when you’re ready to switch from environment TEST to PRODUCTION. Registering with the Google Pay Business Console.

Please note down the Google merchant identifier issued after registration. This will be needed during the configuration of Google Pay.

 

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