Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Before going live with Google Pay in production each Merchant must register with Google in order to be assigned an official Google MerchantId. This MerchantId, along with the ConnexPay specific Gateway and GatewayMerchantId configurations will be entered in the ConnexPay SDK in order to successfully connect to GooglePay.

...

After you've fulfilled the exit criteria for each item in the Integration checklist, found here for Web or here for Android, click Manage integrations in console to begin the process to obtain production access.

Step 1 - Navigate to https://pay.google.com/business/console/

...


Step 2 -  Complete your business profile by providing the required business specific information for your account.

...

 

...

 

Step 3 - Complete Integration by providing your website’s payment URL and screenshots of the payment flow. Your API Integration type should be configured as Gateway. Once all required elements are complete, you may go ahead and ‘Submit for approval’ to submit your integration to Google.

...

ConnexPay WalletJS SDK for Google Pay

ConnexPay’s WalletJS is built to ease the integration of alternative Wallet payment methods into your desired payment flow by rendering supported payment buttons for major payment providers. The steps below will help you get started with the SDK.

1. Add ConnexPay’s Wallet JS to your payment page

...

Step 4 - Google will review the information provided and, if there are no issues, your profile will be approved and ready for Production use. At this point you can include the Google Merchant Id (found in the top right corner of the Business Console) in Step 6. Define Google Pay Configuration of the WalletSDK setup below.

...

ConnexPay WalletJS SDK for Google Pay

ConnexPay’s WalletJS is built to ease the integration of alternative Wallet payment methods into your desired payment flow by rendering supported payment buttons for major payment providers. The steps below will help you get started with the SDK.

1. Add ConnexPay’s Wallet JS to your payment page

WalletJS is a JavaScript library for rendering a variety of wallet payment facilities. The source is available directly from our servers (recommended) or can be downloaded and served locally. Just add the following script tag to your page to get started:

...

Info

NOTE: to use the wallet Google Pay functionality WITHOUT using the total Amount field which submits a Google Pay TotalPriceStatus of 'NOT_CURRENTLY_KNOWN', specify the id as "withOutAmount" and don't include an amount input.

Code Block
languagehtml
<div>

"withOutAmount" and don't include an amount input.

Code Block
languagehtml
<div>
    <h5>With Amount</h5>
    <label for="amount">
        Amount:
        <input
            type="text"
     <h5>With Amount</h5>     <label forid="amount">
            placeholder="Enter $ Amount:"
        />
    </label>
   <input
  <div style="margin-top: 0.5rem">
        <cxpay-wallet
 type="text"             idtype="amountgoogle"
            placeholderid="Enter $ AmountwithAmount"
        />
    </label>
    <div style="margin-top: 0.5rem">
        <cxpay-wallet
            type="google"
    ></cxpay-wallet>
    </div>
</div>

3. Implement the Callback Function

Create a callback function that will utltimately receive the needed token that is to be sent to the Connexpay Sales API

Code Block
languagejs
// the app callback function - expect to receive back a base64 encoded token
const logToken = (token) => {
    console.log(token);
    // use the id="withAmount"returned token in your call to the Connexpay Sales ></cxpay-wallet>
    </div>
</div>

3. Implement the Callback Function

...

API
};

4. Instantiate the CXPayWallet Object

Code Block
languagejs
const cpayWalletWithTotalPrice = CXPayWallet();

5. Define a configuration options object

Define a configuration options object to identify settings for the form inputs, in our case totalPriceElementId = "amount" and cxpayWalletId = "withAmount"

Code Block
languagejs
// the app callback function - expect to receive back a base64 encoded token
const logToken = (token) cpayWalletWithTotalPriceOptions => {
    console.log(token);
    totalPriceElementId: 'amount', // useid theof returnedelement tokenthat incaptures yourtransaction call to the Connexpay Sales API
};

4. Instantiate the CXPayWallet Object

Code Block
languagejs
const cpayWalletWithTotalPrice = CXPayWallet();

5. Define a configuration options object

...

amount
    cxpayWalletId: 'withAmount',
};

6. Define Google Pay Configuration

Instantiate the ConnexPay Google Pay config, supplying the needed values as noted in the config

