Integrations

Google Pay™ - Integration Guide

Why Google Pay

Google Pay is a fast and secured method making payments on websites and terminals.

Start accepting Google Pay payments in your HPP page and terminals, it will allow your customers to make payments in a few clicks. By adding Google Pay you are simplifying the payment process for your customers.

More information in "About Google Pay"

Google Pay Benefits

• Convenience - Paying with Google Pay is easy and comfort, the payment doesn't involve any payment card directly, and can be completed in few clicks, all the payment information is stored inside the mobile wallet or in Google cloud and sent with the payment.

• Simplicity - By adding Google Pay as a payment you are drastically increase the probability of a payment being made.

• Security - Google Pay is a secured way to submit and process payments. Google Pay is utilizing security mechanisms and processes on multiple levels and protecting customers payment data and private information.

• Modern - Google Pay is a modern and technologically advanced way to make payments, in general today customers are seeking a way to make payments in a secure and fast manner and Google Pay is helping them.

• Global - Google Pay is supported all over the world. You can accept payments from any place on the planet.

How It Works

Adding card to mobile wallet - flow

Mobile wallet payment processing - flow

Google Pay Compatibility

• Payment methods that support Google Pay

Supported Browsers

• Google Chrome

• Apple Safari

• Microsoft Edge

• Mozilla Firefox

• Opera

• UCWeb UC Browser

Supported Card Networks

• VISA

• Master Card

• American Express

• Discover

Supported Card Authorization Methods

• Credit

• Debit

Supported Google Pay Authentication Methods

• 3DS (CRYPTOGRAM_3DS) - This authentication method is associated with cards stored as Android device tokens. Returned payment data includes a 3-D Secure (3DS) cryptogram generated on the device.

• FPAN (PAN_ONLY) - This authentication method is associated with payment cards stored on file with the user's Google Account. Returned payment data includes personal account number (PAN) with the expiration month and the expiration year.

Add Google Pay to Hosted Payment Page

Checklist

• All merchants must adhere to the Google Pay APIs Acceptable Use Policy and accept the terms defined in the Google Pay API Terms of Service

• If you don't have a Google Pay merchant id, please sign up for Google Pay business account

• Please read the Google Pay Web developer documentation, Google Pay Web integration checklist and the Google Pay Web brand guidelines

• Prepare the hosted payment page template htmlHosted Payment Page

• Add the following meta tag element to the template header section: [copy]

  <meta name="google-pay-context" content="{{googlePayContext}}">

• Add the following two script files to the template header section: [copy]

  • /hpp/scripts/pageLinkService.min.js Script File

  • /hpp/scripts/axiaGooglePay.min.js Script File

  <script type="text/javascript" src="/hpp/Scripts/pageLinkService.min.js"></script> <script type="text/javascript" src="/hpp/Scripts/axiaGooglePay.min.js"></script>

• Add a <div> element to the template, with the name="google-pay-button", in place where you want to display the Google Pay button [copy]

  <div name="google-pay-button"></div>

• You can also add the following attributes to the payment button element in order to customize it's appearance [copy]

  • button-color: 'default', 'black', 'white'

  • button-type: 'plain', 'long', 'short'

  • button-size-mode: 'static', 'fill'

  <div name="google-pay-button" button-type="long" button-color="black" button-size-mode="fill"></div>

• Ensure Google Pay button uses all approved branding - Brand Guidelinesfor Google Pay Button

• Upload the template by using Hosted Payment Page template management console.

• Add the attribute "allowpaymentrequest" to the iframe element hosting the payment hosted page [copy]

  <iframe src="gateway-{environment}.paymentfusion.com/hpp/{{templateid}}" allowpaymentrequest></iframe>

• Contact Healthcare Omni-Channel Gateway integration support with the following information:

• Your Google Pay Merchant Id (The Merchant Id is located in the right top corner of you Google Pay business console) - more infoabout Google Pay Business Console

• Card authentication methods you want to support (more informationabout Card Authentication Methods).

• CRYPTOGRAM_3DS - Is used only on Android mobile phones from version: Lollipop (5.0) or higher) - if only this option is selected, the Google Pay will be enabled only for Android - Lollipop (5.0) or higher and only for cards, that were specifically tokenized on the used device.

• PAN_ONLY - Is used for card stored in the Google account, this method is supported on all the devices (Windows, IOS, OSX, Android).

Confirm if billing contact information is required

• Email

• Phone number

Address - Google Pay supports two billing address formats (please specify the required format)

• After AxiaMed integration support, confirms that everything is set according to requirements, test if Google Pay is available on your hosted payment page and you can complete the payment.

Payment Page

Wallet

