Connect-E - Standard
This section describes how to add Connect-E to your site with custom styling.
Process Flow
- One time token is requested from the Connect-E REST API.
- User loads page with JavaScript package, and the token is passed in.
- iFrame is initialised to collect payment details.
- Once the payment form is filled out and the user clicks submit. The execute function is called and a JavaScript promise is returned.
- If 3D secure is required, a modal is displayed for the user to enter their details.
- The promise resolves with the outcome of the transaction, including status code and auth code.
Web Payment Example
<div id="demo-payment"></div>
<div id="errors"></div>
<button id="testPay" class="btn-primary btn pull-right"
data-loading-text="Processing...">Pay</button>
<div id="demo-result" style="display: none">
<h5>Payment Complete</h5>
<dl>
<dt>Status Code</dt>
<dd id="status-code"></dd>
<dt>Auth Code</dt>
<dd id="auth-code"></dd>
</dl>
</div>
var config = {
paymentDetails: {
amount: "100",
currencyCode: "826",
paymentToken: /*access token here*/
},
containerId: "demo-payment",
fontCss: ['https://fonts.googleapis.com/css?family=Do+Hyeon'],
styles: {
base: {
default: {
color: "black",
textDecoration: "none",
fontFamily: "'Do Hyeon', sans-serif",
boxSizing: "border-box",
padding: ".375rem .75rem",
boxShadow: 'none',
fontSize: '1rem',
borderRadius: '.25rem',
lineHeight: '1.5',
backgroundColor: '#fff',
},
focus: {
color: '#495057',
borderColor: '#80bdff',
},
error: {
color: "#B00",
borderColor: "#B00"
},
valid: {
color: "green",
borderColor: 'green'
},
label: {
display: 'none'
}
},
cv2: {
container: {
width: "25%",
float: "left",
boxSizing: "border-box"
},
default: {
borderRadius: "0 .25rem .25rem 0"
}
},
expiryDate: {
container: {
width: "25%",
float: "left",
borderRadius: '0rem',
},
default: {
borderRadius: "0",
borderRight: "none"
},
},
cardNumber: {
container: {
width: "50%",
float: "left",
},
default: {
borderRadius: ".25rem 0 0 .25rem",
borderRight: "none"
},
}
}
}
var connectE = new Connect.ConnectE(config, displayErrors);
var btn = document.getElementById("testPay");
$('#testPay').on('click',
function() {
var btn = $(this);
btn.button('loading');
connectE.executePayment()
.then(function(data) {
$("#demo-payment").hide();
$("#testPay").hide();
$("#demo-result").show();
$("#status-code").text(data.statusCode);
$("#auth-code").text(data.authCode);
}).catch(function(data) {
console.log('Payment Request failed: ' + data);
$("#errors").text(data);
}
).finally(function() {
btn.button('reset');
});
});
function displayErrors(errors) {
var errorsDiv = document.getElementById('errors');
errorsDiv.innerHTML = '';
if (errors && errors.length) {
var list = document.createElement("ul");
errors.forEach(function(error) {
var item = document.createElement("li");
item.innerText = error.message;
list.appendChild(item);
});
errorsDiv.appendChild(list);
}
}
#demo-payment iframe { width: 100%; }
#demo-result, #demo-payment, #recurring-demo-payment, #recurring-payment { padding: 5px; }
#errors li { color: #B00; }
iframe.threeDs {
width: 370px;
height: 366px;
margin: 100px 0 0 -175px;
position: fixed;
top: 0;
left: 50%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}
Setup Connect-E Standard
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 Standard callConnect.ConnectE
and pass in the configuration object with an optional reference to a callback to handle validation errors.
var connectE = new Connect.ConnectE(config, displayErrorsCallback, onSubmitTriggered);
Parameter | Description |
---|---|
config
required rootConfig
|
Config containing details of this payment and the styling of the payment form. |
displayErrorsCallback | 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 validationError objects. |
onSubmitTriggered | An optional callback that is called when the submit event on the payment form is fired. This allows the payment to be submitted or extra validation done when the user presses the enter key on the payment form. |
Validation Error
Property | Description |
---|---|
errorType
string
|
The type of validation error that has occured. This can be one of the following: cardNameRequired , cardNameInvalid , cardNumberRequired , cardNumberInvalid , expiryDateRequired , expiryDateInvalid , expiryDateMustBeInFuture , cv2Required , cv2Invalid |
message
string
|
Message detailing the validation error for displaying to the user. |
Execute Payment
To execute the payment callexecutePayment
on the object returned from the call to initialise Connect-E. This will consume the access token even if the payment is declined, another token will need to be generated from the REST API and Connect-E will need to be reinitialized if another payment is needed.
The promise will be rejected if there is an error returned by the server or if the transaction is already processing. The promise will still be fulfilled if the payment is declined (just with non 0 status code).
connectE.executePayment(additionalInfo)
.then(function(data){
/*handle response here*/
}).catch(function(data){
/*handle failure here*/
}
When the promise is fulfilled the following object will be passed.
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 |
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 as 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. |
Additional Info
The user's email address and billing address can be passed as the optional additionalInfo
object as defined below. These values will override those set when the access token was created.
Property | Description |
---|---|
userEmailAddress
string
|
This email will be checked with the card issuer to provide additional security. |
billingAddress | This address will be checked with the card issuer to provide additional security. |
Address
Property | Description |
---|---|
address1
string
|
Customer’s billing address line 1. |
address2
string
|
Customer’s billing address line 2. |
address3
string
|
Customer’s billing address line 3. |
address4
string
|
Customer’s billing address line 4. |
city
string
|
Customer’s billing address city. |
state
string
|
Customer’s billing address state or county. |
postcode
string
|
Customer’s billing address postcode or zipcode. |
countryCode
string
|
Customer’s billing address country code using ISO 3166-1 e.g. United Kingdom: 826. |
Config
This section details the fields that can/must be passed to Connect-E Standard 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. |
fontCss
array of strings
|
Array of urls pointing to css files for importing fonts. e.g. 'https://fonts.googleapis.com/css?family=Do+Hyeon' |
styles | Object defining custom styles for the payment form. |
text | Object defining text to override the defaults. |
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. |
Styles Config
Property | Description |
---|---|
base
required fieldStyle
|
Styles to be applied to all fields. |
cv2 | Styles to override the base styles for the cv2 field. |
cardNumber | Styles to override the base styles for the card number field. |
expiryDate | Styles to override the base styles for the expiry date field. |
cardName | Styles to override the base styles for the card name field. |
cardIcon | Styles to be applied to the card icon. |
Field Style
Property | Description |
---|---|
default | Styles to be applied when the field is in it's initial state. |
focus | Styles to be applied when the field has focus. |
error | Styles to be applied when the field has failed validation. |
valid | Styles to be applied when the field has passed validation. |
container | Styles to be applied to the div wrapping the label and the input field. |
label | Styles to be applied to the label. |
Text Config
Property | Description |
---|---|
cardName | Config to override the default card name placeholder and label text. |
cardNumber | Config to override the default card number placeholder and label text. |
expiryDate | Config to override the default cv2 placeholder and label text. |
cv2 | Config to override the default expiry date placeholder and label text. |
Field Text
Property | Description |
---|---|
label
required string
|
Text to replace the default label text. |
placeholder
required string
|
Text to replace the default placeholder text. |
Update Access Token
It may be useful to update the access token if a the current token has been consumed or expired. Updating the token does not refresh the payment form so the user will not have to re-enter their card details. A new access token will need to be obtained from the REST API and passed as an object of payment details to the function.
connectE.updateAccessToken(paymentDetails);
Validation
Validation can be manually triggered by calling validate
. This returns a promise, the promise is resolved if the validation passes and rejected if the validation fails. When the promise is rejected an array of validation errors are passed to the function.
connectE.validate()
.then(() => {
/* Handle validation success */
})
.catch(errs => {
/* Handle validation errors */
});