diff --git a/documentation.md b/documentation.md
index 546cdae..a1e57d3 100644
--- a/documentation.md
+++ b/documentation.md
@@ -28,21 +28,22 @@ Add a button with the eligibles payment plans for the given purchase amount
### `PaymentPlansOptions`
-| Option name | Type | Required | Description |
-| :---------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| container | `string` | **required** | Your container's selector |
-| purchaseAmount | `number` | **required** | The purchase amount (in euro cents) |
-| plans | `Plan[]` [more info below](#plan-option-plan) | optional | An array of the plans you want to display. If not provided, the widget returns all your available payment plans. |
-| transitionDelay | `number` | optional (default value is `5500`) | The amount of time in between button animations in ms. If the value is set to `-1` there is no loop. |
-| locale | `fr` or `es` or `it` or `de` or `nl` or `pt`, or `en` or local-country format (e.g `fr-FR`, `de-DE`, `it-IT`)[more info below](#locale-option) | optional (default value is `"en"`) | Defines the language displayed on the widgets |
-| hideIfNotEligible | `boolean` | optional (default value is `false`) | Totally hides the widget if set to true and no plan matches the purchase amount. |
-| monochrome | `boolean` | optional (default value is `true`) | If set to `false`, Alma's logo and the active payments plan will be orange (#FA5022). |
-| suggestedPaymentPlan | `number` or `number[]` | optional | Allow to choose which payment plan's tab will be displayed by default. It will have effect only if the selected plan is eligible. If an array is provided, it will select the first eligible plan from this array.
ex: `suggestedPaymentPlan: [10, 4]` In this example, the 10 installments plan will be selected. If it's not eligible, the 4 installments plan will be selected. If the 4 installments plan is not eligible, it will select the first tab. When `suggestedPaymentPlan` is used, the transition is disable. Unless `transitionDelay` is specified. |
-| customerBillingCountry | `string` (e.g `fr` or `es` or `it` or `de` or `nl` or `pt`, or `en`) [more info below](#locale-option) | optional | Allow to display fee plans specific for a country. Example: you're selling in France and Germany, the credit options are only available in France, so you can specify this option to 'fr' to show credits on the widget for french customers.Both options offer the same result, they allow to simplify the integration if there is no information about customer's shipping address. |
-| customerShippingCountry | `string` (e.g `fr` or `es` or `it` or `de` or `nl` or `pt`, or `en`) [more info below](#locale-option) | optional | Allow to display fee plans specific for a country. Example: you're selling in France and Germany, the credit options are only available in France, so you can specify this option to 'fr' to show credits on the widget for french customers.Both options offer the same result, they allow to simplify the integration if there is no information about customer's shipping address. |
-| hideBorder | `boolean` | optional (default value is `false`) | Hide the border if set to true, set to false as default |
-| cards | `cb` and/or `visa` and/or `amex` and/or `mastercard` as an array of strings | optional | Display card logos in the modal |
-| onModalClose | (event) => void | optional | Call back that will be called when the modal is closed |
+| Option name | Type | Required | Description |
+|:------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| container | `string` | **required** | Your container's selector |
+| purchaseAmount | `number` | **required** | The purchase amount (in euro cents) |
+| plans | `Plan[]` [more info below](#plan-option-plan) | optional | An array of the plans you want to display. If not provided, the widget returns all your available payment plans. |
+| transitionDelay | `number` | optional (default value is `5500`) | The amount of time in between button animations in ms. |
+ | locale | `fr` or `es` or `it` or `de` or `nl` or `pt`, or `en` or local-country format (e.g `fr-FR`, `de-DE`, `it-IT`)[more info below](#locale-option) | optional (default value is `"en"`) | Defines the language displayed on the widgets |
+ | hideIfNotEligible | `boolean` | optional (default value is `false`) | Totally hides the widget if set to true and no plan matches the purchase amount. |
+ | monochrome | `boolean` | optional (default value is `true`) | If set to `false`, Alma's logo and the active payments plan will be orange (#FA5022). |
+ | suggestedPaymentPlan | `number` or `number[]` | optional | Allow to choose which payment plan's tab will be displayed by default. It will have effect only if the selected plan is eligible. If an array is provided, it will select the first eligible plan from this array.
ex: `suggestedPaymentPlan: [10, 4]` In this example, the 10 installments plan will be selected. If it's not eligible, the 4 installments plan will be selected. If the 4 installments plan is not eligible, it will select the first tab. When `suggestedPaymentPlan` is used, the transition is disable. Unless `transitionDelay` is specified. |
+ | customerBillingCountry | `string` (e.g `fr` or `es` or `it` or `de` or `nl` or `pt`, or `en`) [more info below](#locale-option) | optional | Allow to display fee plans specific for a country. Example: you're selling in France and Germany, the credit options are only available in France, so you can specify this option to 'fr' to show credits on the widget for french customers.Both options offer the same result, they allow to simplify the integration if there is no information about customer's shipping address. |
+ | customerShippingCountry | `string` (e.g `fr` or `es` or `it` or `de` or `nl` or `pt`, or `en`) [more info below](#locale-option) | optional | Allow to display fee plans specific for a country. Example: you're selling in France and Germany, the credit options are only available in France, so you can specify this option to 'fr' to show credits on the widget for french customers.Both options offer the same result, they allow to simplify the integration if there is no information about customer's shipping address. |
+ | hideBorder | `boolean` | optional (default value is `false`) | Hide the border if set to true, set to false as default |
+ | cards | `cb` and/or `visa` and/or `amex` and/or `mastercard` as an array of strings | optional | Display card logos in the modal |
+ | onModalClose | (event) => void | optional | Call back that will be called when the modal is closed |
+
## Add Modal
@@ -60,30 +61,32 @@ Can be open with the `clickableSelector` option or by calling the `open` methods
### `ModalOptions`
-| Option name | Type | Required | Description |
-| :---------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| container | `string` | **required** | Your container's selector |
-| purchaseAmount | `number` | **required** | The purchase amount (in euro cents) |
-| plans | `Plan[]` [more info below](#plan-option-plan) | optional | An array of the plans you want to display. If not provided, the widget returns all your available payment plans. |
-| locale | `fr` or `es` or `it` or `de` or `nl` or `pt`, or `en` or local-country format (e.g `fr-FR`, `de-DE`, `it-IT`) [more info below](#locale-option) | optional (default value is `"en"`) | Defines the language displayed on the widgets |
-| clickableSelector | `string` | optional (default value is `null`) | If provided, the modal will open when the element matching this query selector is clicked. |
-| customerBillingCountry | `string` (e.g `fr` or `es` or `it` or `de` or `nl` or `pt`, or `en`) [more info below](#locale-option) | optional | Allow to display fee plans specific for a country. Example: you're selling in France and Germany, the credit options are only available in France, so you can specify this option to 'fr' to show credits on the widget for french customers.Both options offer the same result, they allow to simplify the integration if there is no information about customer's shipping address. |
-| customerShippingCountry | `string` (e.g `fr` or `es` or `it` or `de` or `nl` or `pt`, or `en`) [more info below](#locale-option) | optional | Allow to display fee plans specific for a country. Example: you're selling in France and Germany, the credit options are only available in France, so you can specify this option to 'fr' to show credits on the widget for french customers.Both options offer the same result, they allow to simplify the integration if there is no information about customer's shipping address. |
-| cards | `cb` and/or `visa` and/or `amex` and/or `mastercard` as an array of strings | optional | Display card logos in the modal |
-| onClose | (event) => void | optional | Call back that will be called when the modal is closed |
+| Option name | Type | Required | Description |
+|:------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------:|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| container | `string` | **required** | Your container's selector |
+| purchaseAmount | `number` | **required** | The purchase amount (in euro cents) |
+| plans | `Plan[]` [more info below](#plan-option-plan) | optional | An array of the plans you want to display. If not provided, the widget returns all your available payment plans. |
+| locale | `fr` or `es` or `it` or `de` or `nl` or `pt`, or `en` or local-country format (e.g `fr-FR`, `de-DE`, `it-IT`) [more info below](#locale-option) | optional (default value is `"en"`) | Defines the language displayed on the widgets |
+| clickableSelector | `string` | optional (default value is `null`) | If provided, the modal will open when the element matching this query selector is clicked. |
+| customerBillingCountry | `string` (e.g `fr` or `es` or `it` or `de` or `nl` or `pt`, or `en`) [more info below](#locale-option) | optional | Allow to display fee plans specific for a country. Example: you're selling in France and Germany, the credit options are only available in France, so you can specify this option to 'fr' to show credits on the widget for french customers.Both options offer the same result, they allow to simplify the integration if there is no information about customer's shipping address. |
+| customerShippingCountry | `string` (e.g `fr` or `es` or `it` or `de` or `nl` or `pt`, or `en`) [more info below](#locale-option) | optional | Allow to display fee plans specific for a country. Example: you're selling in France and Germany, the credit options are only available in France, so you can specify this option to 'fr' to show credits on the widget for french customers.Both options offer the same result, they allow to simplify the integration if there is no information about customer's shipping address. |
+| cards | `cb` and/or `visa` and/or `amex` and/or `mastercard` as an array of strings | optional | Display card logos in the modal |
+| onClose | (event) => void | optional | Call back that will be called when the modal is closed |
+
## Plan option: `Plan`
You can customize the displayed plans with this parameter. You can hide a plan that would be displayed otherwise by adding the other plans with this information:
| Option name | Type | Required | Description |
-| :---------------- | :------: | :----------: | :------------------------------------------------------------------------ |
+|:------------------|:--------:|:------------:|:--------------------------------------------------------------------------|
| installmentsCount | `number` | **required** | The number of installment in the plan |
| minAmount | `number` | **required** | The minimum purchase amount required to activate the plan (in euro cents) |
| maxAmount | `number` | **required** | The maximum purchase amount required to activate the plan (in euro cents) |
| deferredDays | `number` | optional | The number of days by which the first payment will be deferred |
| deferredMonths | `number` | optional | The number of months by which the first payment will be deferred |
+
By default, the widget will display all your available payment plans.
## Customize CSS
@@ -96,20 +99,20 @@ You can see the list by inspecting the element with your dev tools. Don't use th
The locales supported by the widgets are :
-- `en` - Generic English - This is the locale set by default.
-- `fr` - Generic French
-- `fr-FR` - French from France
-- `de` - Generic German
-- `de-DE` - German from Germany
-- `it` - Generic Italian
-- `it-IT` - Italian from Italy
-- `es` - Generic Spanish
-- `es-ES` - Spanish from Spain
-- `pt` - Generic Portuguese
-- `pt-PT` - Portuguese from Portugal
-- `nl` - Generic Dutch
-- `nl-NL` Dutch from The Netherlands
-- `nl-BE` Dutch from Belgium
+* `en` - Generic English - This is the locale set by default.
+* `fr` - Generic French
+* `fr-FR` - French from France
+* `de` - Generic German
+* `de-DE` - German from Germany
+* `it` - Generic Italian
+* `it-IT` - Italian from Italy
+* `es` - Generic Spanish
+* `es-ES` - Spanish from Spain
+* `pt` - Generic Portuguese
+* `pt-PT` - Portuguese from Portugal
+* `nl` - Generic Dutch
+* `nl-NL` Dutch from The Netherlands
+* `nl-BE` Dutch from Belgium
If the specific locale for the country you target is available, we suggest to use it instead of the generic locale.