React Django Stripe Button

У меня есть react frontend и Django/DRF backend. Я пытаюсь создать кнопку на фронтенде, которая позволяет пользователям купить продукт через stripe.

Приведенный ниже код react работает нормально для покупки товара. Однако он не регистрирует покупку под конкретным пользователем, то есть вы можете купить товар, но он не связан ни с одним пользователем, потому что у него нет токена (идентифицирующего пользователя, совершающего покупку).

        return (
            <section>
                <div className='product'>
                    <img
                        src='https://i.imgur.com/EHyR2nP.png'
                        alt='The cover of Stubborn Attachments'
                    />
                    <div className='description'>
                        <h3>Stubborn Attachments</h3>
                        <h5>$20.00</h5>
                    </div>
                </div>
                <form
                    action={`${API_URL}/api/stripe/create-checkout-session`}
                    method='POST'
                >
                    <button className='button' type='submit'>
                        Checkout
                    </button>
                </form>
            </section>
        );
    };

Вот что я пробовал:

const Playsub = () => {


    const purchase_item = () => async dispatch => {

        if (localStorage.getItem('access')) {
            const config = {
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `JWT ${localStorage.getItem('access')}`,
                    'Accept': 'application/json'
                }
            }; 
            const body = JSON.stringify({ token: localStorage.getItem('access') });

            const res = await axios.post(`${API_URL}/api/stripe/create-checkout-session`, body, config)
            .then((res) => {
                console.log(res.data)
                })
                .catch(err => {
                console.log(err.response.data)
                });
            }}};

    return (
        <section>
            <form>
                <button onClick={purchase_item}
                className='button' 
                type='submit'>
                    Checkout
                </button>
            </form>
        </section>
    );
};

export default Playsub;

Приведенный выше код при нажатии на созданную кнопку выдает мне Page not found (404) вместо того, чтобы перенаправить меня на https://checkout.stripe.com/pay/cs_test_..., что делал оригинальный код до этого. Не могли бы вы помочь мне в создании кнопки react, которая правильно перенаправляет пользователя на покупку?

Вернуться на верх