Next.js @paypal/react-paypal-js "Can not pay order for unauthorized order"

Question

1. I can't find where to use my PAYPAL_CLIENT_SECRET
2. when onApprove() --> actions.order.capture() --> it responds with: "Can not pay order for unauthorized order"

it opens the PayPal popup and payer can login successfully it shows the passed amount to pay correctly but once a payer clicks "Complete Purchase" it causes 422 error "UNPROCESSABLE_ENTITY" --> {issue: "COMPLIANCE_VIOLATION"}

    const initialOptions = {
        clientId: settings.env.paypalClientId,
        currency: "USD",
        intent: "capture",
    }


    return (
        <PayPalScriptProvider options={initialOptions}>
            <PayPalButtons
                // style={{ layout: "horizontal" }}

                createOrder={(data, actions) => {
                    console.log({ orderDara: data })
                    return actions.order.create(
                        {
                            purchase_units: [
                                {
                                    amount: {
                                        value: totalAmount,
                                    },
                                },
                            ],
                            application_context: {
                                shipping_preference: 'NO_SHIPPING',
                            },
                        }
                    )
                }}

                onApprove={async (data, actions) => {
                    console.log({ data })

                    const isCaptured = actions.order.capture()
                    console.log({ isCaptured, name: isCaptured?.payer?.name?.given_name })

                    return isCaptured.then((details) => {
                        console.log({details})
                        const name = details.payer.name.given_name;
                        toast.success(`Transaction completed by ${name}`);
                    });
                }}

                onCancel={() => {
                    toast.error('Cancel');
                }}
                onError={(error) => {
                    console.log({ error })
                    toast.error('Error: --' + error);
                }}
            />
        </PayPalScriptProvider>
    )

Answer 1

1. You already asked the first part of your question, and the answer is to integrate with a backend, which itself will not be react code. Do not use actions.order.create nor actions.order.capture, they are deprecated for new integrations.

2. The COMPLIANCE_VIOLATION is likely because of the country of the receiver account. See this answer for some details; for sandbox mode the simplest solution is to create a new sandbox business account of a different country for testing, and change your credentials to use an app created for it.