Code Block
languagejs
const cpayWalletWithTotalPriceOptionsgooglePayConfigWithTotalAmount = {cpayWalletWithTotalPrice.CXPWalletGooglePayConfig(
        '<your ConnexPay merchant totalPriceElementId: 'amountid>', // id of element that captures transaction amountyour ConnexPay provided Merchant Id goes here
       cxpayWalletId: 'withAmount<your Google merchant id>', };

6. Define the Connexpay Google Pay Configuration

Instantiate the Connexapy Google Pay config, supplying the needed values as noted in the config

Code Block
languagejs
const googlePayConfigWithTotalAmount = cpayWalletWithTotalPrice.CXPWalletGooglePayConfig(// your Google provided Merchant Id from Step 4 of Google Merchant Registration
        '<your merchant id>name>', // your ConnexPay provided Merchant IdName goes here
        '<your<optional: merchant name>origin>', // your Merchant Name goes hereonly needed for hosted payment page scenarios, otherwise null
        'TEST', // Google Pay environment - switch to PRODUCTION when in production
        logToken, // name of callback function defined in step 2, that fires locally on complete of google pay process
        cpayWalletWithTotalPriceOptions // config object defined in step 4 above
    );

7. Initialize the Connexpay Wallet

...

Code Block
languagehtml
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>CXP Wallet Demo</title>
	</head>
	<body>
		<div style="width: 100%">
			<div
				style="
					margin-left: auto;
					margin-right: auto;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					text-align: center;
					min-height: 100vh;
				"
			>
				<div
					style="
						border: 1px solid #f0f0f0;
						min-width: 10rem;
						max-width: 20rem;
						padding: 2rem;
						font-family: Arial, Helvetica, sans-serif;
						font-weight: 600;
					"
				>
					<div>
						<h5>With Amount</h5>
						<label for="amount">
							Amount:
							<input
								type="text"
								id="amount"
								placeholder="Enter $ Amount"
							/>
						</label>
						<div style="margin-top: 0.5rem">
							<cxpay-wallet
								type="google"
								id="withAmount"
							></cxpay-wallet>
						</div>
					</div>
				</div>
				<div
					id="tokenDiv"
					style="
						min-width: 40rem;
						max-width: 60rem;
						border: solid 1px #f0f0f0;
						background-color: #e0e0eb;
						border-radius: 0.75rem;
						padding: 0.5rem;
						margin-top: 0.5rem;
						display: none;
					"
				>
					<p
						id="token"
						style="
							word-break: break-word;
							font-family: monospace;
							text-align: left;
						"
					></p>
				</div>
			</div>
		</div>
        <script src="./cpaywallet.min.js"></script>
        <script>
            // the app callback function - expect to receive back a base64 encoded token
            const logToken = (token) => {
                console.log(token);
                document.getElementById('token').innerHTML = token;
                document.getElementById('tokenDiv').style.display = 'block';.style.display = 'block';
            };

            // instantiate global CXPayWallet const with Total price specified
            const cpayWalletWithTotalPrice };= CXPayWallet();

            const cpayWalletWithTotalPriceOptions //= instantiate{
global CXPayWallet const with Total price specified          totalPriceElementId: 'amount', // constid cpayWalletWithTotalPriceof = CXPayWallet();

 element that captures transaction amount
          const cpayWalletWithTotalPriceOptions = {   cxpayWalletId: 'withAmount',
            totalPriceElementId: 'amount', // id of element that captures transaction amount};

            // instantiate CXP Google Pay Config const
     cxpayWalletId: 'withAmount',      const googlePayConfigWithTotalAmount = cpayWalletWithTotalPrice.CXPWalletGooglePayConfig(
   };             '121212121212112', // ConnexPay merchant instantiateId
CXP Google Pay Config const            'ABC2EF6GHIJ2KLMN' const// googlePayConfigWithTotalAmountGoogle = cpayWalletWithTotalPrice.CXPWalletGooglePayConfig(merchant Id
                '121212121212112Test Merchant', // merchant IdName
                'Test Merchant'null, //  merchant Name origin (only needed for hosted payment page scenarios, otherwise null)
                'TEST', // Google Pay environment
                logToken, // callback function that fires locally on complete of google pay process
                cpayWalletWithTotalPriceOptions
            );

            // initialize the CXP Wallet with the Google Pay config
            cpayWalletWithTotalPrice.Init(googlePayConfigWithTotalAmount);
        </scipt>
	</body>
</html>

...