CardPointe Integration Phase 2: Google Pay Implementation

Starting release 7.2, Google Pay has been integrated into Aptify CardPointe payment platform in Aptify eBusiness 7.x application. Google Pay is a digital wallet and payment platform from Google that allows users to make quick, easy, and secure transaction using compatible devices.

The integration of Google Pay acceptance and CardSecure tokenization enables Aptify customers to pay quickly and securely using payment data stored in a Google Pay wallet. CardSecure handles the decryption and tokenization of the customer's payment data while Google Pay enables a quick, seamless checkout experience. 

Note:  The Saved Payment Method is not supported with Google Pay

Below topics cover the setup and configuration details to integrate Google Pay with Aptify using CardPointe payment platform.

• Creating new Payment Type for Google Pay
• Configuring the CardPointe merchant account for Google Pay

• Configuring e-Business 7.x Frontend

• Making payment on e-Business 7.x using Google Pay

• Google Pay Backend Implementation details

Creating a new Payment Type for Google Pay

Note: Below steps are common for both the Aptify Web and Aptify Smart Client applications.

1. Log in to Aptify as an "Admin User".
2. Go to Order Entry Administration Application.
3. Right click Payment Types service and select the "New Payment Types Record" option.
4. Enter the following details:
   
   1. Name - As per your choice
   2. Type - Google Pay
   3. Select the Inflow, Active, Web Enabled checkboxes as per your requirement.
   4. Enter the required information in the other tabs to complete the payment type setup.
   5. Save and close the record. 
      
      

Configuring the CardPointe Merchant Account for Google Pay

1. Log in to Aptify as an "Admin User".
2. Go to the Order Entry Administration Application.
3. Select CardPointe Merchant Account
4. In the Payment Types tab, add the necessary payment types to be used for payment, including the newly created payment type for the Google Pay. 
5. Save and close the record.

Configuring e-Business 7.x Frontend

Configure the below merchant related configurations in the Frontend config file ebConfig.js located under ..js\configuration

eb_Config.CardConnectMerchantId = 'yourcardconnectmerchantid'
eb_Config.CardConnectMerchantName= 'yourcardconnectmerchantname'
eb_Config.GPayButtonSettings = "Customizable option for GPay button"

• Valid values for buttonColor attribute are "default, black, white."
• Valid values for buttonType are "book, buy, checkout, donate, order, pay, plain, subscribe."

Making payment on e-Business 7.x using Google Pay

Below steps demonstrate a payment process using Google Pay for Shopping Carts Checkout process.

1. Log in to e-Business 7.x
2. Add a product to the cart and navigate to the Checkout Page.
3. Under Choose your payment method, expand GPay option, Pay with GPay button is displayed. 
   
   
   
4. Click Pay with GPay, a Google Payment Form is displayed.
   
   • If you are already logged in your Google account in browser, it directly displays the list of Payments which are on your GPay.
   • If you are not already logged in with Google account, it prompts you to login to your Google account, after login a list of Cards on your Google Pay account is displayed.
     
     Below screenshot displays details of a Test card for documentation purpose.
     
5. Make the payment, this invokes the tokenize endpoint and Checkout by GPay endpoint and the order is completed. The user is navigated to the Order Confirmation Page.
   

Below is the flow of the events that take place while making payments using Google Pay: 

1. When user clicks on "Pay with GPay" button, Google Payment Form is presented, on making the payment, this form returns an encrypted Google Pay payload.
2. Aptify fetches the encrypted Google Pay payload and passes it to CardSecure using Tokenize endpoint.
3. CardSecure decrypts and tokenizes the data. The result of tokenization is a CardSecure Token.
4. The CardSecure Token is sent to the CardPointe using endpoint layer, for authorization/capture etc.

Google Pay implementation details

Endpoint details

For Google Pay integration with e-Business 7.x, JSON endpoints have been created in the SOA layer. The endpoints interact with the CardPointe Merchant and are responsible for processing the Order, Payment's etcetera in Aptify.

Below are the details of the endpoints:

• Tokenize endpoint - POST v1/CardPointe/ccn/tokenize
  This is base endpoint for generating the CardPointe token. This is a POST endpoint, which takes the Data returned by the Google from the (iFrame) and returns the CardPointe token. This token is later passed in the Authorization/Capture request to the CardPointe.
  
  The tokenize endpoint is invoked on every call wherever payment is made using Google Pay. For example, on checkout page, when user clicks Pay By GPay, and makes payment on Google form, this tokenize endpoint is called, which returns the CardPointe token and then it calls the Checkout/GPay endpoint passing in this token in the body of the request.
  
• Non admin endpoints are as below:
  POST v1/ShoppingCarts/Checkout/GPay
  POST v1/ProfilePersons/{id}/OrderHistory/MakePayment/GPay
  POST v1/Fundraising/Checkout/GPay
  POST v1/MembershipApplication/Checkout/GPay
•  Admin endpoints are as below:
  POST v1/admin/company/{id}/ShoppingCarts/Checkout/GPay
  POST v1/admin/company/{id}/OrderHistory/MakePayment/GPay

Frontend details

• Frontend implementation is done by referring to https://pay.google.com/gp/p/js/pay.js, and building Aptify.GPay.js wrapper js which invokes the methods of Google Pay JS 
• On the landing pages of the Google Pay option, Google Pay Panel has been loaded, which has Pay By GPay button and is responsible for making payments on Google Payment Form