Capturing card details on your own form



TODO excerpt

TODO startOnLoad


By default, during the payment form submission, the SDK will automatically process the payment, including 3-D Secure.

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 by following the steps below:




TODO re-do flow


  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.


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.




TODO re-do flow


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 Trust Payments, as described below.



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 Trust Payments.


submitOnError TODO

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.



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.



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.


TODO code examples?

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