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

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

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

• Since Winrest processes payment using paymentMethod field, it can’t differentiate between cash, voucher, or “card at home” payments. The same behavior happens today to Sodexo and Cheque Gourmet Vouchers

Necessary changes

intl-packages

• Update Order types with new PaymentMethodBrand: https://github.com/rbilabs/intl-packages/blob/master/packages/orders/src/types/cart.ts#L862

• Update SDKs

intl-fulfillment-service

• Update intl-packages versions

intl-payment-service

• Update intl-packages versions

intl-whitelabel-graphql

• update graphql PaymentMethodBrand GraphQL definition: https://github.com/rbilabs/intl-whitelabel-graphql/blob/70138056e799d938a3a6bb39b502aba76c0a2c46/src/functions/graphql/schemas/payments.gql#L28

• Save CASH_AT_HOME payments status as PAYMENT_REQUIRED

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