Assets Keys
This table contains the resources for customizing the icons in the widget: To start you need the correct asset KEY with the URL, in the DESCRIPTION column you will find this key correspond to a PSP or a specific element used in the widget.
You can use these assets in the ui.assets.overrides object like below :
widgetManager.createWidget({
interface: "PAYMENT",
name: "my_widget_with_assets_overrides",
ui: {
assets: {
overrides: {
closeIcon: "https://link-to-image/asset.png",
creditcard: [
"https://link-to-image/visa.png",
"https://link-to-image/mastercard.png",
],
},
},
},
});
You can either use a URL or an internal link to your project to override assets. For example :
{
creditcard: "/src/img/assets/my-visa-asset.png"
}
Assets Keys
| Asset Key | Data Type | Description |
|---|---|---|
| - amex | URL | American Express icon |
| - cb | URL | Cartes Bancaires icon |
| - creditcard | URL | Creditcard icon |
| - cvv | URL | CVV icon |
| - giftcard | URL | Giftcard icon |
| - greyBG | URL | Used behind the form widget |
| - info | URL | ⓘ in the form widget |
| - infoFilled | SVG | ⓘ, flat and filled, using currentColor |
| - mastercard | URL | Mastercard icon |
| - visa | URL | Visa icon |
| - blueBG | URL | Background image of the credit card during tokenization |
| - doNotDisturb | URL | Not currently used |
| - expressCheckout | URL | Not currently used |
| - validIcon | URL | Validation icon positioned in inputs after check |
| - errorIcon | URL | Invalidation icon positioned in inputs after check |
| - successFilled | SVG | ✓ icon, round, flat and filled, using currentColor |
| - warningFilled | SVG | ⚠ icon, flat and filled, using currentColor |
| - bin-hover | URL | Garbage can icon to delete token on hover |
| - bin | URL | Garbage can icon to delete token |
| - edit-hover | URL | Edit icon to edit a token on hover |
| - edit | URL | Edit icon to edit a token |
| - alert | URL | Alert icon positioned in inputs after check |
| - closeIcon | URL | Close icon (not currently used) |
| - lock | URL | Padlock icon |
| - fintecture | URL | PSP |
| - illicado | URL | PSP |
| - floa | URL | PSP |
| - oneyCb10x | URL | PSP |
| - oneyCb10xsansfrais | URL | PSP |
| - oneyCb12x | URL | PSP |
| - oneyCb12xsansfrais | URL | PSP |
| - oneyCb3x | URL | PSP |
| - oneyCb3xsansfrais | URL | PSP |
| - oneyCb4x | URL | PSP |
| - oneyCb4xsansfrais | URL | PSP |
| - oneyPaylater | URL | PSP |
| - oneycard | URL | PSP |
| - paypal | URL | PSP |
| - sepa | URL | PSP |
| - upstreampay | URL | PSP |
| - applePay | URL | PSP |
| - cofidis | URL | PSP |
| - cofidis3x | URL | PSP |
| - cofidis4x | URL | PSP |
| - cofidis512x | URL | PSP |
| - cofidisPay | URL | PSP |
| - klarna | URL | PSP |
| - slimpay | URL | PSP |
| - fastForward | URL | Not currently used |
| - googlePay | URL | Google's wallet logo |
| - share | URL | Share icon |
| - scalapay | URL | Scalapay icon |
| - payconiq | URL | Payconiq icon |
| - payconiqFrame | URL | Payconiq qr code frame image |
| - star | URL | Star icon |
| - add_token_button_icon | URL | Optional icon for the add token button |
| - checkbox-icon-checked | URL | Checkbox icon when selected |
| - checkbox-icon-unchecked | URL | Checkbox icon when unselected |
| - checkbox-icon-disabled | URL | Checkbox icon when disabled |
| - radio-icon-checked | URL | Radio icon when selected |
| - radio-icon-unchecked | URL | Radio icon when unselected |
| - radio-icon-disabled | URL | Radio icon when disabled |