...

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.

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

In this solution we created a more robust solution to store the types of cards accepted and retrieve them from launchdarkly.

The feature flag structure will be as follows:

...

Feature Flag

...

Variations

...

acceptedCards

...

none

...

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

In this solution we created a more robust solution to store the types of cards accepted and retrieve them from launchdarkly.

The feature flag structure will be as follows:

Solution #3.1 - Frontend integrate endpoint directly to payments-service

...

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

...

CONST ACCEPTED_CARDS = 'accepted-card-types'

type AcceptedCardTypes = {


acceptedCardTypes: string[];
};

async userAccounts(
  ...
): Promise<GraphQLTypes.AccountListResponse> {
  ...
  
  const launchDarkly: LaunchDarkly = new LaunchDarkly({
    config: config.launchDarkly,
    context: { logger },
  });

  const acceptedCardTypes = await launchDarkly.getFeatureValue({
    feature: ACCEPTED_CARDS,
    defaultValue: [],
  });
  
  return {
    ...,
    acceptedCardTypes: acceptedCardTypes ? acceptedCardTypes[paymentProcessor] : [],
  };
}

...

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 #3.3 - Get accepted cards in the launch-darkly

{
  paycomet: [
    'VISA',
    'MASTERCARD,
  ],
  firstdata: [
    'VISA',
    'MASTERCARD',
    'AMEX'
  ],
  paymark: []
}

{}

📈 Metrics

Reduce the abandonment rate in the payment process by 11.8%.

...