Connect-E Checkout

Process Flow

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

Example

<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.
data-display-phone-number boolean	Option to collect the phone number when submitting the payment. If set to `true` the phone number 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.