This document explains how to update the JWT with new data entered on the checkout form by the user.
A common use-case for this functionality is when the customer is making a donation and are prompted to choose a custom amount. Because the amount needs to be included in the JWT to prevent third party users making unauthorised modifications, you would need to follow the instructions below, to update the JWT during the payment session once the final amount has been established:
- When calling the SecureTrading() constructor, ensure deferInit is set to “true”, as shown in the example below:
<html>
<body>
<script>
(function() {
var st = SecureTrading({
deferInit: true,
});
})();
</script>
</body>
</html>
-
When the amount is updated by the user, your system should call updateJWT with an updated JWT that contains the new amount (please ensure this is generated on your server to ensure the JWT secret is not exposed on the client). An example of this might be to add an on-click event to a new “update-amount” button as in the example below:
<html>
<body>
<form id="st-form" action="https://www.example.com" method="POST">
<div class="example-form__section">
<div class="example-form__group">
<button type="submit" class="example-form__button" id="update-amount">
this is the pay button
</button>
</div>
</div>
</form>
</body>
</html>
-
When the amount is updated by the user, your system should call updateJWT with an updated JWT that contains the new amount (please ensure this is generated on your server to ensure the JWT secret is not exposed on the client). An example of this might be to add an on-click event to a new “update-amount” button as in the example below:
document.getElementById('update-amount').addEventListener('click', function(event) {
event.preventDefault();
st.updateJWT(
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwYXlsb2FkIjp7ImFjY291bnR0eXBlZGVzY3JpcHRpb24iOiJFQ09NIiwiYmFzZWFtb3VudCI6IjEwNTAiLCJjdXJyZW5jeWlzbzNhIjoiR0JQIiwic2l0ZXJlZmVyZW5jZSI6InRlc3Rfc2l0ZTEyMzQ1In0sImlhdCI6MTU1OTAzMzg0OSwiaXNzIjoiand0LnVzZXIifQ.RI6FUGp4fehJyhxhy2hib2UO2pluqU4AXqz1l1lRJcY'
);
});
