diff --git a/client/blocks/upe/upe-deferred-intent-creation/payment-processor.js b/client/blocks/upe/upe-deferred-intent-creation/payment-processor.js index b37ec0393..1db9e0afb 100644 --- a/client/blocks/upe/upe-deferred-intent-creation/payment-processor.js +++ b/client/blocks/upe/upe-deferred-intent-creation/payment-processor.js @@ -34,7 +34,9 @@ const getStripeElementOptions = () => { billingDetails: { name: 'never', email: 'never', - phone: 'never', + // The phone field is optional, so it needs to be "auto" to not throw errors + // when passing the phone parameter to create a payment method. + phone: 'auto', address: { country: 'never', line1: 'never', @@ -194,7 +196,7 @@ const PaymentProcessor = ( { billing_details: { name: `${ billingAddress.first_name } ${ billingAddress.last_name }`.trim(), email: billingAddress.email, - phone: billingAddress.phone, + phone: billingAddress.phone || null, // Phone is optional, but an empty string is not allowed by Stripe. address: { city: billingAddress.city, country: billingAddress.country, diff --git a/client/classic/upe/payment-processing.js b/client/classic/upe/payment-processing.js index cb2bf39e5..4c7ec8af3 100644 --- a/client/classic/upe/payment-processing.js +++ b/client/classic/upe/payment-processing.js @@ -199,7 +199,9 @@ function createStripePaymentMethod( ).trim() : undefined, email: document.querySelector( '#billing_email' )?.value, - phone: document.querySelector( '#billing_phone' )?.value, + phone: + // Phone is optional, but an empty string is not allowed by Stripe. + document.querySelector( '#billing_phone' )?.value || null, address: { city: document.querySelector( '#billing_city' )?.value, country: document.querySelector( '#billing_country' ) diff --git a/client/stripe-utils/utils.js b/client/stripe-utils/utils.js index b1f46f8e8..359727e0b 100644 --- a/client/stripe-utils/utils.js +++ b/client/stripe-utils/utils.js @@ -385,9 +385,9 @@ export const getHiddenBillingFields = ( enabledBillingFields ) => { email: enabledBillingFields.includes( 'billing_email' ) ? 'never' : 'auto', - phone: enabledBillingFields.includes( 'billing_phone' ) - ? 'never' - : 'auto', + // The phone field is optional, so it needs to be "auto" to not throw errors + // when passing the phone parameter to create a payment method. + phone: 'auto', address: { country: enabledBillingFields.includes( 'billing_country' ) ? 'never'