Connect-E Wallet

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Connect-E Wallet - Connect</title> <link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-touch-icon.png?v=dLJendOlMG"> <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png?v=dLJendOlMG"> <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png?v=dLJendOlMG"> <link rel="manifest" href="/favicons/site.webmanifest?v=dLJendOlMG"> <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg?v=dLJendOlMG" color="#e60975"> <link rel="shortcut icon" href="/favicons/favicon.ico?v=dLJendOlMG"> <meta name="apple-mobile-web-app-title" content="Paymentsense - Connect"> <meta name="application-name" content="Paymentsense - Connect"> <meta name="msapplication-TileColor" content="#e60975"> <meta name="theme-color" content="#ffffff"> <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" /> <link rel="stylesheet" href="/css/site.css?v=od0x-a5VJRY8lWP0uqeC7-jSkMaEc3-QdDKb4sqWCT4" /> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> </head> <body> <nav class="navbar navbar-fixed-top bg-white"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="/"> <img class="connect-docs-logo" src="/images/connect_docs_logo.png" alt="Paymentsense"/> </a> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/"> <img class="paymentsense-logo" src="/images/paymentsense-logo-dark.svg" alt="Paymentsense"/> </a> </div> <div id="navbar" class="navbar-collapse collapse navbar-hide bg-gray-fade"> <ul class="nav nav-pills nav-stacked menu-overview"> <li class="title"> <span class="collapse-button pull-right glyphicon glyphicon-chevron-down"></span> <div>Overview</div> </li> <li class="nav-stacked-item"> <a href="/">Introduction</a> </li> </ul> <ul class="nav nav-pills nav-stacked menu-rest-interface"> <li class="title"> <span class="collapse-button pull-right glyphicon glyphicon-chevron-down"></span> <div>REST Interface</div> </li> <li class="nav-stacked-item"> <a href="/rest/getting-started">Getting Started</a> </li> <li class="nav-stacked-item"> <a href="/rest/pac-transaction-flow">PAC Transaction Flow</a> </li> <li class="nav-stacked-item"> <a href="/rest/api">API</a> </li> <li class="nav-stacked-item"> <a href="/rest/error-messages">Built-in user messages</a> </li> <li class="nav-stacked-item"> <a href="/rest/changelog">Changelog</a> </li> </ul> <ul class="nav nav-pills nav-stacked menu-websockets-interface"> <li class="title"> <span class="collapse-button pull-right glyphicon glyphicon-chevron-down"></span> <div>WebSockets Interface</div> </li> <li class="nav-stacked-item"> <a href="/websockets/getting-started">Getting Started</a> </li> <li class="nav-stacked-item"> <a href="/websockets/pac-transaction-flow">PAC Transaction Flow</a> </li> <li class="nav-stacked-item"> <a href="/websockets/api">API</a> </li> <li class="nav-stacked-item"> <a href="/websockets/changelog">Changelog</a> </li> </ul> <ul class="nav nav-pills nav-stacked menu-next-steps"> <li class="title"> <span class="collapse-button pull-right glyphicon glyphicon-chevron-down"></span> <div>Next Steps</div> </li> <li class="nav-stacked-item"> <a href="/next-steps/integration-checklist">Integration Checklist</a> </li> <li class="nav-stacked-item"> <a href="/next-steps/qa-process">QA Process</a> </li> </ul> <ul class="nav nav-pills nav-stacked menu-help-support"> <li class="title"> <span class="collapse-button pull-right glyphicon glyphicon-chevron-down"></span> <div>Help & Support</div> </li> <li class="nav-stacked-item"> <a href="/pdq/test-cards">Test Cards</a> </li> <li class="nav-stacked-item"> <a href="/pdq/invoking-scenarios">Invoking Scenarios</a> </li> <li class="nav-stacked-item"> <a href="/faqs">FAQs</a> </li> </ul> <ul class="nav nav-pills nav-stacked menu-ingenico-guides"> <li class="title"> <span class="collapse-button pull-right glyphicon glyphicon-chevron-down"></span> <div>Ingenico PDQ Guides</div> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/ict-setup">iCT Setup</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/iwl-setup">iWL Setup</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/internet-connectivity">Checking Internet Connectivity</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/static-ip">Setting a Static IP Address</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/tms-call">Performing a TMS Call</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/pair-base">Pairing an iWL to a base</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/standalone-mode">Switching to Standalone Mode</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/supervisor-password">Changing the Supervisor Password</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/configuration-options">Configuration Options</a> </li> </ul> <ul class="nav nav-pills nav-stacked menu-connect-e"> <li class="title"> <span class="collapse-button pull-right glyphicon glyphicon-chevron-down"></span> <div>Connect-E</div> </li> <li class="nav-stacked-item"> <a href="/ConnectE/GettingStarted">Getting Started</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/PaymentsFlows">Payment Flows</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/BestPractice">Best Practices</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/Standard">Standard - One off Payment</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/RecurringPayment">Standard - Repeat Payment</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/WaitPreExecuteOneOffPayment">Wait Pre-execute - One off Payment</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/WaitPreExecuteRecurringPayment">Wait Pre-execute - Repeat Payment</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/SavePaymentMethodOneOffPayment">Save Payment Method - One off Payment</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/Checkout">Checkout</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/Wallet">Wallet</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/ApplePay">Apple Pay™</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/GooglePay">Google Pay™</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/Webhooks">Webhooks</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/RestApi">REST API</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/SettingUpTestAccount">Setup Test Account</a> </li> </ul> </div> </div> </nav> <div class="box bg-gray-fade"> <div class="flex-row header"> <div class="sidebar side-nav" role="navigation"> <ul class="nav nav-pills nav-stacked menu-overview"> <li class="title"> <span class="collapse-button pull-right glyphicon glyphicon-chevron-down"></span> <div>Overview</div> </li> <li class="nav-stacked-item"> <a href="/">Introduction</a> </li> </ul> <ul class="nav nav-pills nav-stacked menu-rest-interface"> <li class="title"> <span class="collapse-button pull-right glyphicon glyphicon-chevron-down"></span> <div>REST Interface</div> </li> <li class="nav-stacked-item"> <a href="/rest/getting-started">Getting Started</a> </li> <li class="nav-stacked-item"> <a href="/rest/pac-transaction-flow">PAC Transaction Flow</a> </li> <li class="nav-stacked-item"> <a href="/rest/api">API</a> </li> <li class="nav-stacked-item"> <a href="/rest/error-messages">Built-in user messages</a> </li> <li class="nav-stacked-item"> <a href="/rest/changelog">Changelog</a> </li> </ul> <ul class="nav nav-pills nav-stacked menu-websockets-interface"> <li class="title"> <span class="collapse-button pull-right glyphicon glyphicon-chevron-down"></span> <div>WebSockets Interface</div> </li> <li class="nav-stacked-item"> <a href="/websockets/getting-started">Getting Started</a> </li> <li class="nav-stacked-item"> <a href="/websockets/pac-transaction-flow">PAC Transaction Flow</a> </li> <li class="nav-stacked-item"> <a href="/websockets/api">API</a> </li> <li class="nav-stacked-item"> <a href="/websockets/changelog">Changelog</a> </li> </ul> <ul class="nav nav-pills nav-stacked menu-next-steps"> <li class="title"> <span class="collapse-button pull-right glyphicon glyphicon-chevron-down"></span> <div>Next Steps</div> </li> <li class="nav-stacked-item"> <a href="/next-steps/integration-checklist">Integration Checklist</a> </li> <li class="nav-stacked-item"> <a href="/next-steps/qa-process">QA Process</a> </li> </ul> <ul class="nav nav-pills nav-stacked menu-help-support"> <li class="title"> <span class="collapse-button pull-right glyphicon glyphicon-chevron-down"></span> <div>Help & Support</div> </li> <li class="nav-stacked-item"> <a href="/pdq/test-cards">Test Cards</a> </li> <li class="nav-stacked-item"> <a href="/pdq/invoking-scenarios">Invoking Scenarios</a> </li> <li class="nav-stacked-item"> <a href="/faqs">FAQs</a> </li> </ul> <ul class="nav nav-pills nav-stacked menu-ingenico-guides"> <li class="title"> <span class="collapse-button pull-right glyphicon glyphicon-chevron-down"></span> <div>Ingenico PDQ Guides</div> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/ict-setup">iCT Setup</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/iwl-setup">iWL Setup</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/internet-connectivity">Checking Internet Connectivity</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/static-ip">Setting a Static IP Address</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/tms-call">Performing a TMS Call</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/pair-base">Pairing an iWL to a base</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/standalone-mode">Switching to Standalone Mode</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/supervisor-password">Changing the Supervisor Password</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/software-version">Checking the Software Version</a> </li> <li class="nav-stacked-item"> <a href="/pdq/ingenico/configuration-options">Configuration Options</a> </li> </ul> <ul class="nav nav-pills nav-stacked menu-connect-e"> <li class="title"> <span class="collapse-button pull-right glyphicon glyphicon-chevron-down"></span> <div>Connect-E</div> </li> <li class="nav-stacked-item"> <a href="/ConnectE/GettingStarted">Getting Started</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/PaymentsFlows">Payment Flows</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/BestPractice">Best Practices</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/Standard">Standard - One off Payment</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/RecurringPayment">Standard - Repeat Payment</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/WaitPreExecuteOneOffPayment">Wait Pre-execute - One off Payment</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/WaitPreExecuteRecurringPayment">Wait Pre-execute - Repeat Payment</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/SavePaymentMethodOneOffPayment">Save Payment Method - One off Payment</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/Checkout">Checkout</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/Wallet">Wallet</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/ApplePay">Apple Pay™</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/GooglePay">Google Pay™</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/Webhooks">Webhooks</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/RestApi">REST API</a> </li> <li class="nav-stacked-item"> <a href="/ConnectE/SettingUpTestAccount">Setup Test Account</a> </li> </ul> </div> </div> <div class="flex-row content container-fluid main-content"> <div class="connect-e"> <h1 class="page-header">Connect-E Wallet</h1> <p>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.</p> <p>Connect-E Wallet is currently available for Dojo and Cybersource only.</p>  <section class="separated-text-section"> <h2>Process Flow</h2> <ol> <li>Access token is requested from the <a href="/ConnectE/RestApi">Connect-E REST API</a>.</li> <li>User <a href="#load">loads</a> the page with the JavaScript package, and the access token is passed in.</li> <li>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.</li> <li>Payment button is displayed with payment data prefetched (it will auto detect which button to display based on the browser).</li> <li>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.</li> <li>After authorized payment, the encrypted token is sent to our servers to be decrypted and the payment is processed.</li> <li>After processed payment, the result is sent to payment complete callback.</li> <li>Confirm the status of the payment via the <a href="/ConnectE/RestApi">Connect-E REST API</a>.</li> </ol> </section>   <section class="separated-text-section"> <h2>Payment Example</h2> <div>  <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#result" aria-controls="home" role="tab" data-toggle="tab">Result</a> </li> <li role="presentation"> <a href="#html" aria-controls="profile" role="tab" data-toggle="tab">HTML</a> </li> <li role="presentation"> <a href="#javaScript" aria-controls="settings" role="tab" data-toggle="tab">JavaScript</a> </li> <li role="presentation"> <a href="#css" aria-controls="messages" role="tab" data-toggle="tab">CSS</a> </li> </ul>  <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="result"> <div class="row"> <div class="col-sm-9 col-lg-6"> <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> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="html"> <pre><code class="html"><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></code></pre> </div> <div role="tabpanel" class="tab-pane" id="javaScript"> <pre><code> 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; list.appendChild(item); } errorsDiv.appendChild(list); } } </code></pre> </div> <div role="tabpanel" class="tab-pane" id="css"> <pre><code class="css"> #demo-payment-wallet iframe { width: 100%; } #errors li { color: #B00; } </code></pre> </div> </div> </div> </section>   <section class="separated-text-section"> <h2>Setup Connect-E Wallet</h2> <h3 id="load">Load</h3> 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. <pre><code><script src="https://web.e.test.connect.paymentsense.cloud/assets/js/client.js"></script></code></pre> <h3 id="initialise">Initialise</h3> To initialise an instance of Connect-E Wallet call <code>Connect.Wallet</code> and pass in the configuration object with a payment executed callback and an optional reference to a callback to handle validation errors. <pre><code class="javascript">const wallet = new Connect.Wallet(config, displayErrorsCallback, onPaymentExecuted);</code></pre> <table class="table-config"> <thead> <tr> <th>Parameter</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td> config <div class="text-muted"> <span class="label label-primary">required</span> <a href="#rootConfig">rootConfig</a> </div> </td> <td>Config containing details of this payment and the styling of the payment button.</td> </tr> <tr> <td> displayErrorsCallback <div class="text-muted"> function </div> </td> <td>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 <a validationError href="#validation-error">Validation Error</a> objects.</td> </tr> <tr> <td> onPaymentExecuted <div class="text-muted"> function </div> </td> <td>A callback that returns the result of payment. The supplied function is called when the payment is executed. This function is passed a <a transactionResult href="#transaction-result">Transaction Result</a> object.</td> </tr> </tbody> </table> <h4 id="validation-error">Validation Error</h4> <table class="table-config"> <thead> <tr> <th>Property</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td> errorType <div class="text-muted"> string </div> </td> <td>The type of validation error that has occurred. </td> </tr> <tr> <td> message <div class="text-muted"> string </div> </td> <td>Message detailing the validation error for displaying to the user.</td> </tr> </tbody> </table> <h4 id="transaction-result">Transaction Result</h4> <table class="table-config"> <thead> <tr> <th>Property</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td> <a href="#statusCode">statusCode</a> <div class="text-muted">number</div> </td> <td>Indicated the status of the transaction. <code>0</code> for a successful transaction.</td> </tr> <tr> <td> authCode <div class="text-muted">string</div> </td> <td>If the transaction was successful, then the auth code is passed out here.</td> </tr> <tr> <td> message <div class="text-muted">string</div> </td> <td>This gives a more detailed description of the status of the transaction.</td> </tr> </tbody> </table> <h4 id="statusCode">Status Code</h4> <table class="table-config"> <thead> <tr> <th>Status Code</th> <th>Result</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>0</td> <td>Successful</td> <td>The transaction was successful</td> </tr> <tr> <td>3</td> <td>Authorizing</td> <td>The card holder has not completed 3DS, this status will only be seen on the REST API.</td> </tr> <tr> <td>4</td> <td>Referred</td> <td>The card issuer has parked the transaction awaiting contact with the customer before proceeding to authorise or decline the transaction.</td> </tr> <tr> <td>5</td> <td>Declined</td> <td>The transaction was declined by the card issuer or acquiring bank.</td> </tr> <tr> <td>20</td> <td>Duplicate Transaction</td> <td>The transaction which was processed was a duplicate. Ensure each transaction has a unique OrderId.</td> </tr> <tr> <td>30</td> <td>Failed</td> <td>Error executing transaction.</td> </tr> <tr> <td>40</td> <td>Processing</td> <td>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.</td> </tr> <tr> <td>90</td> <td>Revoked</td> <td>The access token was revoked while the cardholder was completing 3DS authentication. The transaction was stopped before being sent for processing.</td> </tr> <tr> <td>99</td> <td>Waiting Pre-execute</td> <td>The transaction has been paused pre-execution using the <code>waitPreExecute</code> flag; a call to resume the transaction is expected within 15 minutes.</td> </tr> <tr> <td>400</td> <td>Invalid Request</td> <td>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.</td> </tr> <tr> <td>401</td> <td>Issue with Access Token</td> <td>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.</td> </tr> <tr> <td>404</td> <td>No Access Token Supplied</td> <td>No access token has been supplied to Connect-E. Transaction has not been submitted to the gateway</td> </tr> <tr> <td>500</td> <td>Internal Server Error</td> <td>There's been an error submitting the transaction, please check the REST API for the status of the transaction.</td> </tr> </tbody> </table> </section>   <section class="separated-text-section"> <h2>Config</h2> <p>This section details the fields that can/must be passed to Connect-E Wallet when it is initialised</p> <h4 id="rootConfig">Root Config</h4> <table class="table-config"> <thead> <tr> <th>Property</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td> containerId <div class="text-muted"><span class="label label-primary">required</span> string</div> </td> <td>The id of the <span class="text-code">div</span> element where the payment details will be displayed.</td> </tr> <tr> <td> paymentDetails <div class="text-muted"> <span class="label label-primary">required</span> <a href="#PaymentDetails">paymentDetails</a> </div> </td> <td>Details of the payment to be made.</td> </tr> <tr> <td> buttonConfig <div class="text-muted"> <a href="#buttonConfig">buttonConfig</a> </div> </td> <td>An optional button config. It defaults to colour black and type plain</td> </tr> <tr> <td> emailRequired <div class="text-muted">boolean</div> </td> <td>An optional config to collect the buyer's email. It defaults to false.</td> </tr> <tr> <td> billingAddressRequired <div class="text-muted">boolean</div> </td> <td>An optional config to collect the buyer's billing address. It defaults to false.</td> </tr> <tr> <td> shippingAddressRequired <div class="text-muted">boolean</div> </td> <td>An optional config to collect the buyer's shipping address. It defaults to false.</td> </tr> <tr> <td> onIframeLoaded <div class="text-muted"> function </div> </td> <td>An optional function that is called once the iframe has been loaded and configured.</td> </tr> <tr> <td> onIframeLoadFailed <div class="text-muted"> function </div> </td> <td>An optional function that is called if there is an error loading the iframe.</td> </tr> <tr> <td> callbacks <div class="text-muted"> <div class="text-muted"> <a href="#WalletPaymentCallbacksConfig">walletPaymentCallbacksConfig</a> </div> </div> </td> <td>Object defining callback functions for various wallet events.</td> </tr> </tbody> </table> <h4 id="PaymentDetails">Payment Details</h4> <p>Note that these details must be the same as those passed to the REST API when creating an access token.</p> <table class="table-config"> <thead> <tr> <th>Property</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td> paymentToken <div class="text-muted"><span class="label label-primary">required</span> string</div> </td> <td>The access token supplied by the get access token api.</td> </tr> </tbody> </table> <h4 id="buttonConfig">Button Config</h4> <table class="table-config"> <thead> <tr> <th>Property</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td> colour <div class="text-muted">string</div> </td> <td>It defaults to <b>black</b>, but it can optionally be changed to <b>white</b>.</td> </tr> <tr> <td> type <div class="text-muted">string</div> </td> <td>It defaults to <b>plain</b> (payment button without additional text), but it can optionally be changed to <b>book</b> (Book with GooglePay/ApplePay), <b>buy</b>, <b>checkout</b>, <b>donate</b> or <b>order</b>.</td> </tr> </tbody> </table> <h4 id="WalletPaymentCallbacksConfig">Wallet Payment Callbacks Config</h4> <table class="table-config"> <thead> <tr> <th>Property</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td> onPaymentCancelled <div class="text-muted"> function </div> </td> <td> An optional function that is called if the user closes the wallet payment form without paying. </td> </tr> <tr> <td> onPaymentInitiated <div class="text-muted"> function </div> </td> <td> An optional function that is called when the wallet payment button is clicked. </td> </tr> </tbody> </table> </section>   <section> <h2>Update Access Token</h2> <p>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 <a href="#PaymentDetails">payment details</a> to the function.</p> <pre><code class="javascript hljs">wallet.updateAccessToken(paymentDetails);</code></pre> </section>  </div> </div> </div> <script src="/lib/jquery/dist/jquery.js"></script> <script src="/lib/bootstrap/dist/js/bootstrap.js"></script> <script src="/js/site.js?v=EJoUa2zJf1jD2gOSD-bFxcqjh7BTi3T8Syelg9L4Zs4"></script> <script> (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-102643555-1', 'auto'); ga('send', 'pageview'); </script> <script src="https://web.e.test.connect.paymentsense.cloud/assets/js/client.js"></script> <script> const config = { containerId: "demo-payment-wallet", paymentDetails: { paymentToken: 'bkLKhoaoui-6vb11owcnSCY6R19IUAFM0I5TXfIo2iAAthm5tL026hrt42zXSKrDJAyUsVJ_ls2iPhbUgeh8nOvS_I9MGIa1x52nmcz5snC29XjcABo6uuzIzc4O-9PoUhAfeohbQFdGsbIwwQ==' }, 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; list.appendChild(item); } errorsDiv.appendChild(list); } } </script> <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.13.1/build/styles/default.min.css"> <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.13.1/build/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad();</script> </body> </html>

CINXE.COM

Connect-E Wallet - Connect