ConnexPay WalletJS

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 wallet 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:

<script async src=”https://js.connexpay.com/1.0.0/cpaywallet.min.js”></script>

2. Markup

In your HTML form markup, add the field to capture the amount of the payment and the CXPAY-WALLET element. In the following example, we are asking the Google Pay button to be used and the button is expecting the "withAmount" flag.

📘

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.

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

3. Implement the Callback Function

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

// the app callback function - expect to receive back a base64 encoded token
const logToken = (token) => {
    console.log(token);
    // use the returned token in your call to the ConnexPay Sales API
};

4. Instantiate the ConnexPay Wallet Object

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"

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

6. Define the ConnexPay Google Pay Configuration

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

const googlePayConfigWithTotalAmount = cpayWalletWithTotalPrice.CXPWalletGooglePayConfig(
        '<your Connexpay merchant id>', // your Connexpay Merchant Id goes here
        '<your GooglePay merchant id>', // your GooglePay Merchant Id (only needed when environment is set to PRODUCTION, otherwise set to null)
        '<your merchant name>', // your Google Pay Merchant Name goes here
        '<your merchant origin>', // only needed if hosting your payment page in a seperate application otherwise set to null
        'TEST', // Google Pay environment - switch to PRODUCTION when in production
        logToken, // callback function defined in step 2, that fires locally on complete of google pay process
        cpayWalletWithTotalPriceOptions // config object defined in step 4
        );

7. Initialize the ConnexPay Wallet

cpayWalletWithTotalPrice.Init(googlePayConfigWithTotalAmount);

If successful and the payer is using a supported browser or device, a GPay button will be rendered allowing the payer to select from any of the available payment facilities in their Google wallet.

Upon selection of a payment card, GooglePay will encrypt the card details and return apaymentData object back to you via a callback function that you will provide in step 3 below.

8. Pass payment token to ConnexPay Sales API

The tokencaptured in the callback from step 3 above is a Base64 encoded representation of the paymentData response from Google. This token can be included in the ConnexPay Create Sales request in lieu of the standard CardNumber, Cvv2 and ExpirationDate data via the new wallet parameters. The walletobject includes fields to specify the type of wallet payment and the Base64 encoded token. This token is treated just like a standard customer credit card and processed through the ConnexPay payment gateway, providing a real-time Approve/Decline response.

Reference: https://developers.connexpay.com/#create-sale

POST https://sandboxsalesapi.connexpay.com/api/v1/sales
Create Sale : Sample Request
{
    "DeviceGuid": "{{Device}}",
    "Amount": 150.00,
    "OrderNumber": "{{timestamp}}-TEST",
    "SequenceNumber": "SEQ-{{timestamp}}",
    "ConnexPayTransaction": {
        "ExpectedPayments": 10
    },
    "Card": {
        "wallet": {
            "type": "google",
            "token": "eyJzaWduYXR1cmUiOiJNRVFDSUFaV0p5L2hNTEFNdklzWTcyakZ4b2VwamNZUXNHVnJwRlNSVy9xOHFLUndBaUJFaTNnZzBIVXQ4VXM1UE9zSzZ4QzF0bWY4R0dHdGZoWGZpcTQwazVYa0VRXHUwMDNkXHUwMDNkIiwiaW50ZXJtZWRpYXRlU2lnbmluZ0tleSI6eyJzaWduZWRLZXkiOiJ7XCJrZXlWYWx1ZVwiOlwiTUZrd0V3WUhLb1pJemowQ0FRWUlLb1pJemowREFRY0RRZ0FFQlo0Y1l5TW1pMG0vdzdSRGdyNXplSk5OSWdjY05UMFN6WFM5Znk1R0J5WGFXaXJPWmRlVjhUNnBSSEYxQWZid0lLOGVyZDJhdFoyQjdIZXA3YzVzUHdcXHUwMDNkXFx1MDAzZFwiLFwia2V5RXhwaXJhdGlvblwiOlwiMTYwMzM4ODEwMTQyMVwifSIsInNpZ25hdHVyZXMiOlsiTUVZQ0lRRGQ1ZXFNNU5UU09aYUJwbHpGVmVQaHVQcEh5Q3hwQUFuVUw1R3hHV3M1UGdJaEFNOXI2eW1FZnpwSFV1d2lSdzVEUE8xekZZQld3NGxXd29GV1ZFcEpxSVFRIl19LCJwcm90b2NvbFZlcnNpb24iOiJFQ3YyIiwic2lnbmVkTWVzc2FnZSI6IntcImVuY3J5cHRlZE1lc3NhZ2VcIjpcIkhUK2N4SVdHNVR2NS9hUGZkdmNaR2xQeEJoYWRjemVwRGNHYjUzeDRqSlpnSGlkU3ZsVlUrWnFDeDA1NStoRVIxeithQXB2cU5MRVo4T2hZeG9vNUIzT2U3ZjJzZzdneFpEM3RzUGhsZ0pHK1RwWHQ3UjdqU1lNMDArOTJObDFySjBjSXRuU0RDcHBPRWgxSkFReFFzZmp3UGNTb0Z4emlWVFBraVAxTWlRZGtNZE1jTDJWVGljdjRCMXJpN0ROTDNLZVFIVVNnZ01hYnVaZExZbVM2Sko1blZNYkw0ZXRxaHduZ3ZTMTd0Qit5SzJ1bTF2VU0vNS9aaU0xQkNBSThza2ZrQkdvN2g4OHl5bHUwTFY0OEh3NUhyeExtRFlBVmdLWTRLQjdnNkN3bVV5bWNkS1NKaHU0R2d5NVNFVHhCT3Q1UEgwMTNOeHArN2tEZlF5ZExMalJLdmdrNFF4MTBndEJBd2kwdVdhdmV0Tmw3dWdWV0hzTGlkQmF4bFVUWE1DVlYxWmV6WnJzMXdUMjhKTnhCVlZpWkNSOHdpZm1sS002YTE2Y0VpYXc5NXBoVko1ZXUyRW9kb2E0aERWQkFmRGd5VUlBd1dXN3pqNVJDNko1L0ZKQVIvVnFBMWhtTUNSK0lJLzlkSkFcXHUwMDNkXFx1MDAzZFwiLFwiZXBoZW1lcmFsUHVibGljS2V5XCI6XCJCRUxSVnFEZWJPT0c5RmJQUVdrN05LSm9vVElRUGRCQU12elcvWlMrWEwrcStseUU3K0xMNWRJcDJUSHp0eGg5Z2lyZ2RkS1MreVltekRWZjhPN1g0Y3NcXHUwMDNkXCIsXCJ0YWdcIjpcImNXeGtRdzVXMFdQOUUzeDNxa3ZyRXhNTEFHYWtha0ZlenVUb2pKUzVLYW9cXHUwMDNkXCJ9In0="
        }
    }
}

The following is a complete code example that also demonstrates how two wallet buttons would be rendered to the screen.

<!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';
            };

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

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

            // instantiate CXP Google Pay Config const
            const googlePayConfigWithTotalAmount = cpayWalletWithTotalPrice.CXPWalletGooglePayConfig(
                '121212121212112', // connexpay merchant Id
                null, // google Merchant Id (only needed when environment is set to production, otherwise null)
                'Test Merchant', // merchant Name
                null, // merchant 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>

Did this page help you?