In this tutorial, we will add Judopay’s WebSDK Payment iFrame to a web page.
This iFrame renders a payment form, which can be used to capture and submit a consumer’s card details.
In your head element, add the script tag to import Judopay’s web SDK library
To automatically use the latest version, you can use 0.0, instead of the current patch version.
In your script element, create an instance of the Judopay web SDK.
Set the first parameter to your API token, which should be the same as the one used when creating the payment session.
Ensure this value is your API token and does not also include the API secret.
For the second parameter, set to true to use the sandbox environment, and set to false to use the production environment.
In your body element add a <div> tag where you want the iFrame to appear.
This example uses the ID "payment-iframe", but you can use whatever ID you wish. This ID will be used when rendering the iFrame.
In your script element, call create card details to render the payment iFrame in the <div> tag you defined earlier.
"payment-iframe", is the ID of the <div>, where the iFrame will be rendered.
You should now see the Payment iFrame rendered on the page.
Note, the payment button for the form is not part of the iFrame. Adding the button to the page will be explained later in this tutorial.
In your body element, define the iFrame configuration object, which will be used to customise the look and behaviour of the iFrame.
Add the iFrame configuration object as the second parameter of the create card details call.
In this demo project, we copied the example iFrame configuration object available in Judopay's documentation.
We then made some adjustments to the object, in order to get the look and behaviour we desired.
Please see our documentation for more information on the customisation available.
On your web page, the look and behaviour of the payment iFrame should now have been updated.
In your body element, add a button element where the ID must be set to "submit-payment-button".
You should now see the button on your web page.
You can apply any css styling you wish to this button.
If the ID of the payment button is set correctly, the button should be disabled until all the payment information has been duly entered.
Payment form errors can be shown under the form fields and/or outside of the iFrame.
The property, errorsDisplay set in your iFrame configuration object, will affect where the payment form errors are shown.
Here are the values you can set for this property.
If you wish to show the payment form errors outside of the iFrame, the following will explain how to do so.
In your body element, add a <div> tag where you want the payment form errors to appear.
Ensure the class of the <div> matches the value of the property, errorFieldId, which is defined in the iFrame configuration object.
You can add any custom style you wish to the error message.
We now have a customised Judopay payment iFrame, rendered on our payment page, complete with a customised payment form, that has captured and validated the card details, and is now ready for the consumer to submit their card details.
See our next tutorial 'Handling a Transaction', which will guide you on how to submit the payment and handle the response.
Check out our Developer Documentation for more information on adding the payment iFrame to your page.
.png)
