Connect-E Wallet

Connect-E Wallet allows cardholders to check out with Apple Pay and Google Pay, providing a fast, simple and secure way to pay using the cards saved to their Google or Apple account.

Connect-E Wallet is currently available for Dojo only

Process Flow

  1. One time token is requested from the Connect-E REST API.
  2. User loads the page with the JavaScript package, and the token is passed in.
  3. User loads the wallet, the token is passed in with payment details and optionally additional information such as button config, require shipping/billing address, buyer's email.
  4. Payment button is displayed with payment data prefetched (it will auto detect which button to display based on the browser).
  5. User clicks the Payment button, the payment sheet will show up so the user can proceed selecting the card and optionally the shipping address if required by the merchant.
  6. After authorized payment, the encrypted token is sent to our servers to be decrypted and the payment is processed.
  7. After processed payment, the result is sent to payment complete callback.
  8. Confirm the status of the payment via the Connect-E REST API.

Payment Example

<div id="demo-payment-wallet"></div>
<div id="errors"></div>
<div id="demo-result" hidden>
    <h5>Payment Complete</h5>
    <dl>
        <dt>Status Code</dt>
        <dd id="status-code"></dd>
        <dt>Auth Code</dt>
        <dd id="auth-code"></dd>
        <dt>Message</dt>
        <dd id="message"></dd>
    </dl>
</div>

const config = {
    containerId: 'demo-payment-wallet',
    paymentDetails: {
        amount: '100',
        currencyCode: '826',
        countryCode: 'GB',
        paymentToken: /*access token here*/
    },
    buttonConfig: {
        color: 'black',
        type: 'plain'
    },
    emailRequired: true,
    billingAddressRequired: false,
    shippingAddressRequired: false
}

const wallet = new Connect.Wallet(config, paymentComplete, displayErrors);

function paymentComplete(response) {
    document.getElementById('demo-payment-wallet').hidden = true;
    document.getElementById('demo-result').hidden = false;
    document.getElementById('status-code').innerText = response.statusCode;
    document.getElementById('auth-code').innerText = response.authCode;
    document.getElementById('message').innerText = response.message;
}

function displayErrors(errors) {
    const errorsDiv = document.getElementById('errors');
    errorsDiv.innerHTML = '';

    if (errors && errors.length) {
        const list = document.createElement('ul');
        for (const error of errors){
            const item = document.createElement('li');
            item.innerText = error.message;
            list.appendChild(item);
        }
        errorsDiv.appendChild(list);
    }
}
                    

#demo-payment-wallet iframe { width: 100%; }

#errors li { color: #B00; }
                    

Setup Connect-E Wallet

Load

Connect-E can be loaded directly from our servers, this is the recommended way of loading our JavaScript to ensure the latest bug-fixes/patches. Any breaking changes will be released under a different url.
<script src="https://web.e.test.connect.paymentsense.cloud/assets/js/client.js"></script>

Initialise

To initialise an instance of connect-E Wallet call Connect.Wallet and pass in the configuration object with a payment executed callback and an optional reference to a callback to handle validation errors.
const wallet = new Connect.Wallet(config, displayErrorsCallback, onPaymentExecuted);
Parameter Description
config
required rootConfig
Config containing details of this payment and the styling of the payment button.
displayErrorsCallback
function
An optional callback to display text validation errors. The supplied function is called when there is a validation state change. This function is passed an array of Validation Error objects.
onPaymentExecuted
function
A callback that returns the result of payment. The supplied function is called when the payment is executed. This function is passed a Transaction Result object

Validation Error

Property Description
errorType
string
The type of validation error that has occurred.
message
string
Message detailing the validation error for displaying to the user.

Transaction Result

Property Description
statusCode
number
Indicated the status of the transaction. 0 for a successful transaction.
authCode
string
If the transaction was successful, then the auth code is passed out here.
message
string
This gives a more detailed description of the status of the transaction.

Status Code

Status Code Result Description
0 Successful The transaction was successful
3 Authorizing The card holder has not completed 3DS, this status will only be seen on the REST API.
4 Referred The card issuer has parked the transaction awaiting contact with the customer before proceeding to authorise or decline the transaction.
5 Declined The transaction was declined by the card issuer or acquiring bank.
20 Duplicate Transaction The transaction which was processed was a duplicate. Ensure each transaction has a unique OrderId.
30 Failed Error executing transaction.
400 Invalid Request The request has failed validation by our servers and the transaction has not been submitted to the gateway. Possible causes for this are invalid transaction type or other data in the request.
401 Issue with Access Token The access token being used is not valid, the transaction has not been submitted to the gateway. This can be caused if the token has already been used or the 30 minute expiry time has elapsed.
404 No Access Token Supplied No access token has been supplied to Connect-E. Transaction has not been submitted to the gateway
500 Internal Server Error There's been an error submitting the transaction, please check the REST API for the status of the transaction.

Config

This section details the fields that can/must be passed to Connect-E Wallet when it is initialised

Root Config

Property Description
containerId
required string
The id of the div element where the payment details will be displayed.
paymentDetails
required paymentDetails
Details of the payment to be made.
emailRequired
boolean
An optional config to collect the buyer's email. It defaults to false.
billingAddressRequired
boolean
An optional config to collect the buyer's billing address. It defaults to false.
shippingAddressRequired
boolean
An optional config to collect the buyer's shipping address. It defaults to false.
function
onIframeLoaded
An optional function that is called once the iframe has been loaded and configured.
function
onIframeLoadFailed
An optional function that is called if there is an error loading the iframe.

Payment Details

Note that these details must be the same as those passed to the REST API when creating an access token.

Property Description
amount
required string
The amount in the minor unit e.g. "100" for 1.00 GBP.
currencyCode
required string
The three digit ISO-4217 currency code for the currency. eg 826 for the United Kingdom
paymentToken
required string
The access token supplied by the get access token api.
countryCode
required string
The two-letter ISO 3166 country code, e.g. GB for the United Kingdom. This property is required for Apple Pay.

Button Config

Property Description
colour
string
It defaults to black, but it can optionally be changed to white.
type
string
It defaults to plain (payment button without additional text), but it can optionally be changed to buy (Buy with GooglePay/ApplePay).