#Khalil - Checkout
woven dew
HI 👋
The code shared on that doc has multiple different tab options. How are you integrating? What back-end and front-end languages/frameworks are you using?
woven dew
Okay so the loadStripe function is a means of injecting the stripe client into your front-end. It's a React wrapper for loading stripe.js.
As for the redirect, we tend to put more business logic on the server side as it's more secure and reliable but that doesn't mean it's the only way to handle your integration.
delicate depot
Got it - for loadStripe part: I am not using any Stripe element in my page, I am just having a checkout button that redirects to the Stripe checkout page
Does that mean I don't need to use it
woven dew
Nope you should be fine to just redirect to the Checkout page.
delicate depot
The tutorial is talking about Stripe Checkout relies on Stripe.js, Stripe’s foundational JavaScript library for collecting sensitive payment information with advanced fraud detection.
So that's why I was confused, I am guessing it talks about collecting sensitive information in the stripe elements
woven dew
Yeah we do advise that but if you're not handling any part of collecting payment details then you should be okay. However, it's useful to detect things like bots navigating your app.
delicate depot
But since I am not using any, so this doesn't apply
woven dew
But yes you are correct it mostly applies to collecting sensitive info
delicate depot
hmm.. so if I include in my page, it will detect bots?
woven dew
Not necessarily. It will collect data that can inform our risk assessment tools and help Stripe determine if a charge is likely fraud or not.
delicate depot
got it 🙂
Last question: I am curious, in the tutorial, I don't see any Stripe element in the pages/index.js. Do you know in that case why is it used?
Trying to understand better
woven dew
That is because Checkout is a Stripe hosted payment page. so index.js doesn't need any stripe elements
delicate depot
Correct, then why does that file use
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe(
process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);
I'm not certain why.