...

• 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 databilling 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 background backend without showing these fields to the user and getting this information in user details.

...

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

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

export interface ICreatePreAuthPaycometRequest {
  userPaymentDetails: IUserPaymentDetails
}

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

Intl-Packages

export class PaymentBaseRequestDto extendsphonenumber,
PaymentBase {   @IsObject()   @IsOptional()   @ApiProperty({    } required:
false,     type: MerchantDataDto},
      descriptionregion: "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: BillingDataDtoUserPaymentDetails,
    description: "User's additionalmobile informationphone",
  })
  public customermobilePhone?: CustomerDataDtostring;
}  export@IsObject()
class BillingDataDto {@IsOptional()
  //Include the decorators following the pattern
  public billAddrCity;
  public billAddrCountry;
  public billAddrLine1;
  public billAddrPostCode;
  public billAddrState;
}

export class CustomerDataDto {
  //Include the decorators following the pattern
  public mobilePhone?: string;@ApiProperty({
    required: false,
    type: UserPaymentDetails,
    description: "User's email",
  })
  public email?: string;
}

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

export interface ICreatePreAuthPaycometRequest {
  userPaymentDetails: IUserPaymentDetails
}

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

...

[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

...