---
title: Quick Start
slug: docs.judopay.com
docTags: 
createdAt: 2024-05-17T14:10:54.832Z
---

** Quickly integrate and perform a test payment with Judopay.**

The following example takes you through the steps to quickly integrate and perform a test card payment using Judopay’s Web SDK.

# Start Integrating with Judopay

To start integrating with Judopay:

## Step One: Sign up for your Judopay Sandbox Account

You need your **sandbox account **so you can process test transactions while developing your app.

:::CtaButton{label=">>>  Click to sign up for your Sandbox Account  >>>" externalHref="https://www.judopay.com/contact/apply-sandbox-account" openInNewTab="true"}

:::

:::hint{type="info"}
An app is a Judopay term and relates to your API credentials.
:::

Once signed up, you will receive your:

- TokenSecretAuth
  - The token and secret pair
  - Specify your token in **Username **and secret in **Password**
- JudoId

:::hint{type="warning"}
Ensure Judopay has <font color="hsl(var(--ab-gray-900))">**enabled 3D Secure**</font> in your sandbox account. If this is not enabled the test transaction may appear successful without following the correct payment flow.
Contact<font color="hsl(var(--ab-gray-900))"> ​</font>​​ to set this up.
:::

***

## Step Two: Get Access to your Judopay Dashboard

