CODEWITHSUNDEEP
react-nativeexpressserverstripe-paymentsfetch-api
Charlotte Keats
Charlotte Keats

Reputation: 1

Integrating Stripe with React Native

We are trying to integrate Stripe into a react native app using @stripe/stripe-react-native. We followed this tutorial https://www.youtube.com/watch?v=DZlAET7Tgx4 https://www.youtube.com/watch?v=DZlAET7Tgx4 for reference.

Our API call is returning an undefined object. We think it might have to do with the API url but we've tried everything (localhost, ip address of computer, ip address of wifi) and nothing is working. We try to console log within the post method but nothing prints which makes us think it's not being called properly. We have a server running using express. Any help would be greatly greatly appreciated :)

This is our post method:

app.post('/create-payment-intent', async (req, res) => {
  console.log("test place 1")
  try {
    const paymentIntent = await stripe.paymentIntents.create(
      {
        amount: 1099,
        currency: "usd",
        payment_method_types: ["card"],

      }
    );
    const clientSecret = paymentIntent.client_secret;
    res.send({
      clientSecret: clientSecret,
    });
  } catch (e) {
    res.json({ error: e.message });
  }
})

And this is when we call it:

const API_URL = "http://10.49.40.160:8000"

const StripeApp = props => {
  const [email, setEmail] = useState();
  const [cardDetails, setCardDetails] = useState();
  const { confirmPayment, loading } = useConfirmPayment();
  const fetchPaymentIntentClientSecret = async () => {
    const response = await fetch(`${API_URL}/
    create-payment-intent`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        paymentMethodType: 'card',
        currency: 'usd',
      }),
    });
    const { clientSecret, error } = await response.json();
    return { clientSecret, error };
  }

Thank you so much!

Upvotes: 0

Views: 750

Answers (1)

RyanM
RyanM

Reputation: 2960

Can you verify the API found at the URL you provide is active and will return the expected response? It sounds like you already know that is an issue.

If you are just getting started and not necessarily looking to build something immediately production ready, I have found it useful to have a relatively simple back-end that does the bare minimum you will need to test out development ideas.

Stripe provides the code and and even a deployment tool for a simple mobile back-end. If you follow the deployment instructions it will deploy a basic server to Heroku for free. Just be sure to take note of the url and save that information in your app configuration.

Even if you are not too familiar with Ruby syntax (the server is written in Ruby, web.rb) the functions are minimal enough you can look at the code snippets in Stripe Docs to get an idea of what that code is doing.

Happy coding! 😄

Upvotes: 1

Related Questions