SamMon-Expo | Stripe Developers | Page 1

dense grail Aug 12, 2022, 2:56 AM

#

Hi there, let me help you

supple dove Aug 12, 2022, 2:56 AM

#

dense grail Hi there, let me help you

Yes

#

🥰

dense grail Aug 12, 2022, 2:57 AM

#

Can you send me the detailed error message?

supple dove Aug 12, 2022, 2:57 AM

#

I cant see any error

#

when i debug into code

dense grail Aug 12, 2022, 2:58 AM

#

or do you have any information on this undefined error? (e.g., which variable is undefined)

supple dove Aug 12, 2022, 2:58 AM

#

    if (!resClientSecret) {
      return;
    }
    const { error } = await initPaymentSheet({
      paymentIntentClientSecret: resClientSecret,
    });
    console.log(error);
    if (error) {
      Alert.alert(error);
    }
  };```

#

this initPaymentSheet gives an undefined error

dense grail Aug 12, 2022, 3:00 AM

#

Did the log tell you which variable is undefined?

supple dove Aug 12, 2022, 3:00 AM

#

no

dense grail Aug 12, 2022, 3:00 AM

#

Can you just past the error message here?

supple dove Aug 12, 2022, 3:00 AM

#

#

Can u c undefined thats the thing

dense grail Aug 12, 2022, 3:01 AM

#

const { error } = await initPaymentSheet({
      paymentIntentClientSecret: resClientSecret,
    });
    console.log(error);

#

So the error is undefined, that means there's no error.

supple dove Aug 12, 2022, 3:02 AM

#

yes

#

then whats the problem

dense grail Aug 12, 2022, 3:03 AM

#

I don't see a problem here

#

The error object is expected to be undefined if there's no error

supple dove Aug 12, 2022, 3:03 AM

#

but payment is happening

dense grail Aug 12, 2022, 3:04 AM

#

? not sure what you mean

#

You mean payment is happening or not happening?

supple dove Aug 12, 2022, 3:04 AM

#

not happening

dense grail Aug 12, 2022, 3:05 AM

#

What's the PaymentIntent ID?

supple dove Aug 12, 2022, 3:05 AM

#

dense grail Aug 12, 2022, 3:06 AM

#

Paste the paymentIntent ID here

supple dove Aug 12, 2022, 3:06 AM

#

did u mean the publishable key?

dense grail Aug 12, 2022, 3:07 AM

#

No, the PaymentIntent ID, it starts with pi_

supple dove Aug 12, 2022, 3:07 AM

#

ok

#

pi_3LVnrESEv7JCodBk0tzNVV6r_secret_KnzLRZkVxK9GhL6DJmG12AYOt

#

is this what u asked?

dense grail Aug 12, 2022, 3:09 AM

#

Yes

supple dove Aug 12, 2022, 3:09 AM

#

ok

dense grail Aug 12, 2022, 3:09 AM

#

I don't any requests from your Expo app to confirm the PaymentIntent.

#

When you call presentPaymentSheet(), do you see the PaymentSheet pops up?

supple dove Aug 12, 2022, 3:10 AM

#

no

#

nothing is comming

dense grail Aug 12, 2022, 3:10 AM

#

    const { error } = await presentPaymentSheet({ resClientSecret });

is this error object undefined?

supple dove Aug 12, 2022, 3:11 AM

#

let me check

supple dove Aug 12, 2022, 3:12 AM

#

dense grail ``` const { error } = await presentPaymentSheet({ resClientSecret }); ``` is...

yes its undefined

#

initializePaymentSheet is in the useeffect

#

is this with publishable key, I can see that publishable key is not used yet..

dense grail Aug 12, 2022, 3:15 AM

#

Is your component Basket wrapped inside StripeProvider ?

supple dove Aug 12, 2022, 3:16 AM

#

yes it is

#

import RootNavigator from "./src/navigation";

import { NavigationContainer } from "@react-navigation/native";
import { Amplify } from "aws-amplify";
import { withAuthenticator } from "aws-amplify-react-native";
import config from "./src/aws-exports";
import AuthContextProvider from "./src/contexts/AuthContext";
import BasketContextProvider from "./src/contexts/BasketContext";
import OrderContextProvider from "./src/contexts/OrderContext";
import { StripeProvider } from "@stripe/stripe-react-native";

Amplify.configure({
  ...config,
  Analytics: {
    disabled: true,
  },
});

function App() {
  return (
    <NavigationContainer>
      <StripeProvider publishableKey="pk_test_51LNfmKSEv7JCodBkz9Ppyp5dW973XwbCkI1LL2tXjptubAqy1YAHeN2GFGSdoR8GavnQwcmGsxTC8y4kfrbyIz9q00cQGOlsZZ">
        <AuthContextProvider>
          <BasketContextProvider>
            <OrderContextProvider>
              <RootNavigator />
            </OrderContextProvider>
          </BasketContextProvider>
        </AuthContextProvider>
      </StripeProvider>
      <StatusBar style="light" />
    </NavigationContainer>
  );
}

export default withAuthenticator(App);

#

is this correct?

#

<RootNavigator /> is a stack navigator

dense grail Aug 12, 2022, 3:19 AM

#

Is Basket a child to <RootNavigator> ?

supple dove Aug 12, 2022, 3:19 AM

#

yes

dense grail Aug 12, 2022, 3:20 AM

#

Do you mind if I send a post request to your AWS endpoint to create a PaymentIntent?

supple dove Aug 12, 2022, 3:20 AM

#

📎 index.js

supple dove Aug 12, 2022, 3:20 AM

#

dense grail Do you mind if I send a post request to your AWS endpoint to create a PaymentInt...

yes

#

no problem

dense grail Aug 12, 2022, 3:23 AM

#

{"ok": false, "error": "proxy do"}

#

I'm getting this response

supple dove Aug 12, 2022, 3:24 AM

#

what could be the issue

dense grail Aug 12, 2022, 3:24 AM

#

I don't know.

#

I can't even reproduce the issue.

supple dove Aug 12, 2022, 3:24 AM

#

const express = require("express");
const cors = require("cors");
const Stripe = require("stripe");
const stripe = Stripe(process.env.STRIPE_SECRET_KEY);
const app = express();
const PORT = 3000;

app.use("/stripe", express.raw({ type: "*/*" }));
app.use(express.json());
app.use(cors());

app.post("/pay", async (req, res) => {
  try {
    const { amount, id } = req.body;
    if (!amount) return res.status(400).json({ message: "Amount is missing" });
    const paymentIntent = await stripe.paymentIntents.create({
      amount: amount,
      currency: "INR",
      automatic_payment_methods: {
        enabled: true,
      },
      metadata: { id },
    });
    const clientSecret = paymentIntent.client_secret;
    res.json({ message: "Payment initiated", clientSecret });
  } catch (err) {
    console.error(err);
    res.status(500).json({ message: "Internal server error" });
  }
});

// app.post("/stripe", async (req, res) => {
//   const sig = req.headers["stripe-signature"];
//   let event;
//   try {
//     event = await stripe.webhooks.constructEvent(
//       req.body,
//       sig,
//       process.env.STRIPE_WEBHOOK_SECRET
//     );
//   } catch (err) {
//     console.error(err);
//     res.status(400).json({ message: err.message });
//   }

//   // Event when a payment is initiated
//   if (event.type === "payment_intent.created") {
//     console.log(`${event.data.object.metadata.name} initated payment!`);
//   }
//   // Event when a payment is succeeded
//   if (event.type === "payment_intent.succeeded") {
//     console.log(`${event.data.object.metadata.name} succeeded payment!`);
//     // fulfilment
//   }
//   res.json({ ok: true });
// });

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

#

this is the server code

#

but expo app gives back the clientSecret

dense grail Aug 12, 2022, 3:27 AM

#

OK. I'm able to create a PaymentIntent by removing the id param

#

did you call onCreateOrder before initializePaymentSheet is invoked?

supple dove Aug 12, 2022, 3:28 AM

#

dense grail Aug 12, 2022, 3:29 AM

#

This only means that the PaymentIntent is created

supple dove Aug 12, 2022, 3:29 AM

#

yes

dense grail Aug 12, 2022, 3:29 AM

#

Can you add a log in initializePaymentSheet and print out a message when the initialization is compelted successfully

supple dove Aug 12, 2022, 3:30 AM

#

ok sir

dense grail Aug 12, 2022, 3:30 AM

#

Then call openPaymentSheet only if the paymentSheet is initialized.

#

BTW. One concern on your server code. You shouldn't pass the amount from the client, this allows bad users to change the amount via the HTTP request

supple dove Aug 12, 2022, 3:31 AM

#

supple dove Aug 12, 2022, 3:33 AM

#

dense grail BTW. One concern on your server code. You shouldn't pass the amount from the cli...

I am learning Stripe , I dont have much expossure in RN too. I just started practice these things

supple dove Aug 12, 2022, 3:33 AM

#

supple dove

this what initializePaymentSheet gives

dense grail Aug 12, 2022, 3:36 AM

#

What is this error about?

#

The error right after the Payment initiated

supple dove Aug 12, 2022, 3:36 AM

#

thats hardcoded

dense grail Aug 12, 2022, 3:39 AM

#

Can you share with me the latest code? I want to see what you passed to the console.log

supple dove Aug 12, 2022, 3:39 AM

#

📎 message.txt

dense grail Aug 12, 2022, 3:42 AM

#

Is the error still undefined from the response of initializePaymentSheet ?

supple dove Aug 12, 2022, 3:44 AM

#

yes

#

also now app is crashing

#

i am getting like this too

dense grail Aug 12, 2022, 3:46 AM

#

That's what your server responded, you should check your server code.

supple dove Aug 12, 2022, 3:46 AM

#

#

now i am getting like this

#

when i press pay button

supple dove Aug 12, 2022, 3:47 AM

#

supple dove

where to add merchant display name

dense grail Aug 12, 2022, 3:47 AM

#

OK, you should pass merchantDisplayName and merchantCountryCode to initPaymentSheet

supple dove Aug 12, 2022, 3:47 AM

#

example

#

?

dense grail Aug 12, 2022, 3:48 AM

#

      paymentIntentClientSecret: paymentIntent.secret,
      customFlow: false,
      merchantDisplayName: 'Example merchant',
      merchantCountryCode: 'IN',
    })```

