Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Zenuml sequence macro lite
uuidba86f611-493b-4717-a8f0-4c3cf6d6543d
customContentId5163483248
updatedAt2024-10-24T20:06:51Z

New Forms

...

Development

Frontend

Expand
titlepaycomet-credit-card-form/paycomet-credit-card-form.tsx

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.

Expand
titleCreate useState for each field
Code Block
<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}
/>
Expand
titleSave the input in state ( best option )

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

Code Block
 <TextInput
  ...
  onChange={handleChange}
  value={paymentValues.billingStreetAddress}
  required
  data-paycomet="billingStreetAddress"
  name="billingStreetAddress" 
/>
Expand
titleIPaycometState - If saving the input in state

If you use the state solution, you must add the user field with phone number and email

Code Block
export interface IPaycometState extends IPaymentState {
  ...,
  user?: {
    phoneNumber: string;
    email: string;
  };
}
Expand
titleUpdate CreatePreAuthorization
Code Block
generateCreatePreAuthorization({
  variables: {
   input: {
    rbiOrderId: rbiOrder.rbiOrderId,
    cardHolderName: paymentValues.nameOnCard,
    ...,
    userPaymentDetails,
    billingAddress
   },
  },
});

...