#Meet M

1 messages · Page 1 of 1 (latest)

hidden waspBOT
verbal narwhal
#

Hi there, did you wrap the <PaymentElement /> inside a <Elements /> ?

wary plaza
#

yes

verbal narwhal
#

Can you share with me the code?

wary plaza
#

{clientSecretKey &&
<Elements stripe={stripePromise} options={options}>
<CheckoutForm />
</Elements>
}

#

========
<form onSubmit={handleSubmit}>
<PaymentElement />
<button disabled={!stripe}>Submit</button>
</form>

verbal narwhal
#

And where do you call useStripe() ?

wary plaza
verbal narwhal
#

Send me the full source code that you wrote

wary plaza
#

first file
===>>>
import React, { useEffect, useState } from 'react'
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import CheckoutForm from "./card";
import Api from '../../../Api/Api';
import { useSelector } from 'react-redux';
import toast from 'react-hot-toast';
import { backEndMessages } from '../../../Helper/common';
import PaymentStatus from './PaymentStatus';

const AddCard = () => {
const stripePromise = loadStripe("pk_test_51LSzgjSDKDxgNBOJZtpLsjyqWi1dTz2s91mlb7cEMfuPrtLOD37xsVuQFkEccJs2NZk7l7sTQBv3fMmvvNHpNGHA00kv2PqH6X");
//state
const [clientSecretKey, setclientSecretkey] = useState("")
const token = useSelector((state) => state.AuthReducer.Auth.auth_token);

useEffect(() => {
    getPaymentIntent()
}, [])

const getPaymentIntent = async () => {
    const response = await Api("POST", "kioskSubscription/create/setupIntent", token);
    if (response.data.status) {
        setclientSecretkey(response.data.data.client_secret)
    } else {
        toast.error(backEndMessages(response.data.message));
    }
}

const options = {
    clientSecret: clientSecretKey,
};

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

};

export default AddCard

#

====>>>>>
//second file
import React, { useEffect, useState } from 'react';
import { useStripe, useElements, PaymentElement } from '@stripe/react-stripe-js';
import "./card.css"
import toast from 'react-hot-toast';

const SetupForm = () => {

const stripe = useStripe();
const elements = useElements();


const handleSubmit = async (event) => {
    event.preventDefault();

    if (!stripe || !elements) {
        return;
    }

    const result = await stripe.confirmSetup({
        elements,
        confirmParams: {
            return_url: "http://localhost:3000/#/paymentcard",
        },
    });
    if (result.error) {
        if (result.error.code == "card_declined") {
            toast.error("Your card was declined")
        } else {
            toast.error(result.error.message)
        }
    } else {
        console.log("authenticate for the first time ");
    }
};
return (
    <form onSubmit={handleSubmit}>
        <PaymentElement />
        <button disabled={!stripe}>Submit</button>
    </form>
);

};

export default SetupForm;

verbal narwhal
#

I don't see this SetupForm wrapped inside Elements directly

wary plaza
#

CheckoutForm is a SetupForm

#

I just rename the file

verbal narwhal
#

I don't understand, you export a SetupForm, how do you manage to import it as a CheckoutForm ?

wary plaza
#

import CheckoutForm from "./card";

#

in card.js
export default SetupForm;

verbal narwhal
#

Hmm. OK, it shall work but I don't see the need of changing the name

#

Can you do a search in your code and see if there's any other places calls useStripe()?

wary plaza
#

just one in card.js

verbal narwhal
#

This error could be caused by something beyond these two files, share with me the whole project

wary plaza
verbal narwhal
#

The complete source code of PaymentStatus is already provided in the doc

#

I can't help you unless you provide me the relevant source code