Как проводить платежи с помощью 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.