Не удается настроить метод оплаты stripe

Я пытаюсь закончить функцию оплаты в моем приложении, впервые пытаюсь сделать это, следуя руководству Брайана Данна. Я добавил SITE_URL как он сделал, но я не знаю, нужно ли мне это, так как я добавил прокси в мой package.json и использую axios для api вызовов, я могу использовать axios вместо этого в этом случае? И когда я нажимаю на кнопку "Proceed to checkout", url не работает, я попробовал изменить его на form.control, он перенаправляется на url, но форма stripe prebuilt и продукт тоже не отображаются.

Урлы:

urlpatterns = [
    path('', views.getRoutes, name="get-routes"),
    path('users/register/', views.registerUser, name="register"),
    path('users/login/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
    path('products/', views.getProducts, name="get-products"),
    path('products/<str:pk>', views.getProduct, name="get-product"),
    path('user/profile/', views.getUserProfile, name="get-user-profile"),
    path('users/', views.getUsers, name="get-users"),
    path('search/', ProductFilter.as_view(), name="search-product"),
    path('create-checkout-session/', StripeCheckoutView.as_view()),
]

Просмотров:

class StripeCheckoutView(APIView):
    def post(self, request):
        try:
            checkout_session = stripe.checkout.Session.create(
                line_items=[
                    {
                        'currency': 'usd',
                        'price': 'price_1MAtSLJU3RVFqD4TnNYWOxPO',
                        'quantity': 1,
                    },
                ],
                payment_method_types=['card'],
                mode='payment',
                success_url=settings.SITE_URL +
                '/?success=true&session_id={CHECKOUT_SESSION_ID}',
                cancel_url=settings.SITE_URL + '/' + '?canceled=true',
            )
            return redirect(checkout_session.url)
        except:
            return Response(
                {'error': 'Something went wrong when creating stripe checkout session'},
                status=status.HTTP_500_INTERNAL_SERVER_ERROR
            )

cartScreen.js:

config.js:

import { useMemo } from "react";
import { useLocation } from "react-router";

export const API_URL = "http://localhost:8000";

export const useQuery = () => {
  const { search } = useLocation();

  return useMemo(() => new URLSearchParams(search), [search]);
};

app.js:

настройки:

package.json: