#typescripter-urlscheme
urban token
hi! thanks for response
no not really
i understand it's a url that will open a specifc app and might go to a speicifc page in that app
but i have never done it
surreal depot
ok gotcha
so yea, its used for deep linking
you when you need to redirect from app to web and back to app you can land at a particular view in your app
The react native docs cover how to set this up, including for Expo:
but then you'd use return URLs like mycoolapp://orders/order_123/detail to show order details when they come back to your app
urban token
i managed to create the link and pass it to Stripe and it works without errors, but:
when I complete or fail card auth it doesn't close the webview nor navigate anywhere
but it returns success
i tested and the link is correct
west mantle
hello, can you talk through a bit more, some parts are not clear
Are you using PaymentSheet or just CardField
west mantle
ok , so you fail card authentication but
but it returns success
which part returns success,confirmPayment()??
west mantle
ah so if you succeed or fail, both cases, your webview doesn't auto-close, right?
if so that means some step of the deep linking process isn't set up on your RN code or your Xcode project
urban token
wait i think i found the error
sorry i didnt notice it before
The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/5.x/configuring-links for more details on how to specify a linking configuration.
please wait i will write if it will work or not
what works from cli: exp://127.0.0.1:19000/--/checkout
what i pass to stripe and it doesn't work: exp://127.0.0.1:19000/--/checkout
does stripe add anything to the url?
west mantle
Stripe probably does add something, I would just test it by confirming a PaymentIntent and breakpointing in the function in your code that is called with the deeplink and log out the deeplink
urban token
which function with deeplink?
that's what i get from stripe when user manually closes the webview popup:
clientSecret: "seti_1Jn403BKVErMxe43jMeNCro8_secret_KRxvowa1pLBK0Wz21KI8wDoFqpHPoWX"
created: "1634833215000.0"
description: null
id: "seti_1Jn403BKVErMxe43jMeNCro8"
lastSetupError: null
livemode: false
paymentMethodId: "pm_1Jn404BKVErMxe434ItsQYis"
paymentMethodTypes: ["Card"] (1)
status: "Succeeded"
usage: "OffSession"
so that is different, in your RN app, you implemented some function (I'm forgetting what it is), something like handleUrl or openUrl right?
urban token
no, I have a CardField and all I do on submit is
const { setupIntent, error } = await confirmSetupIntent(clientSecret, {
type: "Card",
billingDetails: {},
});
it opens a poput webview with thhe card auth
i provide the url shcema to StripeProvider
<StripeProvider
publishableKey={publishableKey}
urlScheme={`${prefix}checkout`}
>
// app goes here
</StripeProvider>
ok let's take a step back
you've done all the steps here right: https://stripe.com/docs/payments/3d-secure#when-to-use-3d-secure
and you have set up handleURLCallback from the Stripe SDK like shown here: https://stripe.com/docs/payments/giropay/accept-a-payment?platform=react-native#handle-deep-linking
these docs should be easier to discover, they are a bit spread out right now, will file with the docs team to fix that
urban token
thank you for this! i haven't seen that docs, I followed this: https://stripe.com/docs/payments/save-and-reuse-cards-only?platform=react-native#react-native-setup and it wasn't mentioned there
i will try that and let you know if it works or not
west mantle
yeah I realize now that section needs to be on multiple docs, flagging to the docs teams
urban token
i haven't passed threeDSecureParams but they seem to only cover some styling, so i think i have all important parts from link 1
just to reconfirm, the second link is for giropay
but im doing only card payment
actually only saving card for later puchase
west mantle
correct, it is giropay, it needs to be done for cards too, the card docs are missing this section
urban token
ok thanks, just wanted to reconfirm
ok so the second link seems to add a function that handles deep linking
west mantle
yes
urban token
but i use react navigation wich does it for me
when i run this flor console it works: npx uri-scheme open exp://127.0.0.1:19000/--/checkout --ios
it goest to correct screen
but if i do the same when browser popup is open it doesnt work
and when i complete auth the browser popup wont close and it doesnt redirect either
west mantle
sure but handleDeepLink function in that section is needed right cause it checks for safepay in the deeplink URL which is what the RN SDK passes as the prfix in the return url
that section is also using ReactNativation no?
import { useNavigation } from '@react-navigation/native';
urban token
correct
let me try this
i think i almost made it working
thank you very much for your help!
just one question
where should i put this code? on the payment screen?
because I put it to App/index.js whcih is outside of navigation
also i want to point out an error. i think in the docs they forgot url function param:
const handleDeepLink = async () => {
if (url && url.includes(`safepay`)) {
await handleURLCallback(url); // url is undefined
navigation.navigate('PaymentResultScreen', { url });
}
};
it should be const handleDeepLink = async (url) => {
west mantle
I think ideally you want this in your App file? Cause your handleDeepLink() function then navigates to a payment screen
but yay glad to hear you're mostly unblocked!!
urban token
do you mean in the app root file?
thats what i did
but as i said it's outside of navigation so I can't use navigation
west mantle
ah so you'd have to do it wherever your outer most component is that can access navigation
urban token
can it be a screen?
like the payment screen?
i cant think of any other component that would have access to nav
west mantle
I am not sure actually! I'm not the most informed on ReactNative so I don't know what the opinionated/recommended answer is