#MilkJuice

1 messages · Page 1 of 1 (latest)

haughty nymphBOT
marsh iron
#

hello

winged ridge
#

HI 👋 how can we help?

marsh iron
#

i implemented deep linking earlier in my app and now on successful payment stripe redirects to a url successfully though the rest of the workflow doesnt seem to go through

#

its supposed to write a document to firebase after successful payment and im not sure, maybe im testing it wrong as well

winged ridge
#

Can you be a bit more specific about what's happening? Ideally a list of steps that illustrate what is occurring compared to what you want to occur, would be most useful

marsh iron
#

yea sure, so im making an app where users fill out a form and then when they pay successfully it uploads that form to firebase

#

so for some payment methods like ideal, i had to use returnURLs

#

so when the user now makes a successful payment on ideal, it redirects them to a success page in the app, but it seems the rest of the workflow doesnt happen

#

as in the form doesnt get uploaded to firebase

winged ridge
#

So is rendering the return URL page supposed to trigger an action to Firebase? Or is it something else?

marsh iron
#

the returned url page is hosted on the backend where a button press redirects the user to the app

#

because when i tried to make the successurl directly take you to the app, it did not work for some reason, the app would just crash

#

forgive me im not doing a very good job explaining this, its all new to me, i think i might be missing out on something obvious

#

this is what i currently have

image.png
#

the url is a simple page that looks like this

image.png
winged ridge
#

Can you copy/paste the code instead of sending a screenshot? It's hard to debug pictures

marsh iron
#

oh yes sure

# 
    setIsloading(true);

    const uploadImage = async (img) => {
      const storage = getStorage();
      const storageRef = ref(storage, uuidv4() + '.jpg');

      const response = await fetch(img);
      const blob = await response.blob();

      uploadBytes(storageRef, blob).catch((err) => {
        console.log(err);
      });

      return new Promise((resolve, reject) => {
        setTimeout(() => {
          getDownloadURL(storageRef)
            .then((url) => {
              blob.close();
              console.log(url);
              resolve(url);
            })
            .catch((error) => {
              console.log(error);
            });
        }, 2000);
      });
    };

    const setUploadedImages = async () => {
      try {
        const url1 = await uploadImage(picture1);
        const url2 = await uploadImage(picture2);
        const url3 = await uploadImage(picture3);

        await setFrontfaceimg(url1);
        console.log(frontfaceimg);
        await setFrontbodyimg(url2);
        console.log(frontbodyimg);
        await setSidebodyimg(url3);
      } catch (e) {
        console.log(e);
      }
    };

    try {
      await setUploadedImages();

      formData.picture1 = frontfaceimg;
      formData.picture2 = frontbodyimg;
      formData.picture3 = sidebodyimg;

      const response = await fetch(
        'https://kolo-server.herokuapp.com/new-order',
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ email: formData.email, name: formData.name }),
        }
      );

      const data = await response.json();
      if (!response.ok) {
        return alert(data.message);
      }
      const initSheet = await stripe.initPaymentSheet({
        paymentIntentClientSecret: data.clientSecret,
        returnURL: 'https://kolo-server.herokuapp.com/paymentsuccess',
      });
      if (initSheet.error) {
        console.error(initSheet.error);
        setIsloading(false);
        return alert(initSheet.error.message);
      }
      const presentSheet = await stripe.presentPaymentSheet({
        clientSecret: data.clientSecret,
      });
      if (presentSheet.error) {
        console.error(presentSheet.error);
        setIsloading(false);
        return alert(presentSheet.error.message);
      }
    } catch (err) {
      console.error(err);
      setIsloading(false);
      alert('Payment failed!');
    }

    try {
      const dbRef = collection(db, 'orders');
      const docRef = await addDoc(dbRef, formData);

      console.log('Document written with ID: ', docRef.id);
      setIsloading(false);
    } catch (e) {
      console.error('Error adding document: ', e);
      setIsloading(false);
    }

    navigation.navigate('PaymentSuccess');
  };```
#

i think i might know whats causing it, it seems linking to apps running in expo go is not possible properly, ill build the app and try it out on testflight on the iphone, ill let you know if it works

#

it will take a while to build, 20 mins or so

winged ridge
marsh iron
#

i tried to do it with react navigation for the links, if it doesnt work ill give this implementation another go, i didnt understand it properly the first time i went through it

# 
  const linking = {
    prefixes: [prefix, 'kolostyling://', 'https://kolo-server.herokuapp.com'],
    config,
  };

  const config = {
    screens: {
      PaymentSuccess: 'PaymentSuccess',
      PaymentFailed: 'PaymentFailed',
    },
  };
#

like this and i just navigate to the payment success page

marsh iron
#

Hey, ive tried it and it does not work, i will see if i can get the implementation in the documentation as you shared

#

is there a youtube video or other resource with examples about it?

winged ridge
#

Not that I know of unfortunately. If the implementation from the docs doesn't work, feel free to drop back in here and let us help.

It's worth mentioning our mobile developers are out of office today, so if you have more complicated questions, we might not be able to answer until tomorrow or later this week.