;
};
**Reduce failed payments and fraud by validating UK bank account details at checkout or in payment forms.**
## Who Should Use This Guide
**For:** Business owners and developers integrating bank validation without complex setup.
**You'll need:** A Loqate API key and basic HTML knowledge.
**Not covered:** Tag-based integrations ([see Tag Setup](/our-services/tag-setup-guide)) or pre-built platform integrations ([see Integrations](/integrations/all-integrations)).
## What You'll Build
A bank validation form that:
* Validates sort codes and account numbers in real-time
* Displays success or error states
* Prevents form submission with invalid bank details
* Shows bank and branch information
## Quick Start
To set up Bank Validation, you'll need an API key. Find out how to get yours [here](/loqate-basics/create-an-api-key/).
### Choose Your Approach
**Use case:** Testing the API or adding to a static page
A self-contained HTML file you can copy and use immediately.
Jump to [standalone HTML example](#standalone-html-example)
**Use case:** Add validation to your current checkout or payment forms
Step-by-step guide to add validation code to forms you already have.
Jump to [integration example](#integration-example)
**Using Shopify or WordPress?** Check [pre-built integrations](/integrations/all-integrations).
### Add Your Key
Replace `YOUR_API_KEY` in the code with your actual Loqate API key.
### Test
1. Open your page
2. Enter sort code `40-47-84` and account number `70872490`
3. Validation result appears
Examples validate UK bank accounts. For international accounts (IBAN), see the [International Validate endpoint](/api-reference/bank-validation/international).
***
## Sample Project: Payment Form Integration
This walkthrough shows how to add bank validation to a payment form. Follow along to see a basic form transform into a validation-enabled payment form.
This is a detailed walkthrough. If you just want working code, skip to [Integration Example](#integration-example) or [Standalone HTML Example](#standalone-html-example).
### Before: Basic Payment Form
A payment form without validation:
**This form works, but doesn't validate bank details.** Let's add validation.
***
## How Bank Validation Works
The integration includes four key components:
### 1. Validation Function
A JavaScript function that sends sort codes and account numbers to the Loqate API and returns validation results. The function handles API requests, error checking, and response parsing.
### 2. Visual Feedback
CSS classes and a message element that show users three states:
* **Checking:** Yellow background while validating
* **Valid:** Green background for valid bank details
* **Invalid:** Red background for invalid or mismatched details
### 3. Real-Time Validation
Event listeners on both sort code and account number fields that trigger validation when users finish typing (on blur). This provides immediate feedback without requiring form submission.
### 4. Form Submission Control
Logic that prevents form submission if bank details are invalid, ensuring only validated payment information is processed.
***
## Standalone HTML Example
A minimal bank validation form for quick testing:
**Perfect for:**
* Quick API testing
* Learning how bank validation works
* Simple integrations without checkout flows
**To use:**
1. Copy the code
2. Replace `YOUR_API_KEY`
3. Save and test with different sort codes and account numbers
Test with UK sort codes only. For IBAN validation, use the [International Validate endpoint](/api-reference/bank-validation/international).
## Code on GitHub
If you'd like to browse the code snippets in this implementation guide or clone them, visit the repository on [GitHub](https://github.com/loqate/javascript-docs-sample/tree/main/bank-validation).
## Integration Example
Here's the payment form with all validation components integrated:
**To use this code:**
1. Copy the code
2. Replace `YOUR_API_KEY` with your actual Loqate API key
3. Save as an HTML file
4. Open in a browser to test
5. Customize styling to match your brand
**Key features in this example:**
* Real-time validation on field exit
* Visual feedback for all validation states
* Form submission prevention for invalid details
* Bank and branch information display
* Clean, production-ready code structure
This example validates UK bank accounts only. The sort code must be 6 digits (with or without hyphens) and the account number must be 8 digits.
***
## Integration Tips
### Adding to Your Existing Forms
To add bank validation to your current forms:
1. **Add the validation function** from the integration example to your page's `