perf-react-paymentelement | Stripe Developers | Page 1

drowsy sapphireBOT Apr 17, 2023, 5:05 PM

#

night whale Apr 17, 2023, 5:06 PM

#

Hi 👋

#

If you are using Stripe.js to confirm payments on the client side it will handle 3DS for you but we do have more details about it here:
https://stripe.com/docs/payments/3d-secure

kind pecan Apr 17, 2023, 5:08 PM

#

ah ok, is "requires_source_action" status not the same thing?

night whale Apr 17, 2023, 5:09 PM

#

It is except for the outdated Sources API

kind pecan Apr 17, 2023, 5:09 PM

#

Does the stripe.js package use the outdated api?

night whale Apr 17, 2023, 5:10 PM

#

It can be used to confirm a Source (we're not going to break old integrations). But we recommend moving to the Payment Methods API for both handling more payment methods as well as more robust error handling

kind pecan Apr 17, 2023, 5:12 PM

#

is using this method not recommended?

   * Use `stripe.confirmCardPayment` when the customer submits your payment form.
   * When called, it will confirm the [PaymentIntent](https://stripe.com/docs/api/payment_intents) with `data` you provide and carry out 3DS or other next actions if they are required.
   *
   * If you are using [Dynamic 3D Secure](https://stripe.com/docs/payments/3d-secure#three-ds-radar), `stripe.confirmCardPayment` will trigger your Radar rules to execute and may open a dialog for your customer to authenticate their payment.
   *
   * When you confirm a `PaymentIntent`, it needs to have an attached [PaymentMethod](https://stripe.com/docs/api/payment_methods).
   * In addition to confirming the `PaymentIntent`, this method can automatically create and attach a new `PaymentMethod` for you.
   * It can also be called with an existing `PaymentMethod`, or if you have already attached a `PaymentMethod` you can call this method without needing to provide any additional data.
   *
   * @docs https://stripe.com/docs/js/payment_intents/confirm_card_payment
   */
  confirmCardPayment(
    clientSecret: string,
    data?: paymentIntents.ConfirmCardPaymentData,
    options?: paymentIntents.ConfirmCardPaymentOptions
  ): Promise<PaymentIntentResult>;

night whale Apr 17, 2023, 5:13 PM

#

No, that is the canonical approach to confirming payments using the Card Element

kind pecan Apr 17, 2023, 5:14 PM

#

so the card elements can not use that updated api ?

night whale Apr 17, 2023, 5:15 PM

#

What do you mean here?

#

This uses a Payment Intent API

kind pecan Apr 17, 2023, 5:15 PM

#

i am confused, sorry. I am not wording my question correctly. You stated above " But we recommend moving to the Payment Methods API for both handling more payment methods as well as more robust error handling".

Does that mean not using stripe elements at all?

night whale Apr 17, 2023, 5:16 PM

#

No no no. It just means not creating Payment Methods using the Sources API

#

You can still use the Card Element or the Payment Element just fine

kind pecan Apr 17, 2023, 5:19 PM

#

oh ok, so the source API is used within the stripe.js lib by default right?

because we are using confirmSetup currently in the stripe.js lib.

 /**
   * Use `stripe.confirmSetup` to confirm a SetupIntent using data collected by the [Payment Element](https://stripe.com/docs/js/element/payment_element).
   * When called, `stripe.confirmSetup` will attempt to complete any [required actions](https://stripe.com/docs/payments/intents), such as authenticating your user by displaying a 3DS dialog or redirecting them to a bank authorization page.
   * Your user will be redirected to the return_url you pass once the confirmation is complete.
   *
   * By default, stripe.`confirmSetup` will always redirect to your return_url after a successful confirmation.
   * If you set `redirect: "if_required"`, then `stripe.confirmSetup` will only redirect if your user chooses a redirect-based payment method.
   * Setting `if_required` requires that you handle successful confirmations for redirect-based and non-redirect based payment methods separately.
   *
   * @docs https://stripe.com/docs/js/setup_intents/confirm_setup
   */
  confirmSetup(options: {
    elements: StripeElements;
    confirmParams?: Partial<paymentIntents.ConfirmPaymentData>;
    redirect: 'if_required';
  }): Promise<SetupIntentResult>;

night whale Apr 17, 2023, 5:19 PM

#

Nope

#

Okay lets back up

#

What are you trying to do
What APIs are you using the collect payment ?

kind pecan Apr 17, 2023, 5:21 PM

#

I am using the following two packages

"@stripe/react-stripe-js": "^2.1.0",
"@stripe/stripe-js": "^1.52.1",

#

and confirming a setup-intent with the following

const elements = useElements();

...

const result = await stripe.confirmSetup({
        elements,
        confirmParams: {
          return_url: `${HOST}/account/wallet`,
        },
        redirect: 'if_required',
      });

where useElements and stripe is from

import { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js';

night whale Apr 17, 2023, 5:24 PM

#

Okay so you are using Setup Intents. And confirmSetup will use the Payment Method. So this should handle 3DS for you just fine.

kind pecan Apr 17, 2023, 5:25 PM

#

yea adding a card is fine, however when using the payment-intent confirmation it does not. So let me continue.

#

once we know how much to charge we do the following

import { useStripe } from '@stripe/react-stripe-js';
...
const stripe = useStripe()
...
stripe
          ?.confirmCardPayment(
            paymentIntentClientSecret,
            { payment_method: paymentMethodID },
            { handleActions: false },
          ).then((resp) => { ... })

drowsy sapphireBOT Apr 17, 2023, 5:27 PM

#

kind pecan Apr 17, 2023, 5:28 PM

#

which returns a payload looking like

{
...
next_action: {
 type: "use_stripe_sdk",
 use_stripe_sdk: {
   ...
   three_ds_method_url: "",
   ...
 },
 ...
},
status: "requires_source_action"
...
}

#

Does that make sense or do you need more information ?

night whale Apr 17, 2023, 5:32 PM

#

Do you have an example Payment Intent I can take a look at?

#

The ID starts pi_

kind pecan Apr 17, 2023, 5:32 PM

#

"pi_3MxvppFdV4bT3T5F1TFIusBn"

night whale Apr 17, 2023, 5:35 PM

#

Thanks, looking

#

Okay so in this case you should be transitioning to the 3DS authentication flow

#

The status is requires_action

kind pecan Apr 17, 2023, 5:36 PM

#

shouldn't there be a url to follow within the response payload?

Screenshot_2023-04-17_at_10.36.18_AM.png

#

the three_ds_method_url?

neat zealot Apr 17, 2023, 5:38 PM

#

perf-react-paymentelement

#

@kind pecan I'm sorry I don't really understand what the issue is and what you are trying to solve

kind pecan Apr 17, 2023, 5:54 PM

#

Sorry for the confusion. I am attempting to confirm a payment intent with the stripe.js library using a 3DS requried test card.

I was trying to find documentation on how to do so properly. @night whale linked me this document on the website ( https://stripe.com/docs/payments/3d-secure).

which gives the references that the payload should return something like

next_action: {
    type: 'redirect_to_url',
    redirect_to_url: {
      url: 'https://hooks.stripe.com/...',
      return_url: 'https://mysite.com'
    }
}

and to do the following

var action = intent.next_action;
  if (action && action.type === 'redirect_to_url') {
    window.location = action.redirect_to_url.url;
  }

but I don't see that field is my response payload.

neat zealot Apr 17, 2023, 5:56 PM

#

How are you integrating exactly. Because that doc is for extremely advanced users that don't want to use Stripe.js at all usually. In your situation you should be using PaymentElement and calling confirmPayment() and let us do everything

kind pecan Apr 17, 2023, 6:08 PM

#

sorry I will get back to you in a bit.

#perf-react-paymentelement