Tech Discovery - Payments Events

Description

Iberia requested that we have a better view of the logs received by Amplitude to identify which payment methods were used. Two possible improvements were found in the Button Click and Backend Purchase logs to include the possible values for these payment methods within the Payment Type and Card Type. To do this, we held some meetings to understand how we could improve these logs and how the fields would be filled in and for this purpose a table regarding this improvement was generated, which can be seen below.

Development

Card Type	Payment Type	Payment Method
VISA/MASTERCARD	CREDIT_ANONYMOUS	New credit card
VISA/MASTERCARD	VAULTED_ACCOUNT	Vaulted card
CASH	VAULTED_ACCOUNT	Cash
	PAYPAL	Paypal
	APPLE_PAY	Apple pay
	PAY_CARD_AT_HOME	Pay card at home
	WAYLET	Waylet
	BIZUM	Bizum
	SODEXO_VOUCHER	Sodexo voucher
	CHEQUE_GOURMET_VOUCHER	Cheque gourmet voucher
	TICKET_RESTAURANT_VOUCHER	Ticket restaurant voucher
SODEXO_CARD	CREDIT_ANONYMOUS	Sodexo card
CHEQUE_GOURMET_CARD	CREDIT_ANONYMOUS	Cheque gourmet card
TICKET_RESTAURANT_CARD	CREDIT_ANONYMOUS	Ticket restaurant card

Frontend

https://github.com/rbilabs/intl-whitelabel-app/pull/1935

Button Click

__fixtures__/mParticle.ts

export const MParticle = (overrides?: Partial<IMParticleCtx>): IMParticleCtx => ({
  logAddPaymentMethodClick: jest.fn(),
  logCashVoucherMethodClick: jest.fn(),
  logPaymentMethodBrandClick: jest.fn(),
  ...,
});

payment-method-options/payment-method-options.tsx

Import the logPaymentMethodBrandClick

const { 
  logAddPaymentMethodClick, 
  logCashVoucherMethodClick, 
  logPaymentMethodBrandClick
} = useMParticleContext();

For each handleXXXXOptionClick call the logPaymentMethodBrandClick with specific payment method selected

const handleSodexoOptionClick = useCallback(
    (e: React.FormEvent<HTMLButtonElement>) => {
      e.preventDefault();
      logPaymentMethodBrandClick(PaymentMethodBrand.SODEXO)
    }, 
    [...]
);

state/mParticle/index.tsx

Create a function to handle all possible payment methods event names

const logAddPaymentMethodClick = () => {
  logNavigationClick(CustomEventNames.BUTTON_CLICK_ADD_PAYMENT_METHOD);
};

const logCashVoucherMethodClick = () => {
  logNavigationClick(CustomEventNames.BUTTON_CLICK_CASH_OR_VOUCHER);
};

const logPaymentMethodBrandClick = (paymentMethodBrand: PaymentMethodBrand) => {
   const customPaymentMethodEvent: Record<PaymentMethodBrand, string> = [
      SODEXO: CustomEventNames.BUTTON_CLICK_SODEXO,
      SODEXO_VOUCHER: CustomEventNames.BUTTON_CLICK_SODEXO,
      ...
   ];
   
   logNavigationClick(customPaymentMethodEvent[paymentMethodBrand]);
};

state/mParticle/types.ts

export interface IMParticleCtx {
  ...
  logAddPaymentMethodClick: VoidFunction;
  logCashVoucherMethodClick: VoidFunction;
  logPaymentMethodBrandClick: VoidFunction;
  ...
}

Backend ( order-service )

Log Purchase

order-mutated-event/mparticle-purchase-event.ts

Update logBackendPurchase function to validate paymentMethodBrand.

Note: PaymentMethodBrand takes priority over paymentType and cardType.

Create a function to handle the cardType and paymentType.

private async logBackendPurchase(order: IRbiOrder) {
  ...
  const paymentMethodBrand = order.cart.payment?.paymentMethodBrand ?? undefined;
  const cardType = getCardType(order.cart.payment?.cardType, paymentMethodBrand);
  const paymentType = getPaymentType(order.cart.payment?.paymentType, paymentMethodBrand);

  await logCrmEvent({
    eventAttributes: {
      ...,
      'Card Type': cardType,
      'Payment Type': paymentType,
    },
    ...
  });
}

Scenarios

Scenario 1: The user can identify which payment method was selected

Steps	Description
The user is logged in to Amplitude	The user has previously logged in and is on the log dashboard creation page
The user filters the logs by button click on the cart/payment screen	The user creates a filter for the type of payments and for the log screen to be related to the payments page.
User can see which payment type is selected	The log will show which payment type the user selected (in the Name property) when selecting from the payment options menu.

Scenario 2: The user can identify whether the cash payment has been made

Steps	Description
The user is logged in to Amplitude	The user has previously logged in and is on the log dashboard creation page
The user filters the logs by Backend Purchase	The user can filter the logs by Backend Purchase and find all the purchases made by user
The user can see the type of payment paid	When the user open the log its possible to find the type of payment (VAULTED_ACCOUNT)
The user can see which card type is used	When the user open the log its possible to find the card type (CASH)

Scenario 3: The user can identify the credit card payment method was made

Steps	Description
The user is logged in to Amplitude	The user has previously logged in and is on the log dashboard creation page
The user filters the logs by Backend Purchase	The user can filter the logs by Backend Purchase and find all the purchases made by user
The user can see the type of payment paid	When the user open the log its possible to find the type of payment (CREDIT_ANONYMOUS or VAULTED_ACCOUNT)
The user can see which card type is used	When the user open the log its possible to find the card type (VISA/MASTERCARD)

Scenario 4: The user can identify which link payment method was paid

Steps	Description
The user is logged in to Amplitude	The user has previously logged in and is on the log dashboard creation page
The user filters the logs by Backend Purchase	The user can filter the logs by Backend Purchase and find all the purchases made by user
The user can see the type of payment paid	When the user open the log its possible to find the type of payment ( PAYPAL, APPLE_PAY, WAYLET, BIZUM )

Scenario 5: The user can identify the pay card at home payment method was made

Steps	Description
The user is logged in to Amplitude	The user has previously logged in and is on the log dashboard creation page
The user filters the logs by Backend Purchase	The user can filter the logs by Backend Purchase and find all the purchases made by user
The user can see the type of payment paid	When the user open the log its possible to find the type of payment ( PAY_CARD_AT_HOME )

Scenario 6: The user can identify which voucher payment method was paid

Steps	Description
The user is logged in to Amplitude	The user has previously logged in and is on the log dashboard creation page
The user filters the logs by Backend Purchase	The user can filter the logs by Backend Purchase and find all the purchases made by user
The user can see the type of payment paid	When the user open the log its possible to find the type of payment ( SODEXO_VOUCHER, CHEQUE_GOURMET_VOUCHER, TICKET_RESTAURANT_VOUCHER )

Scenario 7: The user can identify which meal card payment method was made

Steps	Description
The user is logged in to Amplitude	The user has previously logged in and is on the log dashboard creation page
The user filters the logs by Backend Purchase	The user can filter the logs by Backend Purchase and find all the purchases made by user
The user can see the type of payment paid	When the user open the log its possible to find the type of payment ( CREDIT_ANONYMOUS )
The user can see which card type is used	When the user open the log its possible to find the card type ( SODEXO_CARD, CHEQUE_GOURMET_CARD, TICKET_RESTAURANT_CARD )