How could I get data from input fields when I click the paypal button in this scenary

Question

I'm aware that I'm getting empty data when I click the PayPal button but It gets filled data from input fields when I click a normal button. I need to send the data from input fields to the method to get validation when I click Paypal button. Please, need some help..

I realize that I got a message 422 from my backend that It means that I haven't written something despite I have written and I clicked on the Paypal button.

<div>
        <div className="row">
            <div className="col-md-6">

                <div className="form-group mb-3">

                    <label>

                        First Name
                    </label>
                    <input type="text" name="firstname" onChange={handleInput} defaultValue={checkoutInput.firstname} className="form-control" />
                    <small className="text-danger">{error.firstname} </small>

                </div>
            </div>
            <div className="col-md-6">

                <div className="form-group mb-3">

                    <label>

                        Last Name    </label>
                    <input type="text" name="lastname" onChange={handleInput} value={checkoutInput.lastname} className="form-control" />
                    <small className="text-danger">{error.lastname} </small>

                </div>
            </div>

            <div className="col-md-6">

                <div className="form-group mb-3">

                    <label>

                        Phone Number
                    </label>
                    <input type="text" name="phone" onChange={handleInput} value={checkoutInput.phone} className="form-control" />
                    <small className="text-danger">{error.phone} </small>

                </div>
            </div>

            <div className="col-md-6">

                <div className="form-group mb-3">

                    <label>

                        Email Address
                    </label>
                    <input type="email" name="email" onChange={handleInput} value={checkoutInput.email} className="form-control" />
                    <small className="text-danger">{error.email} </small>

                </div>
            </div>


            <div className="col-md-12">

                <div className="form-group mb-3">

                    <label>

                        Full Address
                    </label>
                    <textarea rows="3" name="address" onChange={handleInput} defaultValue={checkoutInput.address} className="form-control"></textarea>
                    <small className="text-danger">{error.address} </small>


                </div>
            </div>

            <div className="col-md-4">

                <div className="form-group mb-3">

                    <label>

                        City
                    </label>
                    <input type="text" name="city" onChange={handleInput} value={checkoutInput.city} className="form-control" />
                    <small className="text-danger">{error.city} </small>


                </div>
            </div>


            <div className="col-md-4">

                <div className="form-group mb-3">

                    <label>

                        State
                    </label>
                    <input type="text" name="state" onChange={handleInput} value={checkoutInput.state} className="form-control" />
                    <small className="text-danger">{error.state} </small>

                </div>
            </div>
            <div className="col-md-4">

                <div className="form-group mb-3">

                    <label>

                        Zip code
                    </label>
                    <input type="text" name="zipcode" onChange={handleInput} value={checkoutInput.zipcode} className="form-control" />
                    <small className="text-danger">{error.zipcode} </small>

                </div>

            </div>


            <div className="col-md-12">

                <div className="form-group text-end">

                    <button type="button" onClick={(e) => submitOrder( 'cod')} className="btn btn-primary">Place Order</button>
                    <button type="button" onClick={(e) => submitOrder( 'razorpay')} className="btn btn-primary">Place Order</button>
                    <button type="button" onClick={(e) => submitOrder( 'payonline')} className="btn btn-primary">paypal</button>
                    <PayPalScriptProvider   options={{ "client-id": "AWMf_5zpQPNAay2g4mLmFFldXbXycJKilI1utjKf2xxaswqedgszaxx12" }}>
                        <PayPalButtons style={{ layout: "horizontal" }}
                        
                            onClick={(data, actions) => {
                                console.log(data);
                                submitOrder('payonline');
                                const newJudge1={newJudge };
                                //alert(JSON.stringify(newJudge1))

                                if(newJudge1){
                                    //console.log({newJudge})
                                    return actions.reject();
                                }else{
                                    return actions.resolve();
                                }
                            }}


                            createOrder={(data, actions) => {
                                
                                    return actions.order.create({

                                        purchase_units: [{
                                            amount: {
                                              value: '0.01'
                                            }
                                          }]

                                    });
                                
                            }}

                            

                        />
                    </PayPalScriptProvider>
                </div>

            </div>
        </div>

 const [loading, setLoading] = useState(true);
    const navigate = useNavigate();
    const [cart, setCart] = useState([]);
    const [newJudge, setNewJudge] = useState(true);


    const [checkoutInput, setCheckoutInput] = useState(
        {
            firstname: '',
            lastname: '',
            phone: '',
            email: '',
            address: '',
            city: '',
            state: '',
            zipcode: '',
        });
    const [error, setError] = useState([]);



    const handleInput = (e) => {
        console.log(e);
        e.persist();
        setCheckoutInput({ ...checkoutInput, [e.target.name]: e.target.value })
    }

    const submitOrder = (payment_mode) => {
        // e.preventDefault();
        //e.persist();
        //console.log(e);
        const data = {

            firstname: checkoutInput.firstname,
            lastname: checkoutInput.lastname,
            phone: checkoutInput.phone,
            email: checkoutInput.email,
            address: checkoutInput.address,
            city: checkoutInput.city,
            state: checkoutInput.state,
            zipcode: checkoutInput.zipcode,
            payment_mode: payment_mode,
            payment_id: ''
        }
        
        
        
              switch (payment_mode) {
            case 'cod':
                console.log(data);
                break;
           
            case 'payonline':
              


                axios.post('/api/place-order', data).then(res => {
                    console.log(data);

                    if (res.data.status === 200) {
                        setNewJudge(false);
                        console.log(false);

                        setError([]);
                    } else if (res.data.status === 422) {
                        swal("All fields are mandatory", "", "error");

                        setNewJudge(true);
                        console.log(newJudge);

                        setError(res.data.errors);

                    }
                });
                break;
            default:
                break;
        }

Answer 1

Gathering form information and a successful payment at the same time is tricky. One of the events has to happen first, and you need to handle the possibility of that event completing without the other completing.

Using a server, one of the best methods is to serialize and send all the form information in a JSON body as part of the fetch call to capture the payment. This extends the server demo pattern of https://developer.paypal.com/demo/checkout/#/pattern/server , which requires you to create two routes that in turn call the PayPal API.

If you instead do client-side creates or captures (using the JS SDK actions.order.create / actions.order.capture) , and/or if you rely on the client to do a form post after a successful capture (in onApprove), your integration will be inferior and prone to problems of desired serial operations not completing together since they rely on the client browser.