supple dove Aug 12, 2022, 3:48 AM

#

ok

#

I is for india?

dense grail Aug 12, 2022, 3:49 AM

#

IN for India

supple dove Aug 12, 2022, 3:49 AM

#

Indisa?

#

#

Payment is successfull but now app is redirecting to a browser

#

and closing

dense grail Aug 12, 2022, 3:53 AM

#

What test card are you using?

supple dove Aug 12, 2022, 3:53 AM

#

4242 one

dense grail Aug 12, 2022, 3:54 AM

#

4242 is a US card, and all foreign card requires 3DS as per India local regulation.

Please use an Indian test card instead 4000 0035 6000 0008

supple dove Aug 12, 2022, 3:54 AM

#

ok

supple dove Aug 12, 2022, 4:26 AM

#

Hi

#

Thank You

#

Some issues are there

#

but now payment is happening

dense grail Aug 12, 2022, 4:28 AM

#

No problem!

supple dove Aug 12, 2022, 4:29 AM

#

after 3DS now app is crashing

dense grail Aug 12, 2022, 4:30 AM

#

Do you have the stack trace log?

supple dove Aug 12, 2022, 4:42 AM

#

📎 message.txt

#

I modified code like this

#

if you have any suggestion please let me know

dense grail Aug 12, 2022, 4:43 AM