Get access to your dashboard in the [Judopay Portal](https://portal.judopay.com/Account/Login?_gl=1*1kczibm*_ga*MTg5OTI5MjcxMS4xNjI2OTcwMzIw*_ga_9ZCLPYJ2K1*MTcxNTk1NzUyNC40MzkuMS4xNzE1OTU3NTI5LjAuMC4w) where you can create your app.
For more details, see [Creating your App.](docId\:S_8hOAMytkgY13t0P657-)

***

# Perform a Test Payment

The following guide is a full working example for use with Judopay's Web SDK.

:::hint{type="info"}
When authorising `/payments` or `/preauths` it is recommended to use **paymentSession**.
:::

## Step One: Create a paymentSession

:::hint{type="warning"}
Make sure you are using Judopay's API version **6.0.0.0** or higher.
:::

### Important to Consider

-
  The paymentSession can be used for up to **three transaction attempts** for the same transaction.
  - If the **block duplicate transactions** permission has been applied on your API tokens, the paymentSession can only be used for **one&#x20;**&#x74;ransaction attempt.&#x20;
    - If you want to have this permission removed, contact Customer Support.
- A payment session can be used again to re-submit a failed transaction attempt.
- Once a transaction attempt is successful, the paymentSession can **no longer be used** even if there are any remaining attempts available.
- The paymentSession will expire in **30 minutes**, unless an **ExpiryDate&#x20;**&#x69;s set in the `/paymentsession` request body.
  - The expiry date must be within one year:
    `"ExpiryDate": "2028-10-06T17:43:21+01:00"`

:::hint{type="info"}
As soon as the payment session is used for the initial transaction attempt, this will initiate the **30 minute expiry time**.
:::

Make a HTTP **POST&#x20;**&#x52;equest: `/paymentsession`

:::CodeblockTabs
Payment Session Request Example

```json
{
  "judoId": "100100100",
  "yourConsumerReference": "2b45fd3f-cee5-4e7e-874f-28051db65408",
  "yourPaymentReference": "6482c678-cad3-4efd-b081-aeae7a89a134",
  "currency": "GBP",
  "amount": 10.99,
  "expiryDate": "2028-02-05T16:28:32.8596+00:00" //if not set, session will expire in 30 minutes
}
```

Response Reference Example

```json
//Store the reference returned in your backend server:
{
  "postUrl": "https://pay-sandbox.judopay.com/v2",
  "reference": "5QcAAAQAAAAPAAAACAAAABtGgvhBrF9BHTN7nqn1e0J4hVVmi-y27dGPjWBMtls3Gj_XDg"
}
```
:::

*For the full schema details and descriptions, see Transaction API:&#x20;*[/paymentsession](docId\:bcXNM5keOk-nlNrZTafUT)

:::hint{type="info"}
Your backend server should store the **paymentSession response reference** returned by Judopay's API.
Use this reference from the response to populate paymentSession when calling `/payments` and `/preauths`from your front-end client.
See [Step Three: Making a Transaction.](docId\:UuVcDjXTcajyQHD4xFPYE)
:::

The following parameters need to remain consistent between the `/paymentsession`requests and the `/payments` and `/preauths` requests, otherwise the transaction will fail:

- YourPaymentReference
- YourConsumerReference
- JudoID
- Currency
- Amount

This is used to cross reference the validity of the transaction.

***

## Step Two: Add the Payment Form to your Website

::Image[]{src="https://api.archbee.com/api/optimize/QGXTyW3MgdNcMjdEa0v8r/dtlO96hwckHIfb-LD0mdz_docs-quick-start-hres.png" size="32" width="500" height="277" position="flex-start" alt="example payment form" showCaption="false"}

:::hint{type="info"}
To automatically receive non-breaking changes, you can pin to the minor version **(0.0)** rather than the current patch version (**0.1.0**).
:::

**Create and customise the Judopay Web SDK iFrame:**

::::WorkflowBlock
:::WorkflowBlockItem
Add the code snippet in your web page \<HEAD>: `scriptsrc="https://web.judopay.com/js/0.1.0/judopay.min.js">`&#x20;
**
*This example will use jQuery for a promise, so include the following in your web page&#x20;*\<HEAD>: `<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js></script>`
:::

:::WorkflowBlockItem
In your \<BODY> add a \<div> tag where you want the iframe to appear:
`<div id="payment-iframe" width="100%"></div>`&#x20;
**
*This example uses the **id: payment-frame**. You can use whatever id you wish.*
:::

:::WorkflowBlockItem
In your \<BODY> add a \<div> tag where you want the errors in form entry to appear.

*For the purpose of this exercise, the class is name&#x64;**&#x20;judopay-errors**, and sets a style to be **red**.*
**
You can add any custom style you wish in your .CSS file:
`<div class="judopay-errors" style="color:red">Error Location</div>`&#x20;

For more information on all errors that can be returned, see [Payment Form Error Messages](docId\:qfxaWPAQl_-2EVfP8y94d).
:::

:::WorkflowBlockItem
In your \<BODY> add a button call: **submit-payment-button** for the iframe submission to Judopay.
Make sure you have set:
`id="submit-payment-button"`

This is required to perform form validation where the **Pay&#x20;**&#x62;utton will be greyed out until all the information has been entered.
`<button id="submit-payment-button" Pay Now </button>`&#x20;

You can apply any css styling you wish to this button.
:::

:::WorkflowBlockItem
In your \<BODY> define the **iFrameConfiguration&#x20;**&#x6F;bject. This is used to customise the look and behaviour of the iFrame.
For more information on customising the iFrame, see [Customising your Web SDK Integration](docId\:FVh6jG8c0jC7Q7OC9uoac).
:::

:::WorkflowBlockItem
Create an instance of the Judopay Web SDK:
`var judo = new JudoPay("yourAPIToken", true); //initialize library`

- Alter **yourAPIToken&#x20;**&#x74;o match your Sandbox API Token
- The second parameter is called **useSandbox**
  - Set to **true** to use the **Sandbox** environment.
  - Set to **false** to use the **Production** environment.
:::

:::WorkflowBlockItem
Create the iFrame in the \<div> tag:&#x20;
`var payment = judo.createCardDetails('payment-iFrame', iFrameConfiguration)`

- `'payment-iFrame'`
  The \<div> id where the iFrame will be rendered, in step (2) above.
- `iFrameConfiguration`
  The object defined to customise the look and behaviour of the iFrame, in step (5) above.
:::
::::

An example of a&#x6E;**&#x20;iFrameConfiguration** object:

:::CodeblockTabs
iFrame Configuration Object Example

```javascript
//Script to create a minimum iframe:
<script>
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: "HIDE_UNDER_FIELDS", 
    disableUnderline: false, 
    shouldAutofocus: true, 
            }
    }
</script>
```
:::

:::hint{type="info"}
The iframe is created in your \<SCRIPT> location.
:::

See below for more details on the parameters that create th&#x65;**&#x20;iFrameConfiguration&#x20;**&#x6F;bject:

| **Parameter**                                       | **Description**                                                                                                                                                                                            |
| --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `isGeoLocationGatheringAllowed`<br />Boolean        | isGeoLocationGatheringAllowed = **false**<br />The browser will not ask for the location.                                                                                                                  |
| `isChallengeModalCancelButtonVisible
`<br />Boolean | isChallengeModalCancelButtonVisible = **true**<br />If set to false, the cancel (**X**) button on the 3D Secure 2 challenge modal will not be shown.                                                       |
| **iFrame Parameters**:                              |                                                                                                                                                                                                            |
| `language`<br />String<br />                        | Sets the language of the iFrame.<br />Values:<br />* en (english) (**Default**)
* es (spanish)
* fr (french)
* pt (portugese)
* de (german)                                                                |
| `errorFieldId`<br />String<br />                    | Set as the class name of the \<div> where the errors appear.<br />For example:<br />`<div class="judopay-errors">Error Location</div>`                                                                     |
| `showCardTypeIcons`<br />Boolean<br />              | showCardTypeIcons = **true**<br />The card icons will display when the card entry is recognised.                                                                                                           |
| `cardTypeIconRight`<br />String                     | Changes the position of the card icon.                                                                                                                                                                     |
| `cardTypeIconTop`<br />String                       | Changes the position of the card icon.                                                                                                                                                                     |
| `backgroundColor`<br />String<br />                 | Sets the background colour of the iFrame.<br />For example:<br />* #FFFFFF
* Default: white                                                                                                                |
| `layout`<br />String<br />                          | Sets the layout of the iFrame payment form.<br />Values:<br />* vertical (**default**)
* compact
* horizontal<br />For the form layout illustrations, see [Form Layout](docId\:FVh6jG8c0jC7Q7OC9uoac).     |
| `defaultCountryCode`<br />String<br />              | Sets the country displayed in the country field.<br />For example:<br />* UK                                                                                                                               |
| `isCountryAndPostcodeVisible`<br />Boolean<br />    | isCountryAndPostcodeVisible = **true**<br />The country and postCode fields will be displayed.                                                                                                             |
| `isCardHolderNameVisible`<br />Boolean<br />        | isCardHolderNameVisible = **true**<br />The cardHolderName field will be displayed.                                                                                                                        |
| `enabledPaymentMethods`<br />String \[ ]<br />      | Array of accepted payment methods.<br />Values:<br />* CARD
* IDEAL                                                                                                                                        |
| `errorsDisplay`<br />String<br />                   | Formats how errors are displayed to the consumer.<br />Values:<br />* SHOW\_ALL
* HIDE\_UNDER\_FIELDS
* HIDE\_UNDER\_FORM
* HIDE\_ALL                                                                      |
| `shouldAutofocus`<br />Boolean<br />                | shouldAutofocus = **true**<br />Sets the focus to the cardNumber field when the iFrame appears                                                                                                             |
| `idealPollingTimeout`<br />Number<br />             | Specifies the amount of time the system waits for the IDEAL alternative payment method to respond.<br />For example: 6000                                                                                  |
| `disableUnderline`<br />Boolean<br />               | disableUnderline = **false**<br />When the consumer enters information into the iFrame, the fields will be underlined and highlighted.                                                                     |
| `allowedCardSchemes`<br />String \[ ]<br />         | Array of accepted card schemes.<br />If this field is set, an error will appear if an unsupported card scheme is entered.<br />Values:<br />* amex
* mastercard
* maestro
* visa
* diners
* discover
* jcb |
| `styles`<br />Object<br />                          | A JSON object.<br />Define further css style customisation for the payment fields.<br />For more information, see [Styles Properties](docId\:FVh6jG8c0jC7Q7OC9uoac).                                       |
| `fonts`<br />Object \[ ]<br />                      | An array of JSON objects, each representing a font.<br />For more information, see [Form Fonts](docId\:FVh6jG8c0jC7Q7OC9uoac).                                                                             |

***

## Step Three: Making a Transaction

To make a transaction:

1. Define th&#x65;**&#x20;paymentConfiguration** object for the payment or preauth:

:::hint{type="warning"}
Ensure the details used when creating the **paymentSession** match the values set in the following configuration:
:::

:::CodeblockTabs
Payment Configuration Object Example

```javascript
const paymentConfiguration = {
    judoId: "yourJudoId",
    amount: 1.01,
    currency: "GBP",
    phoneCountryCode: "44",
    challengeRequestIndicator: "challengeAsMandate",
    initialRecurringPayment: false,
    yourConsumerReference: "yourConsumerReference",
    yourPaymentReference: "yourPaymentReference",
    billingAddress: {
        address1: "My house",
        address2: "My street",
        town: "My town",
        postCode: "TR14 8PA",
        country: "826"
    },
    mobileNumber: "07999999999",
    emailAddress: "contact@judopay.com",
    primaryAccountDetails: {
        name: "Doe",
        accountNumber: "9999999",
        dateOfBirth: "1989-09-19",
        postCode: "AB1 2CD"
    }
}

```
:::

***

### Web SDK Payment Parameter Descriptions

See below for more details on the parameters that create th&#x65;**&#x20;paymentConfiguration** object:

:::hint{type="warning"}
**\*Mastercard Recommends:**
These fields are recommended rather than mandatory. Transactions will continue to be processed if not supplied.&#x20;
See, [Mastercard Recommended 3D Secure 2 Fields](docId\:WpFMF662qaIGEGrpU_Mow).
:::

| **Parameter**                                                                                                           | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `judoId`<br />String<br /><font color="#ef5b2e">Required</font><br /><br />                                             | Unique ID supplied by Judopay.<br />Specific to a merchant and/or location.<br />Format:<br />* 100100100
* Maximum length 9 characters.
* Do not include spaces or dashes.                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `amount`<br />Decimal<br /><font color="#ef5b2e">Required</font><br /><br />                                            | The amount to process.<br />Format:<br />* Two decimal places<br />For currencies using a different structure please contact Judopay for support.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `currency`<br />String<br /><font color="#ef5b2e">Required</font><br />                                                 | The currency of the transaction.<br />Any ISO 4217 alphabetic currency code:<br />* GBP
* USD
* EUR                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `yourConsumerReference`<br />String<br /><font color="#ef5b2e">Required</font>                                          | Unique reference to anonymously identify your customer.<br />Advisable to use GUIDs.<br />Must be below 40 characters.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `yourPaymentReference`<br />String<br /><font color="#ff6900">Required</font><br /><br />                               | Your unique reference for this payment.<br />Format:<br />* Maximum length 50 characters.<br />This value should be unique in order to protect your customers against duplicate transactions. <br />With a server side integration, if a payment reference is not supplied, the transaction will not be processed.                                                                                                                                                                                                                                                                                                                      |
| `phoneCountryCode`<br />String<br /><font color="#ef5b2e">Recommended</font> <font color="#ef5b2e">*</font><br /><br /> | The country code of the consumer's phone.<br />Format:<br />* Maximum length 3 characters.
* Only numbers allowed.
* Do not include special characters or spaces.<br />Must be set if **mobileNumber** is set.<br />If not set, default = 44                                                                                                                                                                                                                                                                                                                                                                                            |
| `mobileNumber`<br />String<br /><font color="#ef5b2e">Recommended</font> <font color="#ef5b2e">*</font><br /><br />     | Consumer’s valid mobile number.<br /><br />Mastercard recommends providing at least **one contact method** for Mastercard 3D Secure authenticated transactions.<br />Format:<br />* Maximum length 15 characters.
* Only numbers allowed.
* Do not include special characters or spaces.<br />Must be set if **phoneCountryCode** is set.                                                                                                                                                                                                                                                                                               |
| `cardHolderName`<br />String<br /><font color="#ef5b2e">Recommended</font> <font color="#ef5b2e">*</font><br />         | The card name of the consumer.<br />If the cardHolderName field is displayed to the user in the payment form (**isCardHolderNameVisible: true** is set in the iFrame config), the value entered in the payment form will overwrite this value.                                                                                                                                                                                                                                                                                                                                                                                          |
| `challengeRequestIndicator`<br />String<br /><font color="#42cbd4">Optional</font><br /><br /><br />                    | Indicates the type of challenge request you wish to apply.<br />Set this to one of the following strings:<br />* `noPreference`
* `noChallenge`
  - No challenge required.
* `challengePreferred`
  - A challenge is preferred for this transaction.
* `challengeAsMandate`
  - Must challenge this transaction.<br />This **should not&#x20;**&#x62;e included in the same configuration object as **scaExemption**.                                                                                                                                                                                                                   |
| `scaExemption`<br />String<br /><font color="#42cbd4">Optional</font><br /><br />                                       | To apply for an exemption from SCA, for a customer initiated transaction.<br />Set this to one of the following strings:<br />* `lowValue`
  - Transactions up to €45 do not require SCA, up to a maximum of five consecutive transactions, or a cumulative limit of €100.
* `trustedBeneficiary`
  - Provides the cardholder the option to add the merchant to their trusted list.
* `transactionRiskAnalysis`
  - Allows for certain remote transactions to be exempt from SCA, provided a robust risk analysis is performed.<br />This **should not** be included in the same configuration object as **challengeRequestIndicator**. |
| `initialRecurringPayment`<br />Boolean<br /><font color="#42cbd4">Optional</font>                                       | Indicates if this initial payment is part of a recurring payment.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `billingAddress`<br />Object<br /><font color="#42cbd4">Optional</font><br /><br />                                     | Card holder's billing address.<br />Properties:<br />* `address1` <font color="#ef5b2e">(</font><font color="#ef5b2e">Recommended)</font><font color="#ef5b2e">*</font>
* `address2` (optional)
* `town`
* `state` (only required if country is USA/Canada)
  - Format:
    - string
    - ISO Alpha-2 Code (e.g. California = "**CA**")
* `country`
  - Format:
    - string
    - See [here](docId\:XZE369mFK5UVOSaNzM8UO) for the list of valid **ISO 3166-1** format country codes.
* `postCode`<br />If the billingAddress is provided, the postcode is **required**.                                                              |
| `emailAddress`<br />String<br /><font color="#ef5b2e">Recommended</font> <font color="#ef5b2e">*</font>                 | Consumer’s valid email address.<br /><br />Mastercard recommends providing at least **one contact method** for Mastercard 3D Secure authenticated transactions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `primaryAccountDetails`<br />Object<br /><font color="#42cbd4">Optional</font><br /><br />                              | This is **Mandatory&#x20;**&#x66;or merchants who have an MCC code of **6012**, **6051&#x20;**&#x61;nd **7299**.<br />Properties:<br />* `name`&#xA;**This is the surname.**
* `accountNumber`
* `postCode`
* `dateOfBirth`
  - Format: YYYY-MM-DD                                                                                                                                                                                                                                                                                                                                                                                      |

2\. In a function, add the `invokePayment`call.
This will invoke a payment using the **paymentSession&#x20;**&#x61;nd **paymentConfiguration**

:::CodeblockTabs
Invoke Payment Example

```javascript
function handlePaymentButtonClick() {
    judo.invokePayment(paymentSession, paymentConfiguration)
    .then(handleSuccess)
    .catch(handleError)
}
```
:::

:::hint{type="info"}
To invoke a preAuth, change the above code t&#x6F;**&#x20;.invokePreauth**
:::

3\. To call the function (in step 2 above) to invoke the payment or preauth, add the `onclick`attribute to the payment button \<div>:
`<button id="submit-payment-button" onclick="handlePaymentButtonClick()"> Pay Now </button>`

***

## Step Four: Handle the Response

All the Judopay Web SDK transaction methods return a promise.
Once the authorisation is complete, the promise will be either fulfilled or rejected.

**Fulfilled**

- You will receive a JSON object response (a Judopay receipt object).
  - For more information and schema on the JSON object, see [API Transaction Response](docId\:bcXNM5keOk-nlNrZTafUT).
- Depending on the result the consumer should be redirected to the appropriate outcome page.
  - For example, if the result = SUCCESS redirect the consumer to the Success Page.
- This page should display the necessary transaction information (found in the Judopay receipt object).

**Rejected**

- You will receive an error object
  - For more information on error responses returned, see [Web SDK Error Responses](docId\:qfxaWPAQl_-2EVfP8y94d).
- The consumer should be redirected to an Error Page.

:::CodeblockTabs
Response Example

```json
const onFulfillment = (receiptObject) => {
  const { result } = receiptObject
  //redirect to appropriate page depending on the result (success/failure/declined page)
}

const onRejection = (error) => {
  //redirect to error page and handle error
}
```
:::

For more information on the response codes, see [Codes](docId:_zrsihomUEW-XnRQ4PBtJ).

***

### Putting it all together

Putting it all together to display the payment form and make a transaction:

:::CodeblockTabs
Example Flow

```javascript
<html>
<head>
    <!-- Include JudoPay WebSDK -->
    <script src="https://web.judopay.com/js/0.0/judopay.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

    <!-- Where the Judopay iFrame will be displayed -->
    <div id="payment-iframe" width="100%"></div>

    <!-- Payment button for submitting iFrame input -->
    <button id="submit-payment-button" onclick="handlePaymentButtonClick()"> Pay Now </button>

    <!-- Where the payment form errors will be shown -->
    <div class="judopay-errors" style="color:red"></div>

    <script>

        // Define config object for customizing style/behaviour of iFrame
        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: "HIDE_UNDER_FIELDS",
                disableUnderline: false,
                shouldAutofocus: true,
            }
        }

        // Initializing/creating an instance of the Judopay webSDK
        var judo = new JudoPay("yourAPIToken", true);

        // Displaying the card entry iFrame
        var payment = judo.createCardDetails("payment-iframe", iFrameConfiguration);

        //Define config object for payment/preauth
        const paymentConfiguration = {
            judoId: "yourJudoId",
            amount: 1.01,
            currency: "GBP",
            phoneCountryCode: "44",
            challengeRequestIndicator: "challengeAsMandate",
            initialRecurringPayment: false,
            yourConsumerReference: "yourConsumerReference",
            yourPaymentReference: "yourPaymentReference",
            billingAddress: {
                address1: "My house",
                address2: "My street",
                town: "My town",
                postCode: "TR14 8PA",
                country: "826"
            },
            mobileNumber: "07999999999",
            emailAddress: "contact@judopay.com"
        }

        function handleSuccess(response) {
            //Redirect to success page and handle response
        }
        function handleError(error) {
            //Redirect to error page and handle error
        }

        //Called when payment button pressed to invoke payment
        function handlePaymentButtonClick() {
            judo.invokePayment("yourPaymentSession", paymentConfiguration)
                .then(handleSuccess)
                .catch(handleError)
        }
    </script>

</body>
```
:::

***

## Testing and Customising your Integration

For more information, see [Testing Web SDK - Card Payments](docId\:a33b4PWt6BRoFeJpgHDH2).

For more information on **customising&#x20;**&#x79;our integration, see [Customising your Web SDK Integration](docId\:FVh6jG8c0jC7Q7OC9uoac).