The APPROVE Finance Module adds an equipment financing section to your website. Visitors see what their monthly payment would be, and start an application, without leaving your page.
It is one line of code plus one tag. There is nothing to install, nothing to maintain, and no rates to keep up to date: everything comes from your APPROVE account, so when you change something in APPROVE, every page carrying the module updates itself.
It works on any website where you can add your own HTML - WordPress, Squarespace, Wix, Shopify, Webflow, HubSpot, or a site your developer built from scratch.
{info} The Finance Module is separate from the APPROVE Web Plugin. You can run either one on its own, or both together - see What the Apply Buttons Do.
The module has three sections. All three appear unless you turn one off.
| Section | Description |
|---|---|
| Introduction | A headline, a short explanation, your equipment photo, and a link to start an application. |
| Financing Calculator | Visitors move two sliders (purchase amount and term) and immediately see their estimated monthly payment. |
| How it Works | The three steps of applying, an Apply button, and a link to APPROVE's frequently asked questions. |
See Choosing Which Sections Show to display only the sections you want.
There are two pieces. Paste them both and you are done.
Add this once per page. Most people put it just before the closing </body> tag, or in their theme's "header/footer scripts" box.
<script type="module"
src="https://turbo-cdn.approvepayments.com/modules/v1/production/approve-finance-module.es.js"></script>Put this wherever you want the financing section to appear.
<approve-finance-module approve-id="YOUR-ID-HERE"></approve-finance-module>Replace YOUR-ID-HERE with your APPROVE ID. Both pieces together:
<script type="module"
src="https://turbo-cdn.approvepayments.com/modules/v1/production/approve-finance-module.es.js"></script>
<approve-finance-module approve-id="YOUR-ID-HERE"></approve-finance-module>{primary} Get your APPROVE ID before you start. Almost everything the module shows comes from it - your rates, your company name, your photo, and where the Apply buttons go. You can retrieve your ID by logging in to your account and going to APPROVE Settings > Web Integration > General.
| Platform | Where |
|---|---|
| WordPress | A Custom HTML block; the loader can go in your theme's footer scripts |
| Squarespace | A Code Block; the loader can go in Settings > Advanced > Code Injection |
| Wix | Embed > Custom Embed > Embed a Widget |
| Shopify | A Custom Liquid section, or the theme's .liquid template |
| Webflow | An Embed element; the loader can go in Project Settings > Custom Code |
| HubSpot | An HTML module in the page editor |
{warning} Most website builders have a plain rich-text block that quietly strips
<script>tags. If nothing appears, that is almost always the reason - use the dedicated embed or custom-code block instead.
Every setting is optional except your APPROVE ID. The wording, the photo, the rates, and where the buttons go all come from your APPROVE account, so there is nothing to keep in sync by hand.
| Setting | What it does | Default |
|---|---|---|
background-color |
The module's background, and the panel the payment figure sits in. | #FFFFFF (white) |
tile-color |
The calculator panel and the three step tiles. | #F1F1F1 (light grey) |
accent-color |
Sliders, the payment figure, buttons, icons. | Your APPROVE accent color |
<approve-finance-module
approve-id="YOUR-ID-HERE"
background-color="/docs/7.0/approve_finance_module#10151c"
tile-color="/docs/7.0/approve_finance_module#1b2330"
accent-color="/docs/7.0/approve_finance_module#4ea1ff"
></approve-finance-module>You usually don't need accent-color. The module already uses the accent color from your APPROVE finance landing page, so it matches your branding out of the box - change it in APPROVE and every page follows. Set the attribute only when you want this one placement to differ. With no APPROVE ID, or no color chosen, it falls back to APPROVE blue (#3276FA).
{info} There is no text color setting, on purpose. Text is black on light backgrounds and white on dark ones, worked out from your
background-color, so the module stays readable whichever colors you pick.
These are on/off switches - you don't give them a value, you either include the word or you don't. Leave them all out and all three sections appear.
| Setting | What it removes |
|---|---|
hide-hero |
The introduction - headline, description and photo. |
hide-calculator |
The financing calculator. |
hide-how-it-works |
The three steps, the Apply button and the FAQ link. |
Just the calculator, nothing else:
<approve-finance-module approve-id="YOUR-ID-HERE" hide-hero hide-how-it-works></approve-finance-module>Everything except the calculator:
<approve-finance-module approve-id="YOUR-ID-HERE" hide-calculator></approve-finance-module>Your APPROVE ID is the whole configuration. With it, the module shows:
Change any of these in APPROVE and every page carrying the module updates itself. There is no copy of these values sitting in your website to go stale.
The "View FAQs" link always goes to APPROVE's FAQ page for borrowers, whether or not you have an APPROVE ID. There is no setting for it.
It fits the space you give it. In a wide section the calculator lays out in two columns and the steps sit three across; in a narrow column everything stacks. It measures its own container, not the browser window, so it behaves properly inside columns, tabs and page-builder blocks.
It won't clash with your site's design. The module is sealed off from your page's styling. Your fonts, colors and spacing can't leak in and break it, and its styling can't leak out and affect anything else on your page.
It keeps its own side padding, so you can drop it into a full-width section without it running to the edge of the screen.
Use it more than once. Several on one page work independently - a full introduction near the top, a calculator on its own further down.
Browsers. Everything from roughly 2023 onward gets the full experience. Older browsers get a working module in a simpler single-column layout.
The module emits three events on the element, so the page around it can react - analytics, custom Apply handling, and so on. They do not bubble past the element.
| Event | Details provided |
|---|---|
calculator-change |
amount, term, payment, source - on load and on every recalculation |
apply-click |
amount, term, payment |
section-179-open |
none |
<script>
document.querySelector('approve-finance-module')
.addEventListener('calculator-change', function (e) {
console.log(e.detail) // { amount, term, payment, source }
})
</script>source reports where the numbers came from - anything other than stub means real rates for your account. window.approve_finance_module.version reports which build is on the page, which support may ask for.
Nothing appears where I put it.
Check the loader line is on the page and includes type="module". Then check whether your platform stripped the <script> tag - use a dedicated custom-code or embed block rather than a plain text block.
The payments look generic, or my name and photo are missing.
Your approve-id is missing or incorrect. Check it against what APPROVE gave you.
The Apply buttons don't do anything. Same cause - without a valid APPROVE ID there is no landing page to send people to.
The photo isn't mine. Your name showing but not your photo means no photo has been uploaded to your finance landing page settings in APPROVE.
The colors look wrong for my section.
Set background-color and tile-color to match the part of your page it sits in.
It looks different on my staging site. The module is always loaded fresh from APPROVE, so both sites run the same version. Any difference is coming from the page around it.
Contact APPROVE with the web address of the page you placed the module on, and a description of what you're seeing.