Yharoo | Stripe Developers | Page 1

prime warrenBOT Sep 23, 2022, 1:24 AM

#

quartz jolt Sep 23, 2022, 1:24 AM

#

Hello

#

https://stripe.com/docs/payments/quickstart?platform=web

#

I am following that guide

wanton steeple Sep 23, 2022, 1:25 AM

#

hello! I'm not super familiar with React, but your page can load Elements only when your clientSecret is not null

That's why you have

{clientSecret && (
        <Elements options={options} stripe={stripePromise}>
          <CheckoutForm />
        </Elements>
      )}

#

you can refer to https://stripe.com/docs/payments/quickstart for a full React sample

quartz jolt Sep 23, 2022, 1:46 AM

#

I dont understand what i'm donig wrong

#

    const [clientSecret, setClientSecret] = useState('');
    useEffect(() => {
        (async () => {
            try {
                const result = await fetch(
                    `${process.env.REACT_APP_URL}/createPaymentIntent`,
                    {
                        method: 'post',
                        credentials: 'include',
                    }
                );
                if (result.status === 200) {
                    const { data } = await result.json();
                    console.log(data);
                    setClientSecret(data);

                    return;
                }
            } catch (err) {
                console.log(err);
            }
        })();
    }, []);

    return clientSecret ? (
        <Elements stripe={stripePromise} clientSecret={clientSecret}>
            <PaymentElement />
        </Elements>
    ) : null;
};

export default PaymentEl;

#

I do get the client secret from the request, but I don't understand why its giving me the error even with the conditional rednering

wanton steeple Sep 23, 2022, 1:50 AM

#

if you log clientSecret, what do you get?

quartz jolt Sep 23, 2022, 1:55 AM

#

i get the key

#

by key i mean the client secret

wanton steeple Sep 23, 2022, 1:55 AM

#

can you paste it here?

quartz jolt Sep 23, 2022, 1:56 AM

#

am i supposed to share that key///?

wanton steeple Sep 23, 2022, 1:56 AM

#

it's in test mode right?

quartz jolt Sep 23, 2022, 1:56 AM

#

yes

#

thats the client secret, not public key or secret key

#

I'm not sure how to "wait" for the client secret. I'm already using conditional rendering

wanton steeple Sep 23, 2022, 2:04 AM

#

shouldn't the clientSecret be passed in via options?

#

const options = {
    clientSecret,
    appearance,
  };

  return (
    <div className="App">
      {clientSecret && (
        <Elements options={options} stripe={stripePromise}>
          <CheckoutForm />
        </Elements>
      )}

quartz jolt Sep 23, 2022, 2:05 AM

#

...

#

omg

#

#

changed to options and now im getting that error and a whole bunch of warnings

#

    try {
        const paymentIntent = await stripe.paymentIntents.create({
            amount: 100,
            currency: 'usd',
            automatic_payment_methods: {
                enabled: true,
            },
        });
        console.log(paymentIntent.client_secret);
        res.json({
            data: paymentIntent.client_secret,
        });
    } catch (err) {
        console.log(err);
        res.sendStatus(500);
    }
});``` my backend

wanton steeple Sep 23, 2022, 2:19 AM

#

i don't think this has anything to do with your backend. how are you loading and initializing Stripe?

quartz jolt Sep 23, 2022, 3:22 AM

#

import { Elements, PaymentElement } from '@stripe/react-stripe-js';
const stripePromise = loadStripe(
    'pktest key'
);```

wanton steeple Sep 23, 2022, 3:37 AM

#

i haven't seen that error before, let me check in with someone else. I'll get back to you in a bit

#

i think i'm going to need you to share a minimal sample project that replicates that error to take a look, i can't replicate it on my end. If you share code, remember to remove any sensitive information like api keys.

Alternatively, you can also download the sample as it is from https://stripe.com/docs/payments/quickstart and run it to compare against your own code to see if there are any differences that may be causing that error

quartz jolt Sep 23, 2022, 4:35 AM

#

how can I start the example application?

#

npm start does not start the app

wanton steeple Sep 23, 2022, 4:37 AM

#

there should be a readme in the zip file

#

did you run npm install first?

quartz jolt Sep 23, 2022, 4:50 AM

#

yea lol

#

