🛠️ Potential Solutions

Note: this section should be short and sweet, documenting notes about different solutions that were considered during ideation. Can just be a link to a whiteboard for example. Expected outcome: one solution is chosen and documented in more detail under Proposed Solution.

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, as there are few changes, changing accepted cards is something that changes very infrequently, we would not have problems with changes in these fields.

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

In this solution we created a more robust solution to store the types of cards accepted and retrieve them. This may involve adding the types of cards accepted to the database.

✅ Proposed Solution

Solution #1 - Map cards accepted in whitelabel-app

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.

src/utils/launchdarkly/flags.ts

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

payment-method/index.tsx

const acceptedCardsFeatureFlag = useFlag(
    LaunchDarklyFlag.ACCEPTED_CARDS
);

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

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

Potential Challenges

List here potential challenges that have come across the opportunity definition or from the potential solutions so far.

💰 Cost

Describe any additional cost this solution may imply.

🎛️ Configuration

Feature Flag
accepted-cards-types

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:

Variations
["MASTERCARD", "VISA", "AMEX"]

📈 Metrics

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

KPI = (Payment Page + eCommerce Purchase) / Payment Page * 100

KPI = (Payment Page + Dropoff) / Payment Page * 100

🧑‍🚒 QA Plan

Testing scenarios. See example /wiki/spaces/EGMT/pages/4080861189.

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
Show icons for accepted credit card types for sodexo	When selecting the credit card payment method The sodexo brands are to be shown
Show icons for accepted credit card types for cheque gourmet	When selecting the credit card payment method The cheque gourmet brands are to be shown
Show icons for accepted credit card types for ticket restaurant	When selecting the credit card payment method The ticket restaurant brands are to be shown