Hosted Payment Page - Putting it's all together [copy]

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Google Pay - WEB</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="google-pay-context" content="{{googlePayContext}}" /> <script type="text/javascript" src="/hpp/Scripts/pageLinkService.min.js"></script> <script type="text/javascript" src="/hpp/Scripts/axiaGooglePay.min.js"></script> <script type="text/javascript"> window.onload = function () { document.getElementById('hostname').innerText = location.hostname; } </script> <style type="text/css"> .topcorner{ position:absolute; top:0; right:0; margin-top: 20px; } .button { font-size: 12px; font-weight:bold; cursor:pointer; padding: 11px 11px; display:inline-block; border-radius: 2px; width: 100%; -moz-border-radius: 2px;/*gecko - mozilla*/ -webkit-border-radius: 2px; /*new webkit - Chrome and Safari*/ box-shadow: #e3e3e3 0 1px 1px; -moz-box-shadow: 0px 1px 1px rgba(000,000,000,0.1), inset 0px 1px 1px rgba(255,255,255,0.7);/*gecko - mozilla*/ -webkit-box-shadow: 0px 1px 1px rgba(000,000,000,0.1), inset 0px 1px 1px rgba(255,255,255,0.7);/*new webkit - Chrome and Safari*/ behavior:url(PIE.htc); } .orange { text-shadow: 1px 1px 0px #ffe8b2; color: #7c5d1b; border: 1px solid #d6a437; background: #febd4b; /*fallback for non-CSS3 browsers*/ background: -webkit-gradient(linear, 0 0, 0 100%, from(#fed970) to(#febd4b)); /*old webkit*/ background: -webkit-linear-gradient(#fed970, #febd4b); /*new webkit*/ background: -moz-linear-gradient(#fed970, #febd4b); /*gecko*/ background: -ms-linear-gradient(#fed970, #febd4b); /*IE10*/ background: -o-linear-gradient(#fed970, #febd4b); /*opera 11.10+*/ background: linear-gradient(#fed970, #febd4b); /*future CSS3 browsers*/ -pie-background: linear-gradient(#fed970, #febd4b); /*PIE*/ } .orange:hover { background: #febd4b; /*fallback for non-CSS3 browsers*/ background: -webkit-gradient(linear, 0 0, 0 100%, from(#febd4b) to(#fed970)); /*old webkit*/ background: -webkit-linear-gradient(#febd4b, #fed970); /*new webkit*/ background: -moz-linear-gradient(#febd4b, #fed970); /*gecko*/ background: -ms-linear-gradient(#febd4b, #fed970); /*IE10*/ background: -o-linear-gradient(#febd4b, #fed970); /*opera 11.10+*/ background: linear-gradient(#febd4b, #fed970); /*future CSS3 browsers*/ -pie-background: linear-gradient(#febd4b, #fed970); /*PIE*/ } .formcontainer { width: 350px; } @media only screen and (max-width: 600px) { .formcontainer { width: 100% !important; } .topcorner{ display: none !important; } } </style> </head> <body> <div id="hostname" class="topcorner" onload="setHostname()"></div> <form name="hppform" action="" method="POST" autocomplete="off"> <table style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;" class="formcontainer"> <tr> <td>Payment Amount:</td> <td><input id="Amount" name="Amount" type="text" value="{{amount}}" readonly /></td> </tr> <tr> <td colspan="2"> <hr /> </td> </tr> <tr> <td>Card Type:</td> <td> <select id="cardType" name="cardType"> <option value="7">Visa</option> <option value="6">Master Card</option> <option value="1">American Express</option> </select> </td> </tr> <tr> <td>Name On Card:</td> <td><input id="nameOnCard" name="nameOnCard" class="customInfo" type="text" required /></td> </tr> <tr> <td>Card Number:</td> <td><input id="cardNumber" name="cardNumber" type="text" required /></td> </tr> <tr> <td>Expiration (MMYY):</td> <td><input id="cardExpiration" name="cardExpiration" type="text" required /></td> </tr> <tr> <td>CVV /Security Code:</td> <td><input id="cardCvv" name="cardCvv" type="text" /></td> </tr> <tr> <td colspan="2"> <hr /> </td> </tr> <tr> <td>Patient Name:</td> <td><input id="InvoiceNumber" name="InvoiceNumber" type="text" value="{{invoiceNumber}}" /></td> </tr> <tr> <td>Street Address:</td> <td><input id="billingAddress1" name="billingAddress1" class="customInfo" type="text" /></td> </tr> <tr> <td>City:</td> <td><input id="billingCity" name="billingCity" class="customInfo" type="text" /></td> </tr> <tr> <td>State:</td> <td> <select id="billingState" name="billingState" class="customInfo"> <option value="">Select One...</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District Of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> </select> </td> </tr> <tr> <td>Zip:</td> <td><input id="billingZip" name="billingZip" class="customInfo" type="text" /></td> </tr> <tr> <td colspan="2"> <hr /> </td> </tr> <tr> <td colspan="2"> <table style="width:100%;"> <tr> <td> <button type="submit" class="button orange">Pay</button> </td> </tr> <tr> <td style="vertical-align: top"> <div name="apple-pay-button" class="apple-pay-button apple-pay-button-hide apple-pay-button-black" style="width: 100%; height:42px; margin-top: 4px;"></div> </td> </tr> <tr> <td style="vertical-align: top"> <div name="google-pay-button" button-type="long" button-color="black" button-size-mode="fill" style="height:42px;"></div> </td> </tr> </table> </td> </tr> </table> <input type="hidden" name="paymentType" id="radPaymentTypeCredit" value="CREDIT" /> <input type="hidden" name="description" id="description" value="{{description}}" /> <input type="hidden" name="comment" id="comment" value="{{comment}}" /> {{#each customFields}} <input type="hidden" name="{{fqn}}" id="{{fqn}}" {{#minvalue}} min="{{.}}" {{/minvalue}} {{#maxvalue}} max="{{.}}" {{/maxvalue}} {{#maxlength}} maxlength="{{.}}" {{/maxlength}} {{#isrequired}} required{{/isrequired}} value="{{value}}" /> {{/each}} </form> </body> </html>