nothing is working :[

#

[0] operable program or batch file.
[1] 'yarn' is not recognized as an internal or external command,  
[1] operable program or batch file.
[0] yarn start-client exited with code 1
[1] yarn start-server exited with code 1```

#

all I did was npm i and npm start

wanton steeple Sep 23, 2022, 4:52 AM

#

do you have npm installed?

quartz jolt Sep 23, 2022, 4:53 AM

#

yese

wanton steeple Sep 23, 2022, 4:53 AM

#

how about yarn?

quartz jolt Sep 23, 2022, 4:53 AM

#

never used yarn

wanton steeple Sep 23, 2022, 4:53 AM

#

install yarn too

#

https://yarnpkg.com/

#

i'll pass on the feedback. It's odd that we're using yarn without specifying it as a prerequisite

quartz jolt Sep 23, 2022, 4:56 AM

#

ok that seemed to solve that error

quartz jolt Sep 23, 2022, 5:44 AM

#

Hello

#

I have a question reagarind create payment intent

#

app.post("/create-payment-intent",

#

does it have to be spelled exactly like that

uneven rain Sep 23, 2022, 5:53 AM

#

This is the sample, you can rename to anything you like

quartz jolt Sep 23, 2022, 6:01 AM

#

ok

#

also,

#

#

when i press the checkout button, is that when I should be creating payment intent?

#

I keep getting a client secret error, but I am getting a client secret back

uneven rain Sep 23, 2022, 6:04 AM

#

what's the exact error message you're getting?

quartz jolt Sep 23, 2022, 6:05 AM

#

react-dom.development.js:12056 Uncaught IntegrationError: In order to create a payment element, you must pass a valid PaymentIntent or SetupIntent client secret when creating the Elements group.

#

#

Thats the client secret that I get from const createPaymentIntent = async () => { try { const result = await fetch( `${process.env.REACT_APP_URL}/createPaymentIntent`, { method: 'post', credentials: 'include', } ); if (result.status === 200) { const { data } = await result.json(); console.log(data); setClientSecret(data); return; } } catch (err) { console.log(err); } };

#

holy hell

#

I found my error

#

sorry for wasting your guys' time

uneven rain Sep 23, 2022, 6:21 AM

#

No worries! Glad that you find out the issue

quartz jolt Sep 23, 2022, 6:21 AM

#

its because I was passing an a string to the options prop for Elements

quartz jolt Sep 23, 2022, 6:57 AM

#

sorry for bothering you guys, but my client secret after checking out is null.

#

    useEffect(() => {
        if (!stripe) {
            return;
        }
        console.log(stripe);
        const clientSecret = new URLSearchParams(window.location.search).get(
            'payment_intent_client_secret'
        );
        console.log(clientSecret); <--- this is null
        if (!clientSecret) {
            return;
        }

        stripe.retrievePaymentIntent(clientSecret).then(({ paymentIntent }) => {
            switch (paymentIntent.status) {
                case 'succeeded':
                    setMessage('Payment succeeded!');
                    break;
                case 'processing':
                    setMessage('Your payment is processing.');
                    break;
                case 'requires_payment_method':
                    setMessage('Your payment was not successful, please try again.');
                    break;
                default:
                    setMessage('Something went wrong.');
                    break;
            }
        });
    }, [stripe]);```

uneven rain Sep 23, 2022, 7:05 AM

#

are you using a redirect or non-redirect based payment method for your testing? this block of code should only be triggered when the customer completes the redirect based payment method and redirect back to your return_url

quartz jolt Sep 23, 2022, 7:07 AM

#

uhhhh

#

I guess redirect? I was just following the tutorial, wasn't aware that there were 2 options..

#

        if (!stripe || !elements) {
            // Stripe.js has not yet loaded.
            // Make sure to disable form submission until Stripe.js has loaded.
            return;
        }

        const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: {
                // Make sure to change this to your payment completion page
                return_url: 'http://localhost:3000',
            },
        });
        if (error.type === 'card_error' || error.type === 'validation_error') {
            setMessage(error.message);
        } else {
            setMessage('An unexpected error occurred.');
        }
    };```

#

#

So i guess what youre saying is, I don't necessarily need the block of code in the useEffect?

#

#

all my webhooks are passing with status 200. I think im good to go

uneven rain Sep 23, 2022, 7:15 AM

#

my bad. any payment method will be redirected to return_url after completion according to your code

#

useEffect code block you shared will be triggered on your return_url after customer completes the payment

#

was it trigger before or after the payment completion?

quartz jolt Sep 23, 2022, 7:23 AM

#

Ok i think i fixed the redirect thing to not redirect

#

redirect: 'if_required'

#

Everything making a bit more sense now thanks

uneven rain Sep 23, 2022, 7:32 AM

#

This line will only work if the payment method selected is a non redirect payment method

#Yharoo