santander-personal-calc

Santander personal credit calculator widget. Works in plain HTML and React / Next.js.

How it works

The widget renders an inline button that opens a modal with a personal credit simulator (fixed APR, instalment calculator). All calculations happen in the browser — no backend required.

Plain HTML

<script
  src="https://cdn.jsdelivr.net/npm/santander-personal-calc/loader.js"
  data-total="2500"
  data-lang="fr">
</script>

Available attributes

| Attribute | Description | Default | |---|---|---| | data-total | Loan amount in euros | 0 | | data-lang | Language: fr en nl de | fr | | data-primary | Primary hex color (without #) | e60000 | | data-bg | Modal background color | ffffff | | data-header-bg | Modal header background | same as primary | | data-header-fg | Modal header text color | ffffff | | data-cost-color | Total cost highlight color | 1a1a1a | | data-btn-text | Custom button label | auto-translated | | data-width | Button width | auto | | data-autoopen | Open modal on page load, no button | false |

Shopify Liquid

<script
  src="https://cdn.jsdelivr.net/npm/santander-personal-calc/loader.js"
  data-total="{{ cart.total_price | divided_by: 100.0 }}"
  data-lang="{{ request.locale.iso_code }}">
</script>

React / Next.js

npm install santander-personal-calc

import { SantanderPersonalButton } from "santander-personal-calc";

<SantanderPersonalButton total={2500} lang="fr" />

Props

| Prop | Type | Default | |---|---|---| | total | number | — | | lang | "fr" \| "en" \| "nl" \| "de" | "fr" | | primary | string | "#e60000" | | bg | string | "#ffffff" | | headerBg | string | same as primary | | headerFg | string | "#ffffff" | | costColor | string | "#1a1a1a" | | btnText | string | auto-translated | | className | string | — | | style | object | — |

License

UNLICENSED — private use only.