Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Table of Contents

Business problem

Payment at home with credit card represents 41% of the payments in Portugal today. With that in mind, this is a crucial feature for our customers to guarantee the best experience. The idea is to deliver a new method of payment (that we'll call here "Card at home"). To see more details: Feature - Payment with card at home

Panel
panelIconIdatlassian-warning
panelIcon:warning:
bgColor#FFBDAD

OUT OF SCOPE: Saving card networks (ex: Visa, Mastercard) used for “Card at home” payments for future reports. This information is not saved today.

Design analysis

Whitelabel proposed changes

PS: click on the images below to open (I don’t want to flood the document with big images).

Account payment methods

Method payment selection

Order confirmation

As the flow will be similar to the payment with cash option we believe that we'll not need to change many details on this screen and we'll just change the information about the payment method.

Tracking modal

Email receipt

I think that we'll need to return the payment method description for this new method. A possibility about this email template is that it is controlled/used in Amazon SNS. I'll validate this with Caes, Guilherme.

Technical discovery

Architecture AS-IS

Winrest integration

To configure the integration with Winrest team, we’ll The "Card at home" feature will affect the payload sent by partners-api to Winrest. We’ll need to send them the exact string of the new payment method so they can configure it on their platform (Aligned with Paulo Silva). The drawback of using payment type as CASH and a new payment method brand (eg. CARD_AT_HOME) is that the integration still works, but in Winrest reports these payments will be included as cash.

Proposed tech solution

Using the CASH payment method, add CARD_AT_HOME payment method brand as an option. This solution was used also to implement Sodexo and Cheque Gourmet vouchers, which allowed us to take advantage of the groundwork laid by it: /wiki/spaces/IN/pages/3932717313. The exact changes needed are listed in Necessary changes section.

Pros and cons

Pros

  • Require small changes since the structure is very similar to Sodexo and Cheque Gourmet vouchers

    • Reuse of components and structures that already exists on the code

  • Avoids the complexity of creating a new payment method from scratch, which impact many repositories and integrations

Cons

OUT OF SCOPE: Saving card networks (ex: Visa, Mastercard) used for “Card
  • Since Winrest processes payment using paymentMethod field, it can’t differentiate between cash, voucher, or “card at home” payments

Panel
panelIconIdatlassian-warning
panelIcon:warning:
bgColor#FFBDAD
  • at home” payments

for future reports. This information is not saved today.
  • . The same behavior happens today to Sodexo and Cheque Gourmet Vouchers

Necessary changes

intl-packages

intl-fulfillment-service

  • Update intl-packages versions

intl-payment-service

  • Update intl-packages versions

intl-whitelabel-graphql

Code Block
languagejs
          ...
          const isSodexoOrChequeGourmet = !!payment?.paymentMethodBrand;

          // we set the status to PAYMENT_REQUIRED for cash
          if ((isCashPayment && cashPaymentEnabled) || isSodexoOrChequeGourmet) {
            const updatedCart = {
              ...updatedOrder.cart,
              payment: {
                cardType,
                paymentMethodBrand: payment?.paymentMethodBrand || undefined,
              },
            } as ICart;
            ...

intl-whitelabel-app

  • Update payment flow to include “Card at home” as an option. The impacted pages have been listed in Design Analysis section. Schroer, Gabriel is working on the final design.

  • Possible main changes in

    • Components:

      • Payment

      • PaycometHostedPagePayment

      • PaymentMethod

      • PaymentMethodAddNewItemOption

      • PaymentMethodOption

      • PaymentMethodOptions

      • PaymentMethodFlatListWithButton

    • Hooks:

      • useOrderPayment