Page Comparison

...

Expand

title	paycomet-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

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

Expand

title	Save 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

title	IPaycometState - 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

title	Update CreatePreAuthorization

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

Expand

title	order-payment/use-order-payment.ts

Code Block

commitInput = {
            ...,
            payment: {
              ...,
              billingAddress: {
                locality: payCometValues.billingCity, //city
                country: payCometValues.billingCountry, //country
                streetAddress: payCometValues.billingStreetAddress, //addressLine
                postalCode: payCometValues.billingZip, //postalCode
                region: payCometValues.billingState, //state
              },
              userPaymentDetails: { 
                phoneNumber: payCometValues.phoneNumber,
                email: payCometValues.email,
              }
            },
            ...
          };

Graphql

Expand

title	utils/make-payment.ts

The graphql CommitOrder function has already been made to deal with billingAddress, I put the code here just for reference for name changes.

Code Block

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
  };
}

Expand

title	graphql/schemas/payments.gql

Code Block

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
}

Expand

title	graphql/resolvers/orders.ts

Code Block

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

...

Versions Compared

Old Version 8

New Version 9

Key

Graphql