STPPaymentHandler does not support concurrent calls to its API.

Describe the bug We have a user that is unable to complete a payment. After completing the 3d secure flow the user receives the following error message: The current action is not yet completed. STPPaymentHandler does not support concurrent calls to its API.

Could not find any relevant pointers on what causes this error. Would appreciate some suggestions.

Thanks in advance.

Smartphone:

• Device: iPhone 12 Prop
• OS: iOS14.8

Lib version: “@stripe/stripe-react-native”: “^0.1.5”

[Sascha1251]

I have the same issue on iOS and figured out, that it depends on the “deepLink” (whether a urlScheme is provided or not). In case I don’t set the urlScheme, then I have to close the browser manually and everything is working fine. In that case (see the following code), the await returns with a paymentIntent, and afterward, I can create another payment and everything is fine. const { error, paymentIntent } = await confirmPayment(clientSecret, { type: "Card" });

However, if I set the urlScheme and the application is opened from the “deep link” after a successful payment, it seems like the code above doesn’t return and therefore the action is not yet completed. In case I create another paymentIntent and try to confirm that, it doesn’t work, as the old action isn’t completed yet.

Therefore I think that the root cause of this issue is the missing handling in case the application is opened from a deep link. The issue only occurs in case you have a 3d secure flow (e.g. using the credit card “4000 0025 0000 3155”).

Edit: I found a solution for the issue with the deep linking. You need to call the “handleURLCallback” in the listener that is registered then stripe will resolve the action and afterward everything is fine. Below is the bare minimum of code that is needed in my case:

import { useStripe } from "@stripe/stripe-react-native";
const { handleURLCallback } = useStripe();

const handleDeepLink = async (url: string) => {
    if (url && url.includes("safepay")) {
        await handleURLCallback(url);
    }
};

useEffect(() => {
    const urlCallback = (event) => {
        console.log("event: ", event);
        handleDeepLink(event.url);
    };

    Linking.addEventListener("url", urlCallback);
    // should remove event listener here
}, []);

@scesbron: Maybe this will help you as well. In case something is not clear, please let me know and I will try to help.

[charliecruzan-stripe]

We have docs for the URL callback handling that @Sascha1251 mentions above: https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=payment-sheet#react-native-set-up-return-url 😃

@Roundups I would double-check those docs, and maybe there is a missing step in the URL scheme setup for a plain RN app that’s missed and needs to be handled by an Expo Config plugin or similar?