# Errors and Input Validation

Learn how to invoke error and display custom error message in the payment sheet UI for handling invalid user inputs. To invoke error, create WalletError and attach it to updateWith method inside the following Payment Sheet events:

• Payment Authorized
• Shipping Address Change
• Coupon Code Change

# Invalid Shipping Contact

const walletRequest = {
  ...
  requireShippingAddress: true,
};

Invalid shipping contact error will block authorization until user chooses an acceptable shipping contact. You will need to put an error condition and create WalletError object to be passed in to updateWith method. To break from the error, user will need to re-trigger event handler (e.g. editing / choosing another shipping contact) until it no longer passes error object to updateWith method.

# WalletError object fields

• code: "invalid_shipping_address" or "unserviceable_address"
• contactField: One of the WalletErrorContactField
• message: custom error message to be displayed in payment sheet UI

# Code Sample

collect.on("shipping_address_change", (e) => {
  let options = {};
 
  if (e.shippingAddress.locality === "SINALOA") { //error condition, then pass in WalletError to updateWith
    options = {
      error: {
        code: "unserviceable_address",
        contactField: "locality",
        message: "We don't support shipping to SINALOA, choose different address"
      },
    };
  } else {      //if shipping contact is acceptable, do not pass in WalletError
    options = {
      total: ...
      lineItems: [...],
      shippingMethods: [...],
    };
  }
 
  e.updateWith(options);
});

# Invalid Billing Contact

Invalid billing contact error will not block authorization button on payment sheet, user can try to authorize payment again with no changes. You need to validate billing address on every payment_authorized event until data is correct. You will need to put an error condition and create WalletError object to be passed in to updateWith method. To break from the error, user will need to choose another card or add new one with another billing address and re-trigger event handler (authorize payment again) until it no longer passes error object to updateWith method.

IMPORTANT:

1. The card selection field will not be highlighted on the payment sheet to indicate that there is a problem with billing address, only message that you add in WalletError will be shown. You need to add a clear error message so that the user understands what needs to be changed.
2. User has no ability to edit the billing address for the selected card on the wallet payment sheet, you will need to choose another card or add a new one with a new billing address, which can be difficult and time-consuming for the end-user if you only has one card. Use this type of error if it's really important.

# WalletError object fields

• code: "invalid_billing_address"
• contactField: One of the WalletErrorContactField
• message: custom error message to be displayed in payment sheet UI

# Code Sample

collect.on("payment_authorized", (e) => {
  if (e.billingAddress.countryCode === "MX") { //error condition, then pass in WalletError to updateWith
    const options = {
      error: {
        code: "invalid_billing_address",
        contactField: "countryCode",
        message: "Billing to Mexico is not yet supported",
      },
    };
     
    e.complete(options);  
  } else {             // if shipping contact is acceptable, do not pass in WalletError
    Server.charge(e.nonce);
    e.complete();
   }
});

# Invalid Coupon Code

const walletRequest = {
  ...
  supportCouponCode: true,
};

# WalletError object fields

• code: "invalid_coupon_code" or "expired_coupon_code"
• message: custom error message to be displayed in payment sheet UI

# Code Sample

collect.on("coupon_code_change", (e) => {
  //Define available coupon codes to apply
  const availableCouponCodes = [
    {
      code: "discount10",
      label: "10$ discount",
      amount: "-10.00",
      expirationDate: "01-01-2022",
    },
    {
      code: "discount20",
      label: "20$ discount",
      amount: "-20.00",
      expirationDate: "01-01-2023",
    }
  ];
 
  let options = {};
 
  //IMPORTANT
  //e.couponCode can be an empty string when user removes code from a payment sheet
  if (!e.couponCode) {    
    //Pass an object with empty data in "updateWith" to remove coupon code from payment sheet
    options.couponCode = {
      code: "",
      label: "",
      amount: "0.00",
    }
 
    e.updateWith(options);
 
    return;
  }
 
  const couponCode = availableCouponCodes.find(item => item.code === e.couponCode);
 
  if (!couponCode) {
    options.error = {
      code: "invalid_coupon_code",
      message: "Coupon code " + e.couponCode + " does not exists",
    };
     
    e.updateWith(options);
 
    return;
  }
 
  if (!(new Date(couponCode.expirationDate) > new Date(Date.now()))) {
    options.error = {
      code: "expired_coupon_code",
      message: "Coupon code " + e.couponCode + " has expired",
    };
     
    e.updateWith(options);
 
    return;
  }
 
  options = {
    total: ...,
    lineItems: [...],
    shippingMethods: [...],
    couponCode: couponCode,
  };
 
  e.updateWith(options);
});

# Unknown Error

Unknown error will block authorization until your client code resolve the issue.

# WalletError object fields

• code: "unknown"