How can I provide billing details for SCA compliance using Stripe Payment Intents?

Question

I am using Stripe Payment Intents, following the instructions in the Payment Intents Quickstart. As the docs note:

To ensure that your integration is SCA-ready, be sure to always provide the customer’s name, email, billing address, and shipping address (if available) to the stripe.handleCardPayment call.

const stripe = Stripe('pk_test_lolnothisisnotreal', {
  betas: ['payment_intent_beta_3']
})

Per the handleCardPayment doc in the link, I am providing billing details in the format specified:

// https://stripe.com/docs/stripe-js/reference#stripe-handle-card-payment
const {paymentIntent, error} = await stripe.handleCardPayment(clientSecret, cardElement, {
  // https://stripe.com/docs/api/payment_methods/create#create_payment_method-billing_details
  payment_method_data: {
    billing_details: {
      address: {
        line1: cardholderAddressLine1.value,
        line2: cardholderAddressLine2.value,
        city: cardholderAddressCity.value,
        state: cardholderAddressState.value,
        country: cardholderAddressCountry.value,
        postal_code: cardholderAddressPostalCode
      },
      name: cardholderName.value,
      email: cardholderEmail.value,
      phone: cardholderPhone.value
    }
  }
})

However handleCardPayment() returns:

Received unknown parameter: source_data[billing_details]

How can I provide billing details for SCA compliance using Stripe Payment Intents?

Answer 1

The code is passing payment_method_data[billing_details] which is how you provide details such as the cardholder's billing address to associate it with the PaymentMethod resource that is created.

The issue though is that this only works if you have not initialized Stripe.js with an old beta flag where handleCardPayment would create a Source object (src_123) behind the scenes instead of a PaymentMethod (pm_123).

When you do that, the library will translate payment_method_data to source_data and then cause source_data[billing_details] to be sent, but the API server-side rejects it since it's not a valid parameter server-side.

To avoid this error, you need to ensure that you initialize Stripe.js without the betas flag. So turn

const stripe = Stripe('pk_test_123', {   betas: ['payment_intent_beta_3'] });

into:

const stripe = Stripe('pk_test_123');