Используйте Stripe в качестве платежного шлюза для вашего следующего проекта
Что нам понадобится
- Аккаунт в Stripe.
- Сервер Node.js для интеграции Stripe. Следующие шаги проведут вас через эту часть.
Настройка экспресс-сервера
- Запустите
npm init, чтобы создать файл package.json для вашего проекта. - Запустите
npm i stripe express dotenv, чтобы установить Stripe, Express и dotenv. - Создайте файл с именем
server.jsи включите в него следующий код:
// Load environment variables from the .env file
require("dotenv").config()
// Setup express
const express = require("express")
const app = express()
app.use(express.json())
// Setup Stripe
const stripe = require("stripe")(process.env.STRIPE_PRIVATE_KEY)
// This is the list of items we are selling
const storeItems = new Map([
[1, { priceInCents: 10000, name: "JavaScript Tutorial" }],
[2, { priceInCents: 15000, name: "Ultimate CSS tutorial" }],
])
// Start up our server on port 3000
app.listen(3000)Подключение внешнего интерфейса
Прежде чем идти дальше, нам нужно подключить наш интерфейс к серверу. Вы можете использовать любые библиотеки, такие как request, Axios или fetch API. Здесь мы будем использовать выборку:
//we are posting a request using POST to checkout page
fetch("/checkout", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
// Send along all the information about the items
body: JSON.stringify({
items: [
{
id: 1,
quantity: 5,
},
{
id: 2,
quantity: 2,
},
],
}),
})
.then(res => {
if (res.ok) return res.json()
// If there is an error then make sure we catch that
return res.json().then(e => console.error(err))
})
.then(({ url }) => {
// On success redirect the customer to the returned URL
window.location = url
})
.catch(e => {
console.error(e.error)
})
Здесь мы отправляем POST-запрос на наш сервер, говоря, что нам нужно столько-то вещей. Затем наш сервер отправляет ответ. В случае успеха он перенаправит нас на страницу продавца, в противном случае мы обработаем ошибку.
Ключевые вещи, которые нужно помнить
- Если ваш клиент и сервер находятся в разных доменах, вам нужно указать точный путь, иначе он вернет ошибку:
//instead of /checkout you need to show https://yourawesomedomain.com/checkout
2. Никогда не отправляйте информацию о цене, потому что мы можем изменить цену во внешнем интерфейсе и отправить нашу цену. Чтобы избавиться от этого, вы можете использовать любые другие значения, такие как id или name.
Построение моста от сервера к клиенту
Прямо сейчас мы можем вызвать URL-адрес /checkout, теперь нам нужно обработать его на сервере Node.js.
// Create a post request for /create-checkout-session
app.post("/checkout", async (req, res) => {
try {
// Create a checkout session with Stripe
const session = await stripe.checkout.sessions.create({
payment_method_types: ["card"],
// For each item use the id to get it's details
// Take that information and convert it to Stripe's format
line_items: req.body.items.map(({ id, quantity }) => {
const storeItem = storeItems.get(id)
return {
price_data: {
currency: "usd",
product_data: {
name: storeItem.name,
},
unit_amount: storeItem.priceInCents,
},
quantity: quantity,
}
}),
mode: "payment",
// Set a success and cancel URL we will send customers to
// They are complete urls
success_url: `${process.env.CLIENT_URL}/success.html`,
cancel_url: `${process.env.CLIENT_URL}/cancel.html`,
})
res.json({ url: session.url })
} catch (e) {
// If there is an error send it to the client
res.status(500).json({ error: e.message })
}
})У нас есть конечная точка, которая получает всю информацию об элементе от нашего клиента.
Эта информация представлена в виде объекта JSON с ключом items, который содержит массив элементов с id и quantity.
Во-первых, мы вызываем tripe.checkout.sessions.create, который принимает один объект, содержащий всю информацию для оформления заказа:
payment_method_types: Это означает, что все принятые методы, такие как дебетовая / кредитная карта, интернет-банкинг и т. д.mode: Это больше похоже на ежемесячный/ежегодный/разовый платеж.success_url: URL после успешной оплаты.cancel_url: URL после неудачного платежаline_items: это массив товаров, которые покупатель покупает.
price_data: Это объект, который содержит информацию о продукте, такую как название и цена. Важно отметить, что все цены в Stripe определяются в центах, поэтому предмет стоимостью 1 доллар будет иметьunit_amountиз 100.quantity: это количество товаров, которое клиент хочет купить.
Последний шаг
Нам нужно получить ключ API, чтобы подключить страйп из нашего бэкенда. вам просто нужно зайти на панель инструментов своей учетной записи Stripe в разделе Разработчики на боковой панели и нажать Ключи API.
Это все, что вам нужно для успешной настройки платежного шлюза для вашего веб-приложения.
Имея дело с полосой, я бы порекомендовал вам всегда резервировать вкладку для официальной документации по полосам, поэтому, когда вы застряли, вы можете просто заглянуть в нее, и поверьте мне, у них есть хорошие и чистые документы.
Заключение
И вот оно. Мы подключили платежный шлюз к нашему приложению Node.js. Я надеюсь, что вы нашли это полезным. Если это так, обязательно поставьте лайк и дайте мне знать в комментариях.
Создавайте компонуемые интерфейс и серверную часть
Не создавайте веб-монолиты. Используйте Bit для создания и компоновки несвязанных программных компонентов — в ваших любимых фреймворках, таких как React или Node. Создавайте масштабируемые и модульные приложения с мощными и приятными возможностями разработки.
Перенесите свою команду в Bit Cloud, чтобы совместно размещать и совместно работать над компонентами, а также значительно ускорить, масштабировать и стандартизировать разработку в команде. Начните с компонуемых интерфейсов, таких как Design System или Micro Frontends, или исследуйте компонуемый сервер. Попробуйте →
