...
Figma: Schroer, Gabriel (Deactivated)
Sequence Diagram
| Lucidchart |
|---|
| pageCount | 1 |
|---|
| autoUpdate | false |
|---|
| align | left |
|---|
| type | rich |
|---|
| autoSize | 1 |
|---|
| macroId | 212c18aa-82a2-44ac-8050-f390618c5f25 |
|---|
| instanceId | 920ae5b1-83d6-3e36-b794-1710780f64f3 |
|---|
| pages | |
|---|
| width | 700 |
|---|
| documentToken | v2_553b49157110c9a058af38fe91f599cb1b5e1258ab98da315d6f1ca4a1227d7e-a=133831322&c=920ae5b1-83d6-3e36-b794-1710780f64f3&d=68c0744f-0f16-45a8-98dc-41f5610b0e39&p=4447830094 |
|---|
| documentId | 68c0744f-0f16-45a8-98dc-41f5610b0e39 |
|---|
| updated | 1705609545171 |
|---|
| height | 500 |
|---|
|
...
Business rules
A new Bizum payment must be created for Paycomet.
This payment must work the same as Paycomet's PayPal, it must generate a link and be used in an Iframe where the payment will be processed.
The confirmation/tracking page should show the correct text in the payment reminder for this new payment method
The receipt email should show the correct payment option for this new payment method
The new method should be available in the user account methods list
We have to pay attention to changes from the Payments team, they are making some changes to their routine, and this new implementation cannot change the current behavior.
There are two flags that change the application's behavior: enable-paycomet-webhook-notifications (BE) and enable-backend-commit-order (BE & FE), we must test both ways, with the flags enabled and disabled.
...
Tasks breakdown
Task 1: Create a new feature flag
Flag should be added in: src/utils/launchdarkly/flags.ts
...
Example of use: frontend/src/state/payment/hooks/use-payment.tsx
Task 2: Add the new payment method in the payment state and structure
Add Bizum in IPaymentMethod
...
| Expand |
|---|
| title | frontend/src/pages/cart/payment/order-payment/payment.tsx |
|---|
|
Return the new create state from useOrderPayment: | Code Block |
|---|
| const {
// rest of the code
isPaycometBizumMethodSelected, // new line here
} = useOrderPayment({
serverOrder,
onPriceOrder,
enableOrderTimedFire,
}); |
Pass the returned value to the getCurrentSelectedMethodType: | Code Block |
|---|
| const currentSelectedMethodType = getCurrentSelectedMethodType({
isPaycometBizumMethodSelected,
}); |
Pass the new method to the <PaymentMethod> comp: | Code Block |
|---|
| <PaymentMethod
// rest of the code
isPaycometBizumMethodSelected={isPaycometBizumMethodSelected}
/> |
|
Task 3: Add the new method in payment-method structure
Create new styled component for the new payment method
...
| Expand |
|---|
| title | frontend/src/pages/cart/payment/order-payment/paycomet-hosted-page-payment/paycomet-hosted-page-payment.tsx |
|---|
|
Return the new values from the useOrderPayment hook | Code Block |
|---|
| const {
// rest of code
setIsPaycometBizumMethodSelected,
isPaycometBizumMethodSelected,
} = useOrderPayment({
enableOrderTimedFire,
onPriceOrder,
serverOrder,
}); |
Pass down the values to the <PaymentMethod> comp | Code Block |
|---|
| // rest of the code
<PaymentInfoBackground $hostedPayment>
{showPaymentMethodSelection && (
<PaymentMethod
// rest of the code
setIsPaycometBizumMethodSelected={setIsPaycometBizumMethodSelected} // new line
isPaycometBizumMethodSelected={isPaycometBizumMethodSelected} // new line
onResult={onPaymentOutcome}
/>
)} |
|
Task 4: Create and add a new method in payment-method-option structure
...
Add the new icon for the new payment method in: frontend/src/components/icons/new-payment-method/index.tsx (replace “new-payment-method” for the new name, hahaha).
Add the new method option in the interface of payment methods:
...
| Expand |
|---|
| title | frontend/src/components/payment-method-option/index.tsx |
|---|
|
Adjust the RenderMethodType and add the new method created above | Code Block |
|---|
|
const RenderMethodType = () => {
// rest of the code
// New if here
if (method.bizumPaymentMethod) {
return <BizumPaymentMethod />;
}
return null;
};
// add the new payment method inside the <MethodTypeWrapper> in the return
return
// rest of the code
(
// rest of the code
<MethodTypeWrapper
data-private
data-dd-privacy="mask"
onClick={onClickMethod}
$isClickable={!!onClick}
disableMethod={disableMethod}
fromCheckout={fromCheckout}
data-testid={`method-type-wrapper-${method.accountIdentifier ?? method.fdAccountId ?? ''}`}
selected={selected}
>
// rest of the code
<div>
<MethodTypeDescription>
// Add new method here inside the description
{method.bizumPaymentMethod && <StyledBizumPaymentMethodCardIcon />}
</MethodTypeDescription>
// rest of the code
</div>
</MethodTypeWrapper>
// rest of the code
); |
|
Task 5: Adjust account payment method lists to deal with the new method
...
| Expand |
|---|
| title | frontend/src/components/payment-method-flat-list-with-button/payment-method-flat-list-with-button.tsx |
|---|
|
We’ll exclude the new payment method if it is not actually stored in the user account: | Code Block |
|---|
| function filterOutUnsupportedPaymentMethods(paymentMethods: IPaymentMethod[]) {
return paymentMethods.filter(
n =>
n.accountIdentifier !== PAYPAL_PAYMENT_METHOD_PLACEHOLDER.accountIdentifier &&
n.accountIdentifier !== SODEXO_VOUCHER_PAYMENT_METHOD_PLACEHOLDER.accountIdentifier &&
n.accountIdentifier !== BIZUM_PAYMENT_METHOD_PLACEHOLDER.accountIdentifier &&
);
} |
|
Task 6: Adjust the receipt email to show the correct message for the new payment method
...
Today, when the commit order is processed, order-service triggers Braze API with the order info, that then sends the confirmation email to the customer.
...