#

I need the crash log, not the code.

supple dove Aug 12, 2022, 4:47 AM

#

ok

supple dove Aug 12, 2022, 5:29 AM

#

I am not understanding the logs

#

instead i recorded the video of whats happening

#

I have to press multiple times

errant arrow Aug 12, 2022, 5:36 AM

#

👋 stepping in. Have you obtained the crash log? Would be helpful If you can share the crash log

supple dove Aug 12, 2022, 6:11 AM

#

I am not able to find the crash log

#

where can I find that

errant arrow Aug 12, 2022, 6:19 AM

#

Your screen recording doesn't look like a crash. A crash is when your app quit unexpectedly to the home screen

#

Did you really experienced a crash here?

after 3DS now app is crashing

supple dove Aug 12, 2022, 6:38 AM

#

errant arrow Your screen recording doesn't look like a crash. A crash is when your app quit u...

yes

#

📎 logcat.txt

#

and finally i found out logcat

supple dove Aug 12, 2022, 6:39 AM

#

errant arrow Did you really experienced a crash here? > after 3DS now app is crashing

not to the home screen , Its going back to expo screen

supple dove Aug 12, 2022, 6:40 AM

#

supple dove

this is the code for that page!

#

is the code correct?

#

If the payment occurs then i have to navigate to Order screen

#

But bcoz of the 3DS app is crashing

#

sometimes createOrder Button is also not working!

