[Solution] Visa/Sibs - new mandatory fields

Owned by Capovilla, Evandro
Last updated: yesterday at 6:16 pm
9 min read

Document Status

CLOSED

Document Owner(s)

@Capovilla, Evandro

Reviewers

@Raphael Ferreira Gomes
@Felipe Rooke
@Garozzo de Sobral, Wellington
@Augusto Romao, Vinicius

Potential Solutions

Assumptions

  • This solution does not include the “browser height/width” information because paycomet did not implement and does not provide access to send this new field.

  • The address fields provided are not optional and are a new request for Visa payments as a way of detecting fraud.

  • The email will be mandatory and telephone number optional, but both will be sent to paycomet.

  • Only the delivery service mode will show the checkbox to use billing address.

  • The “use delivery address” checkbox starts the toggled and the information is pre-filled.

  • This solution is related to Paycomet.

Fields

Before

New Fields Mandatory

Fields

Before

New Fields Mandatory

Card Number

Name on Card

Expiry

CVV

Address Line 1

Address Line 2

Postal Code

City

State

Country

Email (user data)

Cellphone (user data)

- Optional if email is sent

#1 - Create new fields for the new data needed.

The idea is to create a new input for the user to fill in and we send this information in addition to other relevant information such as the height and width of the browser (Paycomet is working to include height and width in their system, so this solution does not include those properties yet.). It was also agreed that the email and telephone fields will be sent via backend without showing these fields to the user and getting this information in user details.

The user will fill in the correct information.

We guarantee that all information provided to Paycomet/Visa belongs to the user.

The user has more fields to fill in.

#2 - Send the pre-filled data of user details.

The idea is to use the user's pre-filled information and send it as a request to paycomet.

The user does not need to fill out all the forms.

The user data may not be the same as their Visa credit card information.

Proposed Solution

#1 - Create new fields for the new data needed.

Whitelabel App

Implement new input fields for users to provide additional data necessary for payment processing, specifically: billing address, email, and phone number. This data will be captured, validated, and transmitted to the Payment Service Provider (PSP) Paycomet.

Diagram

image-20241029-181552.png
title Make purchase/No pre-auth FE->Graphql:CommitOrder Graphql->Payment-Service:MakePayment Payment-Service->Paycomet-Service:MakePayment Paycomet-Service->Paycomet: executePurchase Paycomet-Service<-Paycomet: result Payment-Service<-Paycomet-Service:result Graphql<-Payment-Service:result FE<-Graphql:result

Pre-auth removal refence: https://rbictg.atlassian.net/wiki/spaces/TRX/pages/4312367174/Paycomet+-+Pre-auth+removal#Integration-steps-TO-BE-(Delivery)

image-20241029-181815.png
title Pre-auth FE->Graphql:CreatePreAuth Graphql->Paycomet-Service:CreatePreAuth Paycomet-Service->Paycomet: createPreauthorization Paycomet-Service<-Paycomet: result Graphql<-Paycomet-Service:result FE<-Graphql:result

Pre-auth reference: https://rbictg.atlassian.net/wiki/spaces/TRX/pages/3929702586

For this solution, we will only modify the payment request part, as shown in the diagram above. The entire flow after sending payment to paycomet will not be modified.

New Forms

https://www.figma.com/design/RtD0UFtwuwXx14lbLCAPlr/branch/UfNaSRm5ctVoAPBMsTBcE2/9.-Cart-%26-Checkout?m=auto&node-id=45887-5479&t=pImkF9wfuOgTzFgD-1

Development

Frontend

For postal/zip code we already have a field for this purpose, and it is hidden by the payment variation fields. We can use the same flag to enable or disable these new fields.

<TextInputPaycomet data-testid="address-city" id="addressCity" name="addressCity" type="hidden" value={addressCity} /> <TextInputPaycomet data-testid="address-country" id="addressCountry" name="addressCountry" type="hidden" value={addressCountry} /> <TextInputPaycomet data-testid="address-line" id="addressLine" name="addressLine" type="hidden" value={addressLine} /> <TextInputPaycomet data-testid="address-state" id="addressState" name="addressState" type="hidden" value={addressState} /> <TextInputPaycomet data-testid="phone-number" id="phoneNumber" name="phoneNumber" type="hidden" value={phoneNumber} /> <TextInputPaycomet data-testid="email" id="email" name="email" type="hidden" value={email} />

You could found other references in IPaymentState/IPaycometState and following the reference below.

Graphql

Intl-Packages

Payment-service

Paycomet-service

Configuration

Include here any configuration required (Sanity, LaunchDarkly flags, etc.) required to enable the solution.

Temporary Feature Flag

Temporary Feature Flag

payment-fields-variations

QA Plan

[Test Cases] Visa/Sibs - new mandatory fields

Call-outs

This functionality is made exclusively for the PSP Paycomet which is used in the Spanish and Portuguese environments.

Figma File

https://www.figma.com/design/RtD0UFtwuwXx14lbLCAPlr/branch/UfNaSRm5ctVoAPBMsTBcE2/9.-Cart-%26-Checkout?m=auto&node-id=45865-10714&t=pImkF9wfuOgTzFgD-1