...

• 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 user data

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

✅ 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 email/phone number 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

...

...

• billing address.

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

• This solution is related to Paycomet.

#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

...

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

...

New Forms

...

...

Development

Frontend

<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="phonenumberphone-number"
  id="phonenumberphoneNumber"
  name="phonenumberphoneNumber"
  type="hidden"
  value={phonenumberphoneNumber}
/>
<TextInputPaycomet
  data-testid="email"
  id="email"
  name="email"
  type="hidden"
  value={email}
/>

 <TextInput
  ...
  onChange={handleChange}
  value={paymentValues.billingStreetAddress}
  required
  data-paycomet="billingStreetAddress"
  name="billingStreetAddress" 
/>

export interface IPaycometState extends IPaymentState {
  ...,
  user?: {
    phoneNumber: string;
    email: string;
  };
}

generateCreatePreAuthorization({
  variables: {
   input: {
    rbiOrderId: rbiOrder.rbiOrderId,
    cardHolderName: paymentValues.nameOnCard,
    ...,
    userPaymentDetails,
    billingAddress
   },
  },
});

commitInput = {
            ...,
            payment: {
              ...,
              billingAddress: {
       ...,         locality: payCometValues.billingCity, //city
 payment: {              country: payCometValues...billingCountry, //country
                billingAddressstreetAddress: {payCometValues.billingStreetAddress, //addressLine
                localitypostalCode: payCometValues.billingCitybillingZip, //citypostalCode
                countryregion: payCometValues.billingCountry, //country
 billingState, //state
              },
              streetAddressuserPaymentDetails: payCometValues.billingStreetAddress, //addressLine{ 
                postalCodephoneNumber: payCometValues.billingZipphoneNumber,
//postalCode                 regionemail: payCometValues.billingStateemail, //state
              },
            },
            ...
          };

Graphql

function mapBillingAddress(
  region: string,
  billing: IBillingAddress | undefined,
): PaymentClient.IAddress | undefined {
  if (!billing) {
    return {
      regionCode: region,
    };
  }

  return {
    postalCode: billing.postalCode || undefined, // normalize empty string     //postalCode
    administrativeArea: billing.region,                                        //state
    locality: billing.locality,                                                //city
    regionCode: billing.country ?? region,                                     //country
    streetNumber: billing.streetAddress,                                       //address
  };
}

input AdditionalPayment {
  """
  Represents the phone number of the user who owns the requested payment
  """
  phoneNumber: String
  """
  Represents the email of the user who owns the requested payment
  """
  email: String
}

input PaycometPayment {
  ...
  
  """
  Additional Payment Information
  """
  additionalPaymentuserPaymentDetails: AdditionalPaymentUserPaymentDetails
}

paycometSale = {
  ...,
  userDetailsuserPaymentDetails: {
    email: payment?.paycometInput?.additionalPaymentuserPaymentDetails?.email || '',
    phoneNumber: payment?.paycometInput?.additionalPaymentuserPaymentDetails?.phoneNumber || '',
  },
};

export interface IUserPaymentDetails {
  email: string;
  phoneNumber: IPhoneNumberPaymentDetailsstring;
}

export interface ICreatePreAuthPaycometRequest {
  userPaymentDetails: IUserPaymentDetails
}

public async createPreAuthorizationPaycomet({
....
}) {
....
const paycometPreauth = await this.paymentsClient.paycometClient.request<ICreatePreAuthorizationResponse>(
        (apis) =>
          apis.paymentsApi.createPreAuthorization({
            iCreatePreAuthorizationRequest: {
              ...,
              billingAddress,
              user: {
                email...,
              billingAddress,
 phonenumber,             user: {
}        },       region: regionCountryemail,
    }),     );   ... }

Intl-Packages

export class PaymentBaseRequestDto extendsphonenumber,
PaymentBase {   @IsObject()   @IsOptional()   @ApiProperty({    } required:
false,     type: MerchantDataDto},
    description  region: "PaymentregionCountry,
additional information",   }),
  public merchantData?: MerchantDataDto;
}

export class MerchantDataDto);
  ...
}

Intl-Packages

export class PaymentBaseRequestDto extends PaymentBase {
  @IsObject()
  @IsOptional()
  @ApiProperty({
    required: false,
    type: BillingDataDtoUserPaymentDetails,
    description: "User's billingpayment additional information",
  })
  public billinguserPaymentDetails?: BillingDataDtoUserPaymentDetails;
}

export class UserPaymentDetails {
  @IsObject()
  @IsOptional()
  @ApiProperty({
    required: false,
    type: BillingDataDto,
    description: "User's additional information",
  })
  public customer?: CustomerDataDto;
}

export class BillingDataDto {
  //Include the decorators following the pattern
  public billAddrCity;UserPaymentDetails,
    description: "User's mobile phone",
  })
  public billAddrCountrymobilePhone?: string;
  public@IsObject()
billAddrLine1;  @IsOptional()
public billAddrPostCode; @ApiProperty({
 public billAddrState; } required: exportfalse,
class CustomerDataDto {   //Include the decorators following the pattern
  public mobilePhone?: string;type: UserPaymentDetails,
    description: "User's email",
  })
  public email?: string;
}

export interface IPhoneNumberPaymentDetails {
  cc: string;
  phoneNumber: string;
}

export interface IUserPaymentDetails {
  email: string;
  phoneNumber: IPhoneNumberPaymentDetailsstring;
}

export interface ICreatePreAuthPaycometRequest {
  userPaymentDetails: IUserPaymentDetails
}

export interface ICreatePreAuthorizationRequest {
    billingAddress: IBillingAddress,
    userPaymentDetails: IUserPaymentDetails
}

...

interface IBillingData {
  billAddrCity?: string;
  billAddrCountry?: string;
  billAddrLine1?: string;
  billAddrPostCode?: string;
  billAddrState?: string;
}

interface ICustomerData{
  mobilePhone: IMobilePhone;
  email: string;
}

interface IMobilePhone{
  cc: string;
  subscriber: string;
}

interface IMerchantData {
  billing?: IBillingData;
  customer?: ICustomerData;
}

interface IRequestPaymentBody {
  ...
  customer?merchantData: ICustomerData;
}

interface IRequestPaymentBody {
  ...
  merchantData: IMerchantData;
}

🎛️ Configuration

🧑‍🚒 QA Plan

[Test Cases] Visa/Sibs - new mandatory fields

⚠️ Call-outs

IMerchantData;
}

🎛️ Configuration

🧑‍🚒 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

...