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 and Cybersource only.

Process Flow

  1. Access token is requested from the Connect-E REST API.
  2. User loads the page with the JavaScript package, and the access token is passed in.
  3. User loads the wallet, the access token is passed in with payment details and optionally additional information such as button config, require shipping/billing address, buyer's email, or wallet callback functions.
  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>
        <dt>Status Code</dt>
        <dd id="status-code"></dd>
        <dt>Auth Code</dt>
        <dd id="auth-code"></dd>
        <dd id="message"></dd>

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

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

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;

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

#errors li { color: #B00; }

Setup Connect-E Wallet


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=""></script>


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
required rootConfig
Config containing details of this payment and the styling of the payment button.
An optional callback to display validation errors. The supplied function is called when there is a validation state change or when an error happens when processing payment. This function is passed an array of Validation Error objects.
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
The type of validation error that has occurred.
Message detailing the validation error for displaying to the user.

Transaction Result

Property Description
Indicated the status of the transaction. 0 for a successful transaction.
If the transaction was successful, then the auth code is passed out here.
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.
40 Processing The transaction is currently being processed, please check status again. This status will only be seen from the REST API if called before the JavaScript promise resolves or the Webhook is called.
90 Revoked The access token was revoked while the cardholder was completing 3DS authentication. The transaction was stopped before being sent for processing.
99 Waiting Pre-execute The transaction has been paused pre-execution using the waitPreExecute flag; a call to resume the transaction is expected within 15 minutes.
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 access 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.


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

Root Config

Property Description
required string
The id of the div element where the payment details will be displayed.
required paymentDetails
Details of the payment to be made.
buttonConfig An optional button config. It defaults to colour black and type plain
An optional config to collect the buyer's email. It defaults to false.
An optional config to collect the buyer's billing address. It defaults to false.
An optional config to collect the buyer's shipping address. It defaults to false.
An optional function that is called once the iframe has been loaded and configured.
An optional function that is called if there is an error loading the iframe.
callbacks Object defining callback functions for various wallet events.

Payment Details

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

Property Description
required string
The access token supplied by the get access token api.

Button Config

Property Description
It defaults to black, but it can optionally be changed to white.
It defaults to plain (payment button without additional text), but it can optionally be changed to book (Book with GooglePay/ApplePay), buy, checkout, donate or order.

Wallet Payment Callbacks Config

Property Description
An optional function that is called if the user closes the wallet payment form without paying.
An optional function that is called when the wallet payment button is clicked.

Update Access Token

It may be useful to update the access token if the current access token has been consumed or expired. A new access token will need to be obtained from the REST API and passed as an object of payment details to the function.