Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

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.

button click.png

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)

backend purchase.png

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, PAY_CARD_AT_HOME, WAYLET, BIZUM, SODEXO_VOUCHER, CHEQUE_GOURMET_VOUCHER, TICKET_RESTAURANT_VOUCHER )

Scenario 5: The user can identify which voucher online 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 )

  • No labels