#shiva - Android redirect

1 messages · Page 1 of 1 (latest)

willow valve
#

Hi!

pale sigil
#

Hi dear

#

Are you able to help me on this ?

#

I am more than happy to share you my code snippets that i have right now

#

it works perfectly fine for iOS

#

with deep linking

willow valve
#

Taking a look here

pale sigil
#

let me chekc

#

daer i have the urlScheme in my stripe init

#

and yes im following this snippet because it works well or android

#

stripe is not closing the browser after payement completion/failure

#

its just hanigng there with the button return to merchant

#

should it be urlScheme={'suriwebwinkel://'} or urlScheme={'suriwebwinkel'}

#

in my app.json i have
"expo": {
"scheme": "suriwebwinkel"}

willow valve
#

Are you able to provide more details here? What are you using within the app? Please provide us steps to try to reproduce so we can further investigate what the issue might be.

pale sigil
#

I am using react native stripe-sdk

#

in my root app i have <StripeProvider publishableKey>

#

and i followed this doc

#

so iOS wasnt working until i implemented step 5

#

w for android the payments are getting processed, but the issue is that the user swill still see the blank screen thats indicating return to merchant

zealous rampart
#

Hi @pale sigil taking over for @willow valve. Give me a few minutes to get up to speed

pale sigil
#

Sure

zealous rampart
#

Are you able to provide steps and all the relevant code to reproduce this behavior on our end?

pale sigil
#

yea the docs

#

that i shared

#

thats is all I followed

#

do you need any code snippet?

zealous rampart
#

do you need any code snippet?
Maybe, but first: are you using Expo Go, or creating a standalone app? Are you following along with anything re. linking for Expo specifically? (e.g. https://docs.expo.dev/guides/linking/)

#

I don't know a lot about Expo, but it seems to have different instructions for each different approach.

pale sigil
#

Sure

#

also yesterday I got this info from Synthrider (Stripe Developer)

It's not needed on android, that platform allows us to handle the necessary piece automatically
this extra setup step is iOS only
(your video showed iOS which is part of what guided me to this)

zealous rampart
#

It's not needed on android, that platform allows us to handle the necessary piece automatically
this extra setup step is iOS only
(your video showed iOS which is part of what guided me to this)
Right, but iOS you said is working now, so you're specifically debugging the redirect on Android specifically, correct?

pale sigil
#

correct

#

because i already published iOS to app store

#

and there its working as expected

#

in Internal use of android, my testers are complaining about the redirect not happening after succesfull/failed payments

zealous rampart
#

Got it. I think it would be helpful if we had all the relevant code you're using (including the Expo snippets) to try and either repro or simply get a better understanding of how everything is intermingled.

#

Also a Payment Intent ID for one of the payments that failed to redirect properly

pale sigil
#

Sure

#

Payment id: pi_3KtcJAH8w5UYmCB01pZoa4Tl

#

So for my expo app:

  1. Added the scheme --> suriwebwinkel

  2. const prefix = Linking.createURL("/");
    const linking = {
    prefixes: [prefix],
    config: {
    screens: {
    Drawer: "home"
    }
    }
    };
    <NavigationContainer linking={linking}>
    <Screens />
    </NavigationContainer>

  3. Now in return url of stripe im passing
    const returnUrl = Linking.createURL();
    returnURL: returnUrl+'home' ,

#

Those are the steps

#

Step 2 lives in my App.js

zealous rampart
#

Can you also provide your Stripe code?

#

P.S. Thanks for working with me on this. I know the back-and-forth can become cumbersome

pale sigil
#

Thats perfectly fine

#

Sure

#

const useStripePayment = ({ navigation }) => {
const { initPaymentSheet, presentPaymentSheet, handleURLCallback } = useStripe();
const [active, setActive] = useState(false);
const [loading, setLoading] = useState(false);
const [userInfo, setUserInfo] = useState({});

const handleDeepLink = useCallback(
async (url) => {
console.log(url)
if (url && url.includes('home')) {
await handleURLCallback(url);
}
},
[handleURLCallback]
);

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

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

  return () => deepLinkListener.remove();
},[handleDeepLink])
#

const initializePaymentSheet = async (cSecret, name, email) => {
const billingDetails = {
name: name
};
const returnUrl = Linking.createURL();
const { error } = await initPaymentSheet({
paymentIntentClientSecret: cSecret,
defaultBillingDetails: billingDetails,
primaryButtonColor: "#16162E",
customFlow: false,
merchantDisplayName: "Suriwebwinkel B.V.",
returnURL: returnUrl+'home' ,
style:'automatic'
});
if (!error) {
setLoading(true);
}
};

const openPaymentSheet = async () => {
const { error } = await presentPaymentSheet();
setLoading(false);
if (error) {
Toast.show({
type: "error",
text1: 'Betaling mislukt, neem contact met ons op',
});
} else {
Toast.show({
type: "success",
text1: "Betaling voltooid, Grangtangi!",
});
}
};

const startPaymentHandler = async () => {
setLoading(true);
await openPaymentSheet();
};

#

