Appearance
⚙️ Custom Configuration
The register function accepts a configuration object that allows you to customize the widget's behavior, appearance, and integrations. Below is a detailed breakdown of each configuration option you can pass
baseUrl
Type: stringDefault: ''
The base URL for your Payment Initiation Service (PIS) API. This is where the widget sends payment requests and fetches related data. Example: 'https://paymentinitiationservice-rest-widget.stablemint.dev'
labels
Type: Record<string, string>Default: {}
A collection of localized text labels used throughout the widget. Use this to customize or translate button text, messages, and other UI strings. All available translation keys:
jsonc
{
"advanced.deposit.init.mainTitle": "Make a Payment",
"advanced.deposit.init.amountInputLabel": "Enter amount",
"advanced.deposit.init.amountInputDescription": "Payment limits: Min: {{minLimit}} • Max: {{maxLimit}}",
"advanced.deposit.init.submitLabel": "Continue",
"advanced.deposit.init.maxError": "Exceeds the max limit of {{maxDepositLimit}}",
"advanced.deposit.init.minError": "Must be at least {{minDepositLimit}}",
"advanced.deposit.method.mainTitle": "Pay {{depositAmount}}",
"advanced.deposit.method.mainSubtitle": "Choose a payment method",
"advanced.deposit.method.item.OpenBanking.header": "Instant Bank Transfer",
"advanced.deposit.method.item.OpenBanking.text": "Quick and secure deposits without entering your personal bank information.",
"advanced.deposit.method.item.OpenBanking.recommended": "Select Your Bank",
"advanced.deposit.method.item.ManualBankTransfer.header": "Manual Bank Transfer",
"advanced.deposit.method.item.ManualBankTransfer.text": "View bank details to complete your transfer manually.",
"advanced.deposit.method.item.ManualBankTransfer.recommended": "Show Bank Information",
"advanced.deposit.method.recommended": "Recommended",
"advanced.deposit.manual.details.mainTitle": "Manual Transfer for {{depositAmount}}",
"advanced.deposit.manual.details.subTitle": "Complete your payment manually, once the funds are received and processed, they will appear in your account balance.",
"advanced.deposit.manual.details.listHeader": "Bank information",
"advanced.deposit.manual.details.copyDetails": "Copy details",
"advanced.deposit.manual.details.list.amountToTransfer": "Amount to Transfer",
"advanced.deposit.manual.details.list.beneficiary": "Beneficiary",
"advanced.deposit.manual.details.list.bankName": "Bank Name",
"advanced.deposit.manual.details.list.iban": "IBAN",
"advanced.deposit.manual.details.list.bicSwift": "BIC/SWIFT",
"advanced.deposit.manual.details.list.reference": "Reference",
"advanced.deposit.manual.details.submitLabel": "Confirm Manual Transfer",
"advanced.deposit.manual.details.changeMethodLabel": "Change Payment Method",
"advanced.deposit.manual.summary.mainTitle": "{{depositAmount}} Deposit Request Received",
"advanced.deposit.manual.summary.subTitle": "Complete your payment manually, once the funds are received and processed, they will appear in your account balance. Make the payment within 5 days, or the request will be cancelled.",
"advanced.deposit.manual.summary.primaryButtonLabel": "Explore Games",
"advanced.deposit.manual.summary.secondaryButtonLabel": "Need Help?",
"advanced.deposit.manual.summary.listHeader": "Bank information",
"advanced.deposit.manual.summary.copyDetails": "Copy details",
"advanced.deposit.manual.summary.list.amount": "Amount to Transfer",
"advanced.deposit.manual.summary.list.beneficiary": "Beneficiary",
"advanced.deposit.manual.summary.list.bankName": "Bank Name",
"advanced.deposit.manual.summary.list.iban": "IBAN",
"advanced.deposit.manual.summary.list.bicSwift": "BIC/SWIFT",
"advanced.deposit.manual.summary.list.reference": "Reference",
"advanced.bankConfirm.mainTitle": "Confirm {{depositAmount}} Payment",
"advanced.bankConfirm.subTitle": "You'll complete your transaction through your bank's secure environment.",
"advanced.bankConfirm.addMoreBank": "Add Payment Method",
"advanced.bankConfirm.submitLabel": "Pay with {{bankName}}",
"advanced.bankConfirm.validating": "Validating",
"advanced.bankConfirm.validating.tooltip": "This payment method will be saved once the first transaction is successfully completed.",
"advanced.bankExtraFields.mainTitle": "Confirm your bank details",
"advanced.bankExtraFields.subTitle": "To securely connect your account, <strong>{{bankName}}</strong> requires some details. You'll review and authorise the payment directly on your bank's website.",
"advanced.bankExtraFields.selectedBankLabel": "You're connecting to",
"advanced.bankExtraFields.submitLabel": "Save bank and continue",
"advanced.bankExtraFields.changeBankLabel": "Change Bank",
"advanced.bankExtraFields.fieldLabel.name": "Name",
"advanced.bankExtraFields.fieldLabel.iban": "IBAN",
"advanced.bankExtraFields.fieldPlaceholder.name": "Name",
"advanced.bankExtraFields.fieldPlaceholder.iban": "e.g. SE45 5000 0000 0583 9825 7466",
"advanced.bankExtraFields.required": "{{label}} is required",
"advanced.bankExtraFields.invalid": "{{label}} is invalid",
"advanced.removeBank.mainTitle": "Remove {{bankName}}",
"advanced.removeBank.subTitle.selectedOnly": "Removing this bank will leave you without any saved payment methods. You'll need to select and add a new bank to continue making the deposit.",
"advanced.removeBank.subTitle.selectedFallback": "Removing this bank will automatically select your remaining saved bank for future payment.",
"advanced.removeBank.subTitle.selectedMultiple": "Once removed, you can select another saved bank for your next payment.",
"advanced.removeBank.subTitle.nonselected": "Are you sure you want to remove this bank? You can add it again later if needed.",
"advanced.removeBank.removeButtonLabel": "Remove Bank",
"advanced.removeBank.cancelButtonLabel": "Cancel",
"advanced.bankSelector.mainTitle.first": "Select Your Bank to Get Started",
"advanced.bankSelector.mainTitle.extra": "Select Your Bank",
"advanced.bankSelector.subTitle": "Pay securely from your bank. No personal information needed.",
"advanced.bankSelector.country.label": "Country",
"advanced.bankSelector.bank.label": "Bank",
"advanced.bankSelector.bank.placeholder": "Search for your bank",
"advanced.bankSelector.popularBank.label": "Popular Banks in",
"advanced.bankSelector.empty.title": "Bank Not Found",
"advanced.bankSelector.empty.subTitle": "This bank isn't supported for instant deposits. Please choose another bank.",
"advanced.bankSelector.empty.changeMethod": "Change Payment Method",
"advanced.exitFlow.mainTitle": "Exiting the Deposit Flow?",
"advanced.exitFlow.subTitle": "Your deposit isn't complete. If you exit now, you'll have to start over.",
"advanced.exitFlow.continueButtonLabel": "Continue Deposit",
"advanced.exitFlow.exitButtonLabel": "Exit Anyway",
"advanced.inbaInfo.mainTitle": "Need help finding your IBAN?",
"advanced.inbaInfo.subTitle": "The IBAN (International Bank Account Number) is a unique identifier for your bank account. Its length depends on the country. You’ll usually find it in your banking app under “Account Details” or “Payment Info”, or on your bank statement.",
"advanced.inbaInfo.exampleTitle": "These examples show how IBANs look in different countries:",
"advanced.inbaInfo.firstExampleTitle": "SE: SE45 5000 0000 0583 9825 7466",
"advanced.inbaInfo.secondExampleTitle": "Belgium: BE68 5390 0754 7034",
"advanced.inbaInfo.thirdExampleTitle": "Italy: IT60 X054 2811 1010 0000 0123 456",
"advanced.inbaInfo.firstExampleDescriptionTitle": "ISO Country code:",
"advanced.inbaInfo.firstExampleDescriptionText": "The first two letters represent the country where your bank is located.",
"advanced.inbaInfo.secondExampleDescriptionTitle": "Check digits:",
"advanced.inbaInfo.secondExampleDescriptionText": "Used to validate that the IBAN is correct.",
"advanced.inbaInfo.thirdExampleDescriptionTitle": "Bank code:",
"advanced.inbaInfo.thirdExampleDescriptionText": "Identifies the bank within the country.",
"advanced.inbaInfo.fourthExampleDescriptionTitle": "Account Number:",
"advanced.inbaInfo.fourthExampleDescriptionText": "Your personal bank account reference."
}chips
Type: string[]Default: []
An array of preset amount options (chips) that users can quickly select from when entering payment amounts. Example:
js
["10", "20", "50", "100"];showCountrySelector
- Type:
boolean - Default:
false
Determines whether to show a dropdown allowing users to select their country when adding a new bank. When set to true, users can pick their country, which influences the list of available banks shown.
If set to false, the widget uses the initially provided country configuration and does not allow changing it. In this case, only banks from the preset country will be available.
showBankSearch
Type: booleanDefault: false
If true, the widget will show a search input for users to find and select their bank quickly. Useful for improving user experience in multi-bank scenarios.
terms
- Type:
AppConfigTerm[] - Default:
[]
An array of term objects shown on the DEPOSIT_INIT step at the bottom of the widget. These terms provide important informational messages to users.
Each term includes:
icon(string): An SVG or HTML string representing an icon or graphic displayed alongside the term.text(string): The term’s text content.
Example:
js
[
{
icon: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="green" viewBox="0 0 16 16">
<circle cx="8" cy="8" r="7" stroke="green" stroke-width="2" fill="none" />
<path d="M5 8l2 2 4-4" stroke="green" stroke-width="2" fill="none" />
</svg>`,
text: `Your payment is secure and encrypted.`,
},
];minDepositLimit
Type: numberDefault: 0
Sets the minimum allowed deposit amount. The widget will validate input amounts to ensure they are not below this threshold.
maxDepositLimit
Type: numberDefault: 0
Sets the maximum allowed deposit amount. Payments exceeding this value will be disallowed by the widget.
showAmountStep
Type: booleanDefault: false
Controls whether the amount step (DEPOSIT_INIT) is visible during the payment process. Set to true to display the amount selection UI step explicitly.
theme
Type: objectDefault: {}
Override widget colors by specifying CSS custom properties. Each variable controls the color of a specific widget part.
All CSS Variables
json
{
"--advanced-background": "#FFFFFF",
"--advanced-header-title-foreground": "#3A3A3A",
"--advanced-header-close-icon-foreground": "#A0A0A0",
"--advanced-header-close-icon-hover-foreground": "#3A3A3A",
"--advanced-popup-overlay-background": "rgba(25, 28, 31, 0.7)",
"--advanced-popup-content-background": "#FFFFFF",
"--advanced-popup-close-icon-foreground": "#A0A0A0",
"--advanced-popup-close-icon-hover-foreground": "#3A3A3A",
"--advanced-error-text-foreground": "#E03E3E",
"--advanced-error-icon-foreground": "#E03E3E",
"--advanced-terms-background": "#F9F9F9",
"--advanced-terms-icon-foreground": "#A0A0A0",
"--advanced-terms-text-foreground": "#A0A0A0",
"--advanced-terms-link-foreground": "#3A82F7",
"--advanced-deposit-init-input-description-foreground": "#767676",
"--advanced-payment-method-main-subtitle-foreground": "#555555",
"--advanced-payment-method-icon-background": "#E5F1FF",
"--advanced-payment-method-icon-foreground": "#3A82F7",
"--advanced-payment-method-item-header-foreground": "#222222",
"--advanced-payment-method-item-text-foreground": "#555555",
"--advanced-payment-method-item-recommended-foreground": "#27AE60",
"--advanced-payment-method-item-recommended-background": "#E6F4EA",
"--advanced-payment-method-arrow-icon-foreground": "#A0A0A0",
"--advanced-payment-method-item-hover-background": "#F0F0F0",
"--advanced-payment-method-item-border-foreground": "#D9D9D9",
"--advanced-payment-method-item-border-hover-foreground": "#B0B0B0",
"--advanced-payment-method-recommended-item-border-foreground": "#3A82F7",
"--advanced-payment-method-recommended-item-border-hover-foreground": "#2F68D9",
"--advanced-manual-details-subtitle-foreground": "#767676",
"--advanced-manual-details-list-background": "#F5F5F5",
"--advanced-manual-details-list-copy-text-foreground": "#3A82F7",
"--advanced-manual-details-list-copy-icon-foreground": "#3A82F7",
"--advanced-manual-details-list-copy-icon-hover-foreground": "#8AAEF7",
"--advanced-manual-summary-main-title-foreground": "#3A3A3A",
"--advanced-manual-summary-sub-title-foreground": "#767676",
"--advanced-manual-summary-list-background": "#F5F5F5",
"--advanced-manual-summary-list-copy-text-foreground": "#3A82F7",
"--advanced-manual-summary-list-copy-icon-foreground": "#3A82F7",
"--advanced-bank-confirm-sub-title-foreground": "#767676",
"--advanced-bank-confirm-checkbox-selected-border-foreground": "#3A82F7",
"--advanced-bank-confirm-checkbox-unselected-border-foreground": "#D9D9D9",
"--advanced-bank-confirm-checkbox-unselected-border-hover-foreground": "#A0A0A0",
"--advanced-bank-confirm-remove-icon-foreground": "#A0A0A0",
"--advanced-bank-confirm-remove-icon-hover-foreground": "#E03E3E",
"--advanced-bank-confirm-remove-icon-background": "#F9F9F9",
"--advanced-bank-confirm-remove-icon-hover-background": "#FDE8E8",
"--advanced-bank-confirm-bank-logo-border-foreground": "#A0A0A0",
"--advanced-bank-confirm-bank-add-more-icon-foreground": "#3A82F7",
"--advanced-bank-confirm-bank-add-more-text-foreground": "#3A82F7",
"--advanced-bank-confirm-bank-submit-icon-foreground": "#FFFFFF",
"--advanced-bank-confirm-info-icon-background": "#767676",
"--advanced-bank-confirm-tooltip-background": "#3A3A3A",
"--advanced-bank-confirm-tooltip-foreground": "#A0A0A0",
"--advanced-bank-confirm-tooltip-icon-foreground": "#FFFFFF",
"--advanced-extra-fields-sub-title-foreground": "#767676",
"--advanced-extra-fields-selected-bank-border-foreground": "#767676",
"--advanced-extra-fields-selected-bank-background": "#F9F9F9",
"--advanced-extra-fields-selected-bank-bank-logo-border-foreground": "#A0A0A0",
"--advanced-extra-fields-selected-bank-name-foreground": "#555555",
"--advanced-extra-fields-selected-bank-label-foreground": "#767676",
"--advanced-extra-fields-field-tooltip-foreground": "#A0A0A0",
"--advanced-extra-fields-field-label-foreground": "#555555",
"--advanced-extra-fields-field-tooltip-hover-foreground": "#555555",
"--advanced-remove-bank-main-title-foreground": "#222222",
"--advanced-remove-bank-sub-title-foreground": "#767676",
"--advanced-bank-selector-sub-title-foreground": "#767676",
"--advanced-bank-selector-country-label-foreground": "#555555",
"--advanced-bank-selector-bank-label-foreground": "#555555",
"--advanced-bank-selector-search-icon-active-foreground": "#555555",
"--advanced-bank-selector-search-icon-inactive-foreground": "#A0A0A0",
"--advanced-bank-selector-popular-bank-text-foreground": "#767676",
"--advanced-bank-selector-popular-bank-selected-bank-foreground": "#555555",
"--advanced-bank-selector-bank-border-foreground": "#D9D9D9",
"--advanced-bank-selector-bank-logo-border-foreground": "#A0A0A0",
"--advanced-bank-selector-bank-hover-background": "#F9F9F9",
"--advanced-bank-selector-bank-select-icon-foreground": "#A0A0A0",
"--advanced-bank-selector-bank-select-icon-hover-foreground": "#555555",
"--advanced-bank-selector-empty-bank-icon-foreground": "#A0A0A0",
"--advanced-bank-selector-empty-title-foreground": "#555555",
"--advanced-bank-selector-empty-sub-title-foreground": "#767676",
"--advanced-exit-flow-main-title-foreground": "#222222",
"--advanced-exit-flow-sub-title-foreground": "#767676",
"--advanced-iban-info-main-title-foreground": "#0099FF",
"--advanced-iban-info-sub-title-foreground": "#767676",
"--advanced-iban-info-example-title-foreground": "#767676",
"--advanced-iban-info-example-list-item-foreground": "#767676",
"--advanced-iban-info-structure-border-foreground": "#A0A0A0",
"--advanced-iban-info-structure-number-foreground": "#3A82F7",
"--advanced-iban-info-structure-number-background": "#E5F1FF",
"--advanced-iban-info-structure-code-foreground": "#767676",
"--advanced-iban-info-structure-code-background": "#D9D9D9"
}design
Type: objectDefault: {}
An object to override Tailwind CSS configuration within the widget. Use this to customize spacing, font sizes, colors, and any other Tailwind design tokens as needed.
Example
json
{
"theme": {
"extend": {
"spacing": {
"xs": "4px",
"sm": "8px",
"md": "12px",
"lg": "16px",
"xl": "20px",
"2xl": "24px",
"3xl": "32px",
"4xl": "40px"
},
"fontFamily": {
"heading-family": "var(--heading-family)",
"body-family": "var(--body-family)"
}
},
"fontSize": {
"h1": ["48px", "70px"],
"h2": ["36px", "56px"],
"h3": ["30px", "46px"],
"h4": ["26px", "40px"],
"h5": ["22px", "34px"],
"h6": ["18px", "30px"],
"h7": ["16px", "22px"],
"xs": ["10px", "12px"],
"sm": ["12px", "16px"],
"md": ["14px", "22px"],
"lg": ["16px", "26px"],
"xl": ["18px", "30px"],
"2xl": ["22px", "34px"],
"3xl": ["32px", "40px"]
}
}
}Notes
- This object directly maps to Tailwind's configuration options.
- You can override any Tailwind config key like
spacing,fontSize,colors,borderRadius, etc. - Useful for fine-tuning widget appearance consistent with your brand or design system.