🛠️ Potential Solutions

🧐 Assumptions

• We will only add the brands of credit cards in the “add new credit card” option.

• Do not show “sodexo”, “cheque gourmet” and “ticket restaurant” brands in the “add new credit card” option.

• Do not display card components for “sodexo”, “cheque gourmet” and “ticket restaurant”.

• Iframe loading is indifferent to card component details (can be shown before loading the iframe).

Solution #1 - Map cards accepted in whitelabel-app

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

• Ease of changing card type values

Cons:

• The number of feature flags (eg: dev plk es, dev plk pt, dev bk es, dev bk pt and etc) created for each region/environment is high due to the way the frontend FD is created.

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

This solution involves creating an endpoint to retrieve the accepted card type data in the payment service and the frontend calling this endpoint directly without the need to go through graphql/fulfillment.

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

This solution involves creating an endpoint to retrieve the accepted card type data in graphql/fulfillment and the frontend calling this endpoint directly.

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

This solution involves changing the userAccounts endpoint and adding the new acceptedCards field.

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

✅ 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

The change needed is a change in intl-whitelabel-app and a change in the userAccounts endpoint in graphql.

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.

intl-whitelabel-app

export interface IPaymentContext {
  acceptedCardTypes: string[];
  ...
}

const {
  acceptedCardTypes,
  ...
} = usePayment({
    ...,
});

return {
  ...,
  acceptedCardTypes
  ...,
}

const acceptedCardTypes = userAccountsData?.userAccounts?.acceptedCardTypes;

return {
  ...,
  acceptedCardTypes
  ...,
}

const payment = usePaymentContext();

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

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

intl-whitelabel-graphql

CONST ACCEPTED_CARDS = 'accepted-card-types'

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] : [],
  };
}

type AccountListResponse {
  ...
  acceptedCardTypes: string[]
}

🎛️ Configuration

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%.

KPI = (Paycomet Error 102) / All Payments * 100

Error 102: Operation not permitted for card type.

🧑‍🚒 QA Plan

Test Scenario	Result	Screenshots
Show icons for accepted credit card types	When selecting the credit card payment method The accepted credit card brands are to be shown
NOT show icons for accepted credit card types for sodexo	When selecting the credit card payment method Not show the card details
NOT show icons for accepted credit card types for cheque gourmet	When selecting the credit card payment method Not show the card details
NOT show icons for accepted credit card types for ticket restaurant	When selecting the credit card payment method Not show the card details