Contents

Capturing card details on your own form

 

By default, during the payment form submission, the st.js will automatically tokenise sensitive payment details to create a unique cachetoken. The cachetoken is used to represent the payment details.

However, if you have obtained the necessary PCI certification to process and submit sensitive cardholder data, and have access to the unencrypted card details prior to processing a payment, you can have these submitted to your server directly rather than using a cachetoken by following the steps below:

 


 

Overview

 

  1. Capture the required card details (and other optional details) using your own checkout form.

 

  1. On submit, this first form will POST to an intermediary page that hosts our mark-up. This is effectively a holding page that is temporarily shown before the customer is displayed the ACS page within a pop-up and/or redirected to your success page.

 

URL
We recommend displaying a loading animation and/or message in case the JS takes more than a couple of seconds to complete the request.

 

  1. If enrolled in 3-D Secure, the customer’s browser may display an overlay, where they are asked to complete some basic actions to authenticate their identity.

 

  1. Following any checks and authentication required by the customer’s card issuer, the overlay will close automatically, and the payment will be processed. Following this, the checkout will display a success message to the customer.

 


 

Modify the server-side payment form

 

Warning
Please ensure you have read and understood the overview above before proceeding. This section only applies to merchants who have obtained the necessary PCI certification to process and submit sensitive cardholder data.

 

You will need to host a form on the intermediary page that loads the sensitive data into a JWT and submit this to Secure Trading, as described below.

 

startOnLoad

You must ensure your form includes the additional field startOnLoad within st.Components, with value “true”. This negates the need for customer interaction for the form to submit the data to Secure Trading.

 

submitOnError

You must ensure your form includes the additional field submitOnError, with value “true”. This ensures that if an error occurs, the customer will be redirected to your website so they can amend their details and retry the payment.

 

jwt

Refer to this page to learn how to construct the JWT (JSON Web Token). In this alternative workflow, the JWT must also include the card number, expiry date and security code.

 

Form

Unlike in the other examples we provide, the form in this configuration doesn’t need to include fields requesting the card details, because these have already been included in the JWT.

The form also doesn’t need to include a submit button, because startOnLoad will submit the contents of the form automatically, including the JWT.

 


<html>
<head>
</head>
<body>
  <div id="st-notification-frame"></div>
  <form id="st-form" action="https://www.example.com">
  </form>
  <script src="<DOMAIN>/js/v2/st.js"></script>
  <script>
   (function() {
      var st = SecureTrading({  
jwt:'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXlsb2FkIjp7ImFjY291bnR0eXBlZGVzY3JpcHRpb24iOiJFQ09NIiwiYmFzZWFtb3VudCI6IjEwNTAiLCJjdXJyZW5jeWlzbzNhIjoiR0JQIiwic2l0ZXJlZmVyZW5jZSI6InRlc3Rfc2l0ZTEyMzQ1In0sImlhdCI6MTU1OTAzMzg0OSwiaXNzIjoiand0LnVzZXIifQ.jXI151RhD5ob1qJkQOM9tk0wyyvlewGXsTTlkz-jiYA',
      submitOnError: true});
      st.Components({startOnLoad: true}); 
   })(); 
  </script>
</body>
</html>

Replace <DOMAIN> with a supported domain. Click here for a full list.