[Python 3.X] Problème pour l'intégration de Stripe Checkout

Bonjour,

j'essaye de créer une interface simple proposant un produit avec un bouton permettant de l'acheter.
Quand je clic sur le bouton j'arrive sur une page blanche contenant :

Code:

{"id": "<Mon ID de Checkout Session>"}

au lieu d'être rediriger sur une page stripe pour faire l'achat.

J'ai essayé de poser un point d'arrêt sur le début du script et de faire du pas à pas et miracle, la 1ère fois j'ai été rediriger vers la page Stripe pour le checkout. J'ai réessayer à plusieurs reprises avec le pas à pas activé et il semble que j'arrive aléatoirement soit sur la page blanche contenant mon Id de session soit sur la page Stripe pour le checkout et je ne comprends pas pourquoi.

Voici le code de mon gabarit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<!DOCTYPE html>
<html>
  <head>
    <title>Buy cool new product</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <section>
      <div class="product">
<!--        <img src="https://i.imgur.com/EHyR2nP.png" alt="The cover of Stubborn Attachments" />-->
        <div class="description">
          <h3>{{ product.name }}</h3>
          <h5>{{ product.price }} XPF</h5>
        </div>
      </div>
      <form action="/create-checkout-session/" method="POST">
        {% csrf_token %}
        <button type="submit" id="checkout-button">Checkout</button>
      </form>
    </section>
  </body>
  <script type="text/javascript">
    // Store csrf token
    const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
 
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe("{{ STRIPE_PUBLIC_KEY }}");
    var checkoutButton = document.getElementById("checkout-button");
 
    checkoutButton.addEventListener("click", function () {
      fetch("{% url 'create-checkout-session' product.id %}", {
        method: "POST",
        headers: {
          'X-CSRFToken': csrftoken
        }
      })
        .then(function (response) {
          return response.json();
        })
        .then(function (session) {
          return stripe.redirectToCheckout({ sessionId: session.id });
        })
        .then(function (result) {
          // If redirectToCheckout fails due to a browser or network
          // error, you should display the localized error message to your
          // customer using error.message.
          if (result.error) {
            alert(result.error.message);
          }
        })
        .catch(function (error) {
          console.error("Error:", error);
        })
    });
  </script>
</html>

views.py :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
class CreateCheckoutSessionView(View):
    def post(self, request, *args, **kwargs):
        # product_id = self.kwargs["pk"]
        # product = Product.objects.get(id=product_id)
        # print(product)
        YOUR_DOMAIN = "http://127.0.0.1:8000"
        checkout_session = stripe.checkout.Session.create(
            payment_method_types=['card'],
            line_items=[
                {
                    # Provide the exact Price ID (for example, pr_1234) of the product you want to sell
                    'price_data': {
                        'currency': 'xpf',
                        'unit_amount': 1000,
                        'product_data': {
                            'name': 'Test Product',
                        },
                    },
                    'quantity': 1,
                },
            ],
            mode='payment',
            success_url=YOUR_DOMAIN + '/success/',
            cancel_url=YOUR_DOMAIN + '/cancel/',
        )
        return JsonResponse({
            'id': checkout_session.id
        })

urls.py

Code:

1
2
3
4
5
6
7
8
urlpatterns = [
    path('admin/', admin.site.urls),
    path('cancel/', CancelView.as_view(), name='cancel'),
    path('success/', SuccessView.as_view(), name='success'),
    path('', ProductLandingPageView.as_view(), name='landing-page'),
    path('create-checkout-session/', CreateCheckoutSessionView.as_view(), name='create-checkout-session'),
    path('create-checkout-session/<pk>/', CreateCheckoutSessionView.as_view(), name='create-checkout-session'),
]

J'utilise Python 3.11.1, Django 4.1.7 et Stripe 5.2 et je visualise mon site avec 2 navigateurs : Chrome et Brave (j'ai le même résultat aléatoire avec les deux)

Merci d'avance.