...

• 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.

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

...

• 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.

...

New Forms

...

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="phone-number"
  id="phoneNumber"
  name="phoneNumber"
  type="hidden"
  value={phoneNumber}
/>
<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
   },
  },
});

...

paycometSale = {
  ...,
  userDetailsuserPaymentDetails: {
    email: payment?.paycometInput?.userPaymentDetails?.email || '',
    phoneNumber: payment?.paycometInput?.userPaymentDetails?.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
}

...

[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

...