...

In this solution we would have the flexibility of a more dynamic change, but we would be linking the feature to the feature flag and adding another flag to the system.

The change needed to add the flags is just a change in the paycomet-credit-card-form.tsx file. To do this, you need to create a component to add the flags and call it after paymentJetId is enabled, as it defines when the form is ready to be displayed to the user.

/**
 * This flag retrieve all accepted cards types.
 */
 ACCEPTED-CARDS-TYPES = 'accepted-cards-types',

const acceptedCardsFeatureFlag = useFlag(
    LaunchDarklyFlag.ACCEPTED_CARDS
);

const creditTypeAccepted = () => {
  if(sodexo || chequeGourmet || ticketRestaurant){
    return
  }
  
  const mappedAcceptedCards = acceptedCardsFeatureFlag.map((cardType) => {
    return (
      <Icon .... >
    )
  })
  
  return (
    <>
      <h3>Card Details</h3>
      {mappedAcceptedCards()}
    </>
  );
};

return (
  <>
    <PaymentMethodSelect>
    ...
    </PaymentMethodSelect>
    {isAddCardOpen && creditTypeAccepted()}
  </>
)

✅ Pros:

• Quick implementation

• Ease of changing card type values

...

• Added another request to userAccounts to obtain feature flag data

✅ Proposed Solution

Solution #2 - Get accepted cards in the launch-darkly

The change needed to add the flags is just a change in the paycomet-credit-card-form.tsx file. To do this, you need to create a component to add the flags and call it after paymentJetId is enabled, as it defines when the form is ready to be displayed to the user.

/**
 * This flag retrieve all accepted cards types.
 */
 ACCEPTED-CARDS-TYPES = 'accepted-cards-types',

...

...

Solution #3.3 - Get accepted cards in the launch-darkly

...

To configure the feature flag correctly, it is necessary to enable the feature flag and configure the variations to add the values ​​of the accepted card types. For example:

Solution #2 - Get accepted cards in the launch-darkly

...