Allow custom labels in installments options

Is your feature request related to a problem? Please describe. I find difficult to configure (too much magic behind the scenes) and not quite custom the way the installment options are configured, because they use the drop-in format, which in some cases does not result in the expected output.

Describe the solution you’d like Allow custom text in the installments dropdowns, instead of the current format that is done behind the scenes.

Describe alternatives you’ve considered

Allow the developer to, instead of proving a simple array of numbers, each for every installment, allow to provide custom item labels, like: installmentOptions: { card: { values: [ { value: 1, label: 'Pay 10000€ at once' }, { value: 2, label: 'Pay 5000€ in two times' } ] } }

Maybe something like:

const installmentItemsMapper = value => ({
  id: value,
  name: typeof value === 'object' && value.label ? value.label : amount.value ? `${value}x ${getPartialAmount(value)}` : value
})

Additional context Add any other context or screenshots about the feature request here.

[lluishi93]

Sorry, haven’t seen this one! that’s awesome, thank you a lot

[marcperez]

Hi @lluishi93,

We just released a new feature (#83) that should help you customize the installment option translations. This feature has been included in the v3.10.0 release, which is already available on NPM and will soon be available as a script tag.

As a quick recap of the feature:

The new translation key used in the installment options is "installmentOption": "%{times}x %{partialValue}". This means you can customize the translation including the two variables you already see in the current dropdown. We also support plurals and specific count translations. An example could be:

const translations = {
  "en-US": {
    "installmentOption": "Pay %{partialValue} at once",
    "installmentOption__plural": "Pay %{partialValue} in %{times} times",
  }
};

Cheers!