...

The first solution is to add a mapper just to the frontend to obtain the types of cards accepted for payment and directly obtain these values ​​that will be displayed. Changing accepted cards is very infrequently, we would not have problems with changes in these fields.

✅ Pros:

• Quick implementation

Cons:

• Changes to information require engineering time

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

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()}
  </>
)

Feature Flag

✅ Pros:

• Quick implementation / less complex

• Ease of changing card type values

Solution #3 - Get accepted cards in the backend with launch-darkly

...

note over Frontend,Graphql: No endpoint implentation
Frontend->Payment Service: Get accepted card types
Payment Service->Launch Darkly (Platform): Get feature flag value
Payment Service<-Launch Darkly (Platform): Retrieve feature flag value
Payment Service->Frontend:Retrieve accepted card types

✅ Pros:

• Ease of changing card type values

Cons:

• More robust implementation

• Creating new endpoints

Solution #3.2 - Frontend integrate endpoint directly to graphql/fulfillment

...

Frontend->Graphql: Get accepted card types
Graphql->Launch Darkly (Platform): Get feature flag value
Graphql<-Launch Darkly (Platform): Retrieve feature flag value
Frontend<-Graphql:Retrieve accepted card types

✅ Pros:

• Ease of changing card type values

Cons:

• More robust implementation

• Creating new endpoints

Solution #3.3 - Frontend integrate endpoint directly to userAccounts endpoint

...

Frontend->Graphql (UserAccounts): Get accepted card types
Graphql (UserAccounts)->Launch Darkly (Platform): Get feature flag value
Graphql (UserAccounts)<-Launch Darkly (Platform): Retrieve feature flag value
Frontend<-Graphql (UserAccounts): Retrieve accepted card types

✅

...

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',

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:

• Ease of changing card type values

• Endpoint already implemented

• Scalable solution for all countries of a given Brand

Cons:

• Addition of the feature flag value request, which would increase the endpoint delay a little.

✅ Proposed Solution

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

...

Variations

...

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

...