aghor-reactnative-3ds | Stripe Developers | Page 1

wind caveBOT Jul 31, 2023, 6:42 PM

#

empty monolith Jul 31, 2023, 6:43 PM

#

Hey @pulsar bay what are your questions?

pulsar bay Jul 31, 2023, 6:43 PM

#

After successful 3D Secure authentication, customers are not redirected back to the app as expected. Instead, they receive an error message in Safari, stating that "Safari cannot open the page because the address is invalid."

wind caveBOT Jul 31, 2023, 6:44 PM

#

empty monolith Jul 31, 2023, 6:46 PM

#

aghor-3ds-safari

#

@pulsar bay unfortunately this is a bit too vague for us to help. Can you provide more actionable details such as an exact PaymentIntent id pi_123 we can look at? Can you also explain your overall integration here? Are you doing this on Mobile? Which UI element do you use? Any other information about your overall Stripe integration?

pulsar bay Jul 31, 2023, 6:48 PM

#

sure

#

i am using @stripe/stripe-react-native

empty monolith Jul 31, 2023, 6:48 PM

#

aghor-reactnative-3ds

pulsar bay Jul 31, 2023, 6:49 PM

#

i am facing this issue on ios

empty monolith Jul 31, 2023, 6:49 PM

#

Okay that helps and is likely part of the issue. Can I ask you to provide a detailed summary all in one Discord message? Please don't send many separate sentences seconds apart

pulsar bay Jul 31, 2023, 6:49 PM

#

sure

empty monolith Jul 31, 2023, 6:50 PM

#

The server is really busy right now with lots of people askign questions and yours is going to be quite technical as it's likely a React Native specific issue. So if you can provide a detailed summary with an exact PaymentIntent id, the error, the exact URL you set when you confirmed, the exact version of React Native SDK you're using,the environment of your device, if you have been able to reproduce and also share the exact code you're using to confirm the PaymentIntent.
all in one message and then my colleague @drifting phoenix can help further

pulsar bay Jul 31, 2023, 6:51 PM

#

To automatically dismiss the webview when authentication completes,  we have configure  configure a custom URL scheme as per stripe documentation

here is

Info.plist

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>com.buywin.ae</string>
<key>CFBundleURLSchemes</key>
<array>
<string>buywinae</string>
</array>
</dict>
<dict/>
</array>

And StripeProvider

Instead, of redirect receive an error message in Safari, that "Safari cannot open the page because the address is invalid."   Do we need to do additional chnages?

#

"react-native": "0.68.2",
"@stripe/stripe-react-native": "^0.22.1",

empty monolith Jul 31, 2023, 6:54 PM

#

We're still missing a clear example id (sorry I did ask for all of it in one message 😅)

pulsar bay Jul 31, 2023, 6:55 PM

#

pm_1NWg4BAYS2cdYjW5vPSfVCSZ

#

i have define urlScheme= "buywinae" // required for 3D Secure and bank redirects in info.plist do i need to handle linking from native side ?

drifting phoenix Jul 31, 2023, 6:57 PM

#

👋 We have docs that go over this here
https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=payment-sheet#react-native-set-up-return-url

pulsar bay Jul 31, 2023, 6:58 PM

#

From where do I suppose to get returnURL?

drifting phoenix Jul 31, 2023, 6:59 PM

#

Not sure what you mean by that. The Return URL is based on the URL scheme you setup in your app.

pulsar bay Jul 31, 2023, 7:02 PM

#

</StripeProvider>

const createOrderSuccess = async (response) => {
console.log("createOrderSuccess", response);
setPublishKey(response.publishableKey);
setCustomer(response.customer);
setEphemeralKey(response.ephemeralKey);
setPaymentIntent(response.paymentIntent);
setPaymentIntentId(response.paymentIntentId);

const { error } = await initPaymentSheet({
  merchantDisplayName: "Buywin",
  customerId: response.customer,
  customerEphemeralKeySecret: response.ephemeralKey,
  paymentIntentClientSecret: response.paymentIntent,
  // Set `allowsDelayedPaymentMethods` to true if your business can handle payment
  //methods that complete payment after a delay, like SEPA Debit and Sofort.
  allowsDelayedPaymentMethods: true,
  // defaultBillingDetails: {
  //   name: 'Jane Doe',
  // },
  returnURL: "buywinae://",
  googlePay: {
    merchantCountryCode: "US",
    testEnv: true, // use test environment
  },
  applePay: {
    merchantCountryCode: "US",
  },
});
if (!error) {
  setPaymentIntentId(response.paymentIntentId);
  setLoading(false);
  checkStock(response.paymentIntentId);
} else {
  setLoading(false);
}

};

#

please have a look and note me where i am wrong

drifting phoenix Jul 31, 2023, 7:10 PM

#

if you load "buywinae://" in your safari window directly, does that open up the app or does it show the same error as the 3DS modal?

pulsar bay Jul 31, 2023, 7:18 PM

#

it opens my app

drifting phoenix Jul 31, 2023, 7:19 PM

#

Also just to clarify, you're using PaymentSheet in your app. In which case the code you have in StripeProvider isn't needed.
PaymentSheet supports 3DS out of the box. You've mixed up instructions from two different guides.

You currently have code from
https://stripe.com/docs/payments/3d-secure?platform=react-native#when-to-use-3d-secure

but what you really need is just this
https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=payment-sheet#stripe-initialisation
and this
https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=payment-sheet#react-native-set-up-return-url

pulsar bay Jul 31, 2023, 7:20 PM

#

do i need to handle redirect manually or sdk will handle it ?

drifting phoenix Jul 31, 2023, 7:21 PM

#

The SDK should handle it automatically as long as you configure the urlScheme correctly.

pulsar bay Jul 31, 2023, 7:22 PM

#

what i suppose to next

#

no need to do this ?

import React, { useEffect, useCallback } from 'react';
import { Linking } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
const { handleURLCallback } = useStripe();

const handleDeepLink = useCallback(
async (url: string | null) => {
if (url) {
const stripeHandled = await handleURLCallback(url);
if (stripeHandled) {
// This was a Stripe URL - you can return or add extra handling here as you see fit
} else {
// This was NOT a Stripe URL – handle as you normally would
}
}
},
[handleURLCallback]
);

useEffect(() => {
const getUrlAsync = async () => {
const initialUrl = await Linking.getInitialURL();
handleDeepLink(initialUrl);
};

getUrlAsync();

const deepLinkListener = Linking.addEventListener(
  'url',
  (event: { url: string }) => {
    handleDeepLink(event.url);
  }
);

return () => deepLinkListener.remove();

}, [handleDeepLink]);

return (
<View>
<AwesomeAppComponent />
</View>
);
}

drifting phoenix Jul 31, 2023, 7:23 PM

#

You still need that^

You don't need following:

       urlScheme: "buywinae", // required for 3D Secure and bank redirects
       backgroundColor: "#FFFFFF", // iOS only
       timeout: 5,
       label: {
         headingTextColor: "#000000",
         headingFontSize: 13,
       },
       navigationBar: {
         headerText: "3d secure",
       },
       footer: {
         // iOS only
         backgroundColor: "#FFFFFF",
       },
       submitButton: {
         backgroundColor: "#000000",
         cornerRadius: 12,
         textColor: "#FFFFFF",
         textFontSize: 14,
       },```

#

also try setting return URL to buywinae://stripe-redirect and see if that behaves any differently

#aghor-reactnative-3ds