errant arrow Aug 12, 2022, 6:45 AM

#

supple dove not to the home screen , Its going back to expo screen

Where is that action in your video? I see you were opening some warning screen

supple dove Aug 12, 2022, 6:46 AM

#

0:50 here when I click btn for payment

#

it opens a webpage

#

then the app crashes

#

as you can see then, when I open the app it shows payment is successful without verifying

errant arrow Aug 12, 2022, 6:53 AM

#

Is that part going to the screen "Expo go"?

supple dove Aug 12, 2022, 6:54 AM

#

yes

errant arrow Aug 12, 2022, 6:58 AM

#

I see this on crash log

#

08-12 12:06:00.696  5054  5184 W ReactNativeJS: Possible Unhandled Promise Rejection (id: 8):
08-12 12:06:00.696  5054  5184 W ReactNativeJS: ReferenceError: Can't find variable: Alert

#

It looks like it stopped by this line and can't call Alert

#

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      onCreateOrder();
    }

#

So:

Debug why Alert is unable to find
After getting Alert working, check its error.code and error.message

supple dove Aug 12, 2022, 7:02 AM

#

Ok Let Me check

supple dove Aug 12, 2022, 7:26 AM

#

errant arrow ``` 08-12 12:06:00.696 5054 5184 W ReactNativeJS: Possible Unhandled Promise R...

Alert was called from react-native

errant arrow Aug 12, 2022, 7:31 AM

#

Yes, from your code, isn't it?

supple dove Aug 12, 2022, 7:37 AM

#

yes,but still after that 3d thing its closing the app

#

then showing payment is successfull

spare mist Aug 12, 2022, 8:04 AM

#

yep because your app crashed because your code uses "Alert" which was not found.

supple dove Aug 12, 2022, 8:05 AM

#

no still it crashes

#

let me show you

#

see 30th second

spare mist Aug 12, 2022, 8:10 AM

#

what's wrong with that exactly?

supple dove Aug 12, 2022, 8:10 AM

#

I dont know why its happening like this

supple dove Aug 12, 2022, 8:11 AM

#

spare mist what's wrong with that exactly?

you see payment was not completed!

#

then the app crashes

#

when i open it back it shows payment is successfull

spare mist Aug 12, 2022, 8:11 AM

#

I think it does complete.

supple dove Aug 12, 2022, 8:11 AM

#

spare mist I think it does complete.

there is 3ds or something right

spare mist Aug 12, 2022, 8:11 AM

#

you're expecting it to show some specific 3D Secure window right with like a button?

#

that doesn't always happen, there's a "frictionless" flow where it looks like in that video, where the bank just checks the details automatically and the customer doesn't have to do anything

#

so that happened, and the customer got redirected back to your app, which is probably crashing

#

it's quite easy to help if you share the logcat logs for the crash and the PaymentIntent ID pi_xxx.

supple dove Aug 12, 2022, 8:13 AM

#

spare mist that doesn't always happen, there's a "frictionless" flow where it looks like in...

Ill share now

spare mist Aug 12, 2022, 8:15 AM

#

well before that at least look at the logs yourself first and see if you can debug why it crashes!

supple dove Aug 12, 2022, 8:16 AM

#

spare mist well before that at least look at the logs yourself first and see if you can deb...

Ok

#

I was checking from morning!

spare mist Aug 12, 2022, 8:16 AM

#

if you're stuck we can try to help but you're the developer of the app and have a much better position to debug it than we do since you're actually writing the code and running the app and have a debugger and such

supple dove Aug 12, 2022, 8:16 AM

#

😓

supple dove Aug 12, 2022, 8:16 AM

#

spare mist if you're stuck we can try to help but you're the developer of the app and have ...

yes sir i understood

#

this the log file

📎 logcat.txt

#

pi_3LVtFRSEv7JCodBk1LIXFCJE_secret_sqXERV49qcD9Np0psKsV1UVvL

spare mist Aug 12, 2022, 8:33 AM

#

so are you really sure it's crashing?

#

like I said, that app doesn't look like it's crashing. After the payment it's supposed to redirect to "stripesdk://payment_return_url/host.exp.exponent" . Are you sure that is not simply what's happening?

supple dove Aug 12, 2022, 8:41 AM

#

Hm

#

thank you

#

you were so helpfull

supple dove Aug 12, 2022, 8:44 AM

#

supple dove see 30th second

i think that stripe consider expo as the host

#SamMon-Expo