Adding the Payment iFrame to your web page Tutorial

Adding the Payment iFrame
This tutorial is for your client side.
This tutorial will cover how to import the Web SDK and add the Judopay payment iFrame to your web page.
This iFrame can render a payment form which can be used to securely capture a consumer’s card details.
Ensure you have already watched the below tutorial:
﻿Creating a Payment Session Tutorial﻿﻿
Full Tutorial
﻿
We have created video chapters from the full tutorial, to help you easily re-watch different parts of the tutorial. We have included an overview and example code snippets for each section below:
When using the code snippets, ensure to replace any field values with your own values.
﻿
1. Intro
﻿
﻿
2. Importing and creating an instance of Judopay's Web SDK library
Importing the Web SDK and creating an instance of the library, which will later be used to call Web SDK functions.
﻿
Import and Create Instance
//in your HTML <head> element:
<script src="https://web.judopay.com/js/0.0/judopay.min.js"></script>
//in a HTML <script> tag or JavaScript file:
var judo = new JudoPay("yourAPIToken", true) 
//where true uses the test environment
 
//in your HTML <head> element:
<script src="https://web.judopay.com/js/0.0/judopay.min.js"></script>
//in a HTML <script> tag or JavaScript file:
var judo = new JudoPay("yourAPIToken", true) 
//where true uses the test environment
 
﻿
﻿
3. Rendering the iFrame onto the web page
Defining where the payment iFrame will render on your page.
﻿
Render the iFrame
//in your HTML <body> element:
<div id="payment-iframe" width="100%"></div>
//in your HTML <script> tag or JavaScript file:
var judo = new JudoPay("yourAPIToken", true) 
//where true uses the test environment

judo.createCardDetails("payment-iframe")
//in your HTML <body> element:
<div id="payment-iframe" width="100%"></div>
//in your HTML <script> tag or JavaScript file:
var judo = new JudoPay("yourAPIToken", true) 
//where true uses the test environment

judo.createCardDetails("payment-iframe")
﻿
﻿
4. Customising the iFrame
Customising the look and behaviour of the payment iFrame, using the iFrame configuration object.
﻿
Customise the iFrame
//n your HTML <script> tag or JavaScript file:
const iFrameConfiguration = {
    isGeoLocationGatheringAllowed: true, 
    iFrame: {
        language: "en", 
        errorFieldId: 'judopay-errors', 
        showCardTypeIcons: true, 
        layout: "vertical", 
        cardTypeIconRight: "10px", 
        cardTypeIconTop: "-2px",
        backgroundColor: "#FFFFFF", 
        enabledPaymentMethods: ['CARD'], 
        defaultCountryCode: 'UK',
        isCountryAndPostcodeVisible: false, 
        isCardHolderNameVisible: true, 
        errorsDisplay: "SHOW_ALL", 
        disableUnderline: false, 
        shouldAutofocus: true
    }
}

judo.createCardDetails("payment-iframe", iFrameConfiguration)
//n your HTML <script> tag or JavaScript file:
const iFrameConfiguration = {
    isGeoLocationGatheringAllowed: true, 
    iFrame: {
        language: "en", 
        errorFieldId: 'judopay-errors', 
        showCardTypeIcons: true, 
        layout: "vertical", 
        cardTypeIconRight: "10px", 
        cardTypeIconTop: "-2px",
        backgroundColor: "#FFFFFF", 
        enabledPaymentMethods: ['CARD'], 
        defaultCountryCode: 'UK',
        isCountryAndPostcodeVisible: false, 
        isCardHolderNameVisible: true, 
        errorsDisplay: "SHOW_ALL", 
        disableUnderline: false, 
        shouldAutofocus: true
    }
}

judo.createCardDetails("payment-iframe", iFrameConfiguration)
﻿
﻿
5. Adding the payment button
Adding the payment button to the web page and setting the ID to inherit behaviour.
﻿
Add the Payment Button
//in your HTML <body> element:
<button id="submit-payment-button"> Pay Now </button>
//in your HTML <body> element:
<button id="submit-payment-button"> Pay Now </button>
﻿
﻿
6. Displaying payment form errors
Displaying errors caused by the card form input, which can be shown within, or outside the payment iFrame (optional).
﻿
Display Payment Form Errors
//fields in the iFrame Configuration Object(See Chapter 4):
errorsDisplay: "SHOW_ALL" // other values: HIDE_UNDER_FIELDS, HIDE_UNDER_FIELDS, HIDE_ALL 
errorFieldId: 'judopay-errors' //(Optional) id of div where you want errors shown outside of iFrame
//to show errors outside of Judopay payment iFrame (Optional):
//in your HTML <body> element:
<div class="judopay-errors"></div>
//fields in the iFrame Configuration Object(See Chapter 4):
errorsDisplay: "SHOW_ALL" // other values: HIDE_UNDER_FIELDS, HIDE_UNDER_FIELDS, HIDE_ALL 
errorFieldId: 'judopay-errors' //(Optional) id of div where you want errors shown outside of iFrame
//to show errors outside of Judopay payment iFrame (Optional):
//in your HTML <body> element:
<div class="judopay-errors"></div>
﻿
﻿
7. Recap
Following the completion of this tutorial, you will have a customised Judopay payment iFrame rendered on your payment page, which can capture and validate card details.
You also have a payment button, which will be used in the next tutorial Handling a Transaction, to trigger the transaction.
﻿
﻿
Resources
﻿Judopay's Web SDK Documentation﻿﻿
﻿Creating a Payment Session Tutorial﻿﻿
﻿Handling a Transaction Tutorial﻿﻿
﻿
Updated 06 Aug 2024
Creating a Payment Session Tutorial
Handling a Transaction Tutorial