Как проводить платежи с помощью stripe в приложении на django и react?

Итак, я собираюсь создать сайт электронной коммерции, где цена будет зависеть от того, сколько дней человек проживает в лодке с жильем.

Я планирую использовать функцию выбора даты и времени в Material UI. Поэтому я хочу иметь возможность:

 1) get the difference of the check in and check out dates in the front-end
 2) then compute the total cost in the frontend
 3) then make stripe (django backend) know about this total cost and charge accordingly

Мне нужна помощь с (3). Как мне отправить цену в бэкенд и чтобы stripe знал об этой цене? Или как я могу изменить количество с фронтенда?

Например, вот некоторый код:

Django Backend:

import django.conf import settings
from rest_framework.views import APIView
import stripe
from django.shortcuts import redirect

# This is your test secret API key.
stripe.api_key = settings.STRIPE_SECRET_KEY


class StripeCheckOutView(APIView):
    def post(self, request):
        try:
            checkout_session = stripe.checkout.Session.create(
                line_items=[
                    {
                        # Provide the exact Price ID  of the product you want to sell
                        'price': '{{PRICE_ID}}',
                        'quantity': 1,
                        },
                         ],
                         mode='payment',
                         success_url=YOUR_DOMAIN + '?success=true',
                         cancel_url=YOUR_DOMAIN + '?canceled=true',
                         )
                         
            return redirect(checkout_session.url)
        except: 
            return

React Frontend:

import "./App.css";

const ProductDisplay = () => (
  <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="/create-checkout-session" method="POST">
      <button type="submit">
        Checkout
      </button>
    </form>
  </section>
);

const Message = ({ message }) => (
  <section>
    <p>{message}</p>
  </section>
);

export default function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    // Check to see if this is a redirect back from Checkout
    const query = new URLSearchParams(window.location.search);

    if (query.get("success")) {
      setMessage("Order placed! You will receive an email confirmation.");
    }

    if (query.get("canceled")) {
      setMessage(
        "Order canceled -- continue to shop around and checkout when you're ready."
      );
    }
  }, []);

  return message ? (
    <Message message={message} />
  ) : (
    <ProductDisplay />
  );
}

Существует несколько способов справиться с этим. Вы можете настроить свой аккаунт в Stripe так, чтобы цена представляла собой стоимость одного дня пребывания лодки в доме. В этом случае вы просто передадите количество дней обратно на сервер. Вот пример того, как это может выглядеть:

class StripeCheckOutView(APIView):
    def post(self, request):
        try:
            checkout_session = stripe.checkout.Session.create(
                line_items=[
                    {
                        # Provide the exact Price ID  of the product you want to sell
                        'price': '{{PRICE_ID}}',
                        'quantity': request.POST['num_days'], # <- from front-end 
                        },
                         ],
                         mode='payment',
                         success_url=YOUR_DOMAIN + '?success=true',
                         cancel_url=YOUR_DOMAIN + '?canceled=true',
                         )
                         
            return redirect(checkout_session.url)
        except Exception as e: # <- even really basic, you want to catch Exceptions
            print(e)


Если вы действительно хотите использовать динамическую цену, вы можете вместо этого указать атрибут price_data следующим образом:

class StripeCheckOutView(APIView):
    def post(self, request):
        try:
            checkout_session = stripe.checkout.Session.create(
                line_items=[
                    {
                        # Provide the exact Price ID  of the product you want to sell
                        'price_data': {
                              'currency': 'usd',
                              'unit_amount': request.POST['price'],
                               'product_data': {'name': "Product"}, 
                              'quantity': 1
                           }
                        },
                         ],
                         mode='payment',
                         success_url=YOUR_DOMAIN + '?success=true',
                         cancel_url=YOUR_DOMAIN + '?canceled=true',
                         )
                         
            return redirect(checkout_session.url)
        except: 
            return

Чтобы получить эту информацию на вашем сервере, вам просто нужно включить эту информацию в ваш POST запрос, либо включив некоторые <input> поля в ваш <form> элемент, либо добавив в POST запрос в вашем JavaScript.

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