Video Tutorials.

<Back

Adding the Payment iFrame to your web page

On this page:

1. Intro 2. Importing and creating an instance of Judopay's Web SDK library. 3. Rendering the iFrame onto the web page. 4. Customising the iFrame. 5. Adding the payment button. 6. Displaying payment form errors. 7. [Optional] Rendering errors outside the iFrame. 8. Recap.

1. Intro.

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.

2. Importing and creating an instance of Judopay's Web SDK library.

In your head element, add the script tag to import Judopay’s web SDK library

<script src="https://web.judopay.com/js/0.0.33/judopay.min.js"></script>

To automatically receive non-breaking changes, you can use 0.0, rather than the current patch version.

<script src="https://web.judopay.com/js/0.0/judopay.min.js"></script>

In your script element, create an instance of the Judopay web SDK.

var judo = new JudoPay(yourAPIToken, false)

Alter the first parameter to match your API tokenFor the second parameter, set to true to use the Sandbox environment and set to false to use the Production environment.


3. Rendering the iFrame onto the web page.

In your body element add a div tag where you want the iFrame to appear.

<div id="payment-iframe" width="100%"></div>

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 that was defined earlier.

judo.createCardDetails("payment-iframe")

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.


4. Customising the iFrame.

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.

judo.createCardDetails("payment-iframe", iFrameConfiguration)

In this demo project, we copied the example iFrame configuration object available in our 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.


5. Adding the payment button.

In your body element, add a button element, where the ID must be set to submit payment button.

<button id="submit-payment-button"> Pay Now </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 entered correctly.

id="submit-payment-button"


6. Displaying payment form errors.

Payment form errors can be shown under the form fields and/or outside of the iFrame.

The property, errors display, set in your iFrame configuration object, will affect where the payment form errors are shown.


Here are the values that this property can be set as.

  • SHOW_ALL =  shown under fields and outside the iFrame
  • HIDE_UNDER_FIELDS  = shown outside the iFrame
  • HIDE_UNDER_FORM = shown under fields
  • HIDE_ALL = not shown


7. [Optional] Rendering errors outside the iFrame.

In your body element, add a div tag, where you want the payment form errors to appear.

<div class="judopay-errors"></div>

Ensure the class of the div, matches the value of the property, error Field ID, which is defined in the iFrame configuration object.

errorFieldId: 'judopay-errors',

You can add any custom style you wish to the error message.

8. Recap.

We now have a customized, Judopay payment iFrame, rendered on our payment page, with a customized payment form ready to capture, validate and submit a user’s card information!

Check out our developer documentation for more information on adding the payment iFrame to your page: https://docs.judopay.com/Content/Web%20SDK/Web%20SDK.htm#StepTwoAddthePaymentFormtoyourWebsite

< Back to Video Tutorials