Connect-E Wait Pre-execute - One off Payment

Process Flow

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> 

const payConfig = {
   paymentDetails: {
       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"
           },
       }
   }
}

const connectE = new Connect.ConnectE(payConfig, displayErrors);
const btnTestPay = document.getElementById("testPay");

btnTestPay.onclick = () =>{
   btnTestPay.innerText = 'loading';
   btnTestPay.setAttribute("disabled", "true");
   connectE.executePayment()
       .then(function(data) {
           document.getElementById("demo-payment").hidden = true;
           btnTestPay.remove();
           document.getElementById("demo-result").hidden = false;
           document.getElementById("status-code").innerText = data.statusCode;
           document.getElementById("auth-code").innerText = data.authCode;
       }).catch(function(data) {
               console.log('Payment Request failed: ' + data);
               btnTestPay.innerText = 'Pay';
               btnTestPay.removeAttribute("disabled");
               if (typeof data === 'string') {
                   document.getElementById("errors").innerText = data;
               }
               if (data && data.message) {
                   document.getElementById("errors").innerText = data.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);
   }
}
                    

#demo-payment iframe { width: 100%; }
#demo-result, #demo-payment, #recurring-demo-payment, #recurring-payment { padding: 5px; }

#errors li { color: #B00; }

iframe.threeDs {
    width: 400px;
    height: 400px;
    margin: 100px 0 0 -175px;
    position: fixed;
    top: 0;
    left: 50%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    background-color: white;
}
                    

Setup Connect-E Wait Pre-execute - One off Payment

Create access token

You will need to form a payment/access token to scope your upcoming payment first by a call to the Connect-E REST API.

curl \
  -X POST \
  -H "accept: application/json" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer {API_KEY_JWT}" \
  -d '{
    "merchantUrl": "{API_KEY_MERCHANT_URL}",
    "currencyCode": "826",
    "amount": 100,
    "transactionType": "SALE",
    "orderId": "{MERCHANT_ORDER_ID}",
    "orderDescription": "{MERCHANT_ORDER_DESCRIPTION}",
    "waitPreExecute": true
  }' \
  https://e.test.connect.paymentsense.cloud/v1/access-tokens
        

{
    "id":"g2tfTjSV7ImoPQ-R91yCmdycOzz2nWmfAZBdFsgqmqTWGsZW5CpBaqBTPd96ZsU0Fgrvq-tlHmfjMuYU07awx2aYCwdcHe4iJgc",
    "expiresAt":1637772363
}
        

Note: Please see the Setup Test Account page for test JWT details.

Note: The id field is the access token.

Load the payment iframe

In order to take a payment, you will now need to use the access token created, with the Connect-E JavaScript SDK.

<script src="https://web.e.test.connect.paymentsense.cloud/assets/js/client.js"></script>

NOTE: We recommend using our asset URL in your website in order to apply the latest bug fixes/features.

In order to load the payment detail capture iframe into your website you will need to define the element for the iframe to append too, and call the SDK.

const config = {
    paymentDetails: {
        paymentToken: "{ACCESS_TOKEN}"
    },
    containerId: "demo-payment",
};

const displayErrors = func(errors) {
    // Handle errors by appending to your DOM
};

const connectE = new Connect.ConnectE(config, displayErrors);
        

<div id="demo-payment">
    <!-- Connect-E payment iframe will be appended here -->
</div>

NOTE: For more detailed config and callback configuration options, please review the Connect-E Standard - One off payment page.

Submit Payment

After the user has input their card details into the provided iframe input fields, you need to map the button to trigger the payment processing.

<button id="testPay" class="btn-primary btn pull-right" data-loading-text="Processing...">Pay</button>

const btnTestPay = document.getElementById("testPay");

btnTestPay.onclick = () => {
    connectE.executePayment()
        .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

Status Code

Resume Payment

If your wait pre-execute transaction completed successfully you should have received a status code of 99 indicating the transaction is paused, you must now resume the transaction by performing an API call to the Connect-E REST API.

curl \
  -X POST \
  -H "accept: application/json" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer {API_KEY_JWT}" \
  https://e.test.connect.paymentsense.cloud/v1/payments/{ACCESS_TOKEN}/resume
        

{
    "authCode":"1",
    "acsUrl":"",
    "paReq":"",
    "md":"6377711135776388911222",
    "statusCode":0,
    "message":"AuthCode: 12345",
    "stepUpUrl":"",
    "jwt":""
}
        

Verify Payment

Although not totally necessary, it is still advised to perform a closing GET request to fetch the full transaction info for your records. In future we may append more information here than will otherwise be provided in the payment execution response.

curl \
  -X GET \
  -H "accept: application/json" \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer {API_KEY_JWT}" \
  https://e.test.connect.paymentsense.cloud/v1/payments/{ACCESS_TOKEN}
        

{
    "transactionDateTime":"2021-11-24 16:24:18.863914 +0000 UTC",
    "statusCode":0,
    "message":"AuthCode: 12345",
    "crossReference":"637771113577638811222",
    "authCode":"12345",
    "cardNumber":"520000******0007",
    "expiryDate":"2024-12-31",
    "cardType":"MASTERCARD",
    "cardName":"John Watson",
    "billingAddress":{
        "address1":"",
        "address2":"",
        "address3":"",
        "address4":"",
        "city":"",
        "state":"",
        "postcode":"",
        "countryCode":""
    },
    "shippingDetails":{
        "Name":"",
        "Address":{
            "address1":"",
            "address2":"",
            "address3":"",
            "address4":"",
            "city":"",
            "state":"",
            "postcode":"",
            "countryCode":""
        }
    },
    "userEmailAddress":""
}