lam-playon-sports_code | Stripe Developers | Page 1

clever voidBOT Apr 25, 2024, 5:15 AM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1232922990921121892

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

wispy swanBOT Apr 25, 2024, 5:17 AM

#

ripe grotto Apr 25, 2024, 5:20 AM

#

Where did you see <StripeProvider> provider from? This is not a react component in stripe-react-js

foggy zephyr Apr 25, 2024, 5:47 AM

#

yes

#

import React from 'react';
import Cart from "./Cart";
import QuickPayment from "./quick-payment/QuickPayment";
import StripeProvider from "./StripeProvider";
import CardPayment from "./card-payment/CardPayment";
import QuickPayCheckoutForm from "./quick-payment/QuickPayCheckoutForm";
import {Elements, ExpressCheckoutElement, LinkAuthenticationElement, PaymentElement} from "@stripe/react-stripe-js";
import CardPayCheckoutForm from "./card-payment/CardPayCheckoutForm";

const ReviewAndBuy = () => {
return <div>
<div>
<h1>
ExpressCheckoutElement
</h1>
<StripeProvider>
<Elements stripe={stripePromise}options={{amount: total * 100,mode: 'payment',currency: 'usd',payment_method_configuration: QUICK_PAY_PAYMENT_METHOD_CONFIGURE_ID}}
>
<ExpressCheckoutElement onConfirm={onConfirm}/>
</Elements>
</StripeProvider>
</div>
<div>
<h1>
PaymentElement
</h1>
<StripeProvider>
<Elements stripe={stripePromise}
options={{
clientSecret: paymentIntent.client_secret
}}
>
<PaymentElement/>
<LinkAuthenticationElement id="link-authentication-element"
// Access the email value like so:
// onChange={(event) => {
// setEmail(event.value.email);
// }}
//
// Prefill the email field like so:
// options={{defaultValues: {email: 'foo@bar.com'}}}
/>
</Elements>)
</StripeProvider>
</div>
</div>
};

export default ReviewAndBuy;

#

This payment page

#

will load both ExpressCheckoutElement for ApplePay, GooglePay and PaymentElement for card,link

#

--

#

here is the StripeProvider with load config

#

import * as React from 'react';
import {useEffect, useState} from "react";
import {loadStripe} from "@stripe/stripe-js";

const StripeContext = React.createContext({stripePromise: null});

export const useStripeContext = () => {
return React.useContext(StripeContext)
}

export default function StripeProvider({children}) {
const [stripePromise, setStripePromise] = useState(null);
const [stripeConfig, setStripeConfig] = useState(null);

useEffect(() => {
    fetch("/config").then(async (r) => {
        const stripeConfig = await r.json();
        setStripePromise(loadStripe(stripeConfig.publishableKey));
        setStripeConfig(stripeConfig)
    });
}, []);

return (<StripeContext.Provider value={{stripePromise, stripeConfig}}>
    {stripePromise && stripeConfig && children}
</StripeContext.Provider>);

};

#

Here is the record for the result. It's working fine

#

Im not sure that if any risks

ripe grotto Apr 25, 2024, 5:57 AM

#

I think this still doesn't address my question where <StripeProvider> is from? We don't know what <StripeProvider> is, so can't advise whether you can use multiple <StripeProvider> with Elements.

However, it's possible to put multiple elements such as <ExpressCheckoutElement> and <PaymentElement> in one single <Elements> group

foggy zephyr Apr 25, 2024, 5:58 AM

#

ok

#

StripeProvider it just be an wrapper of loadStripe from "@stripe/stripe-js";

#

because need to use multiple <Elements />

#

because i need to use mutiple payment_method_configuration option in <Elements />

#

each payment_method_configuration refer to list of payment methods

#

is posiple to use mutiple Elements with the same loadStripe from "@stripe/stripe-js"?

ripe grotto Apr 25, 2024, 6:11 AM

#

As per checking, it's possible to have multiple <Elements>. The only limitation is that each <Elements> group can only mount one of each type of Element in a single <Elements> group, e.g. one <PaymentElement> in one <Elements> group -> you can't have two <PaymentElement> in one <Elements> group

foggy zephyr Apr 25, 2024, 6:13 AM

#

So my code is ok?

#

<div>
<div>
<h1>
ExpressCheckoutElement
</h1>
<StripeProvider>
<Elements stripe={stripePromise}options={{amount: total * 100,mode: 'payment',currency: 'usd',payment_method_configuration: QUICK_PAY_PAYMENT_METHOD_CONFIGURE_ID}}
>
<ExpressCheckoutElement onConfirm={onConfirm}/>
</Elements>
</StripeProvider>
</div>
<div>
<h1>
PaymentElement
</h1>
<StripeProvider>
<Elements stripe={stripePromise}
options={{
clientSecret: paymentIntent.client_secret
}}
>
<PaymentElement/>
<LinkAuthenticationElement id="link-authentication-element"
// Access the email value like so:
// onChange={(event) => {
// setEmail(event.value.email);
// }}
//
// Prefill the email field like so:
// options={{defaultValues: {email: 'foo@bar.com'}}}
/>
</Elements>)
</StripeProvider>
</div>
</div>

#

each Elements group has one type of Element

#

one for ExpressCheckoutElement and one for PaymentElement

ripe grotto Apr 25, 2024, 6:15 AM

#

Yes, this looks fine to me! I'd recommend trying it out in test mode

foggy zephyr Apr 25, 2024, 6:17 AM

#

yes. I have tesed with test mode and it's working fine. But not sure if any risk for security or bussiness

ripe grotto Apr 25, 2024, 6:27 AM

#

This is fine!

foggy zephyr Apr 25, 2024, 6:39 AM

#

Thank you.

ripe grotto Apr 25, 2024, 6:40 AM

#

No problem! Happy to help 😄

foggy zephyr Apr 25, 2024, 6:59 AM

#

Ah just want to ask more about that approach to make sure everything correct again 😄

#

can i use loadStripe from stripjs multiple time?

#

<div>
<h1>
ExpressCheckoutElement
</h1>
<div>
{
loadStripe(stripeConfig.publishableKey).then(stripePromise => {
return <Elements stripe={stripePromise} options={{amount: total * 100,mode: 'payment',currency: 'usd', payment_method_configuration: QUICK_PAY_PAYMENT_METHOD_CONFIGURE_ID}}
>
<ExpressCheckoutElement onConfirm={onConfirm}/>
</Elements>
})
}

        </div>
    </div>
    <div>
        <h1>
            PaymentElement
        </h1>
        <>
            {
                loadStripe(stripeConfig.publishableKey).then(stripePromise => {
                    return  <Elements stripe={stripePromise}
                                      options={{
                                          clientSecret: paymentIntent.client_secret
                                      }}
                    >
                        <PaymentElement/>
                        <LinkAuthenticationElement id="link-authentication-element"
                            // Access the email value like so:
                            // onChange={(event) => {
                            //  setEmail(event.value.email);
                            // }}
                            //
                            // Prefill the email field like so:
                            // options={{defaultValues: {email: 'foo@bar.com'}}}
                        />
                    </Elements>
                })
            }
        </>
    </div>

ripe grotto Apr 25, 2024, 7:01 AM

#

Yup! That will be fine.

foggy zephyr Apr 25, 2024, 7:01 AM

#

Great. Thank you very much

ripe grotto Apr 25, 2024, 7:06 AM

#

No problem! Happy to help 😄

foggy zephyr Apr 25, 2024, 7:21 AM

#

Ah one more question that is that ok using ngrok? is there any security issue using ngrok?

#lam-playon-sports_code