const handleSubmit = async ({ totalCartPrice, orderId }) => {
const userInfoString = await AsyncStorage.getItem("userInfo");
const token = JSON.parse(userInfoString);
let cSecret;
try {
const res = await getUsercSecret({ totalCartPrice, orderId, token });

  if (res?.status === 200) {
    cSecret = res?.data.client_secret.client_secret;
    setUserInfo({
      cSecret,
      orderId: orderId,
      name: token.name,
      email: token.email,
    });
    if (cSecret) {
      await initializePaymentSheet(cSecret, token.name, token.email);
      setActive(true);
    }
  }
} catch (err) {
  console.log(err);
}

};

#

entry function is handleSubmit and then i get the paymentIntent from my server

#

which I then call initializePaymentSheet to initialize the sheet

#

if the initialization is done I open the payment sheet which has the return Url as you can see

#

Please let me know if you need clarity on any other points

#

or need more code snippets

zealous rampart
#

Do you have a successful iOS Payment Intent ID I can look at to compare on a theory I have?

pale sigil
#

let me see

#

This is one that worked for an iOS user:

#

pi_3KtbvxH8w5UYmCB01v5baT9G

zealous rampart
#

Thanks. Taking a look now

pale sigil
#

Sure

zealous rampart
#

Okay, so your code at:

const returnUrl = Linking.createURL();
const { error } = await initPaymentSheet({
paymentIntentClientSecret: cSecret,
defaultBillingDetails: billingDetails,
primaryButtonColor: "#16162E",
customFlow: false,
merchantDisplayName: "Suriwebwinkel B.V.",
returnURL: returnUrl+'home' ,
style:'automatic'
});
if (!error) {
setLoading(true);
}
};

Whatever is happening with returnUrl on iOS is rendering the right format of
appname://thing, but on Android it is doing something odd and making it a format
stripesdk://payment_return_url/nl.suriw<redacted> where stripesdk is wrong, it needs to be suriwebwinkel.

As a next step, can you log out returnUrl+'home' in both iOS and Android (before you call initPaymentSheet() and see why it returns a different string each time.

#

Also, try hard-coding returnURL: "suriwebwinkel://home",
in your initPaymentsheet() call and see if that works on Android

pale sigil
#

i see

#

let me try

#

are you still with me ?

fickle lava
#

Hey @pale sigil, @zealous rampart needed to step away but I'm here to help.

#

I'll catch up while you give the above a try

pale sigil
#

Cool

#

i just hardcoded it

#

waiting for build to be completed

#

so that i can test it in the emulator ok?

#

Please bare with me

#

really appreciate your help

fickle lava
#

You are using Expo right? So you must be on a pretty early version of our RN SDK

pale sigil
#

exactly im running on "@stripe/stripe-react-native": "^0.2.3",

#

I did hard code it

#

to

#

suriwebwinkel://

#

but still no luck

#

returnURL: "suriwebwinkel://home" ,

fickle lava
#

Can you provide the PaymentIntent ID for that test?

pale sigil
#

Sure

#

pi_3KtgSVH8w5UYmCB00J8JCqE6

fickle lava
pale sigil
#

it looks like the return url is still set to:
"return_url": "stripesdk://payment_return_url/nl.suriwebwinkel.suriwebdev",

fickle lava
#

🙂

pale sigil
#

yes exacty

#

but you saw my code right ?

fickle lava
pale sigil
#

in ios:
"redirect_to_url": {
"return_url": "suriwebwinkel://home",

fickle lava
#

Right

pale sigil
#

and im running on a later version than 0.4.0

fickle lava
#

There was a bug with the underlying Android SDK

#

No you are running 0.2.3

pale sigil
#

Oh my god

#

your right

#

but then the problem is

fickle lava
#

Yeah Expo is limiting here 😦

pale sigil
#

my expo version is "expo": "^44.0.5",

#

and expo said it will only work with 0.2.3

fickle lava
#

Yep exactly

#

We are working on releasing compatibility with newer Expo versions

#

But I don't have a timeline for that

pale sigil
#

oh so that means i have to ship my code like this to production ?

fickle lava
#

You either ship like that and wait for the new Stripe RN and Expo update release when you can update to a newer version of Stripe RN and Expo, or you don't use Expo and you use a newer version of the current Stripe RN SDK.

#

Not the best options, I know

pale sigil
#

hahah not using expo means start the whole project afresh

fickle lava
#

😦

pale sigil
#

Yea i think for now i dont have any option then to wait, but you know what

#

i really appreciate you helping me this fast and identified it right away

#

I was also on an email with Rubeus who. mentioned the same but i did not really understand him but he pointed out to the same fix and i was like but im using a newer version right ahah

fickle lava
#

I'm glad we could help figure it out — sorry there isn't a better solution at the moment.

pale sigil
#

So on more question, remember there is a screen where there is a button mentione "return to merchant"

#

is there a way i can change that? I know thats a screen hosted by stripe but just trying to make sure

#

if yes i could atleast add the information in there to close the tab.

fickle lava
#

That text and that screen isn't editable

pale sigil
#

GOt it

#

You have a great one

#

thank you very much for the support. I wish I knew this earlier

#

that we could ask developers questions on discord

#

rather then calling in

#

because that is soo hard to explain over there

fickle lava
#

Well if anything pops up in the future don't hesitate to come back here!

pale sigil
#

sure

#

also

#

how will i get the update regarding this issue with expo

#

and stripe

#

whther

#

it gets resolved.

fickle lava
#

Then you will get an email when new releases happen

#

And that should include information about when the RN SDK and Expo update happens

pale sigil
#

perfect

#

got it

#

thank you very much