Connect-E Checkout

Checkout is the easiest way to add Connect-E to your site, allow us to manage and style the payment form so you're up and running faster.

Process Flow

  1. Access token is requested from the Connect-E REST API.
  2. Load our Javascript into your page.
  3. Create a form with the access token as detailed below.
  4. When the user completes the payment, the form is posted to your server with the details of the outcome of the transaction.
  5. Confirm the status of the payment via the Connect-E REST API.

Example

Amount: 1.00 GBP
<form id="testForm" action="/CheckoutDemoComplete" method="post">    
    <script src="https://web.e.test.connect.paymentsense.cloud/assets/js/checkout.js"
        data-amount="100"
        data-access-token="@Model.AccessToken"
        data-currency-code="826"
        data-description="Demo Payment of 1.00 GBP"
        data-button-text="Start Payment"
        data-submit-button-text="Pay 1.00 GBP"
        class="connect-checkout-btn"></script>        
    
    <div>Amount: 1.00 GBP</div>
    
</form>
iframe { width: 100%; }
.connect-container { margin-top: 80px; }

Setup Connect-E Checkout

Load

Load checkout directly from our server and add the configuration parameters into the script tag. The following are supported.
Parameter Description
data-access-token
required string
The access_token returned from the create access token REST API.
data-amount
required string
The amount in the minor unit e.g. "100" for 1.00 GBP.
data-currency-code
required string
The three digit ISO- 4217 currency code for the currency. eg 826 for the United Kingdom
data-button-text
string
Optional text for the button to display the payment form. Defaults to Pay Now if not set.
data-submit-button-text
string
Optional text for the submit payment button. Defaults to Pay if not set.
data-description
string
Optional text for the header of the payment modal. Defaults to Pay if not set.
data-display-address
boolean
Option to collect the card address when submitting the payment. If set to true the address will be captured and posted to the form action when the transaction is complete.
data-display-email
boolean
Option to collect the email address when submitting the payment. If set to true the email address will be captured and posted to the form action when the transaction is complete.

Payment Complete

The payment is executed when the user fills out and submits the payment form displayed in the modal. Once the payment is complete the form is posted to the action specified on the form wrapping the script tag. The form is posted with the following fields in the body.
Field Description
connectStatusCode
string
Indicated the status of the transaction. 0 for a successful transaction.
connectAuthCode
string
If the transaction was successful, then the auth code is passed out here.

Card Address

If data-display-address is set to true the following fields will also be posted to the server. This address will be checked with the card issuer to provide additional security.

Field Description
connectBillingAddress1
string
Address line 1 entered into the payment form.
connectBillingAddress2
string
Address line 2 entered into the payment form.
connectBillingAddress3
string
Address line 3 entered into the payment form.
connectBillingAddress4
string
Address line 4 entered into the payment form.
connectBillingCity
string
City entered into the payment form.
connectBillingState
string
State entered into the payment form.
connectBillingPostcode
string
Postcode entered into the payment form.
connectBillingCountryCode
string
The three digit ISO 3166-1 code for the country select on the payment form.

Email Address

If data-display-email is set to true the following field will also be posted to the server. This email will be checked with the card issuer to provide additional security.

Field Description
connectUserEmailAddress
string
User's email address entered into the payment form.