Stripe е платформа за обработка на плащания, която ви позволява да добавите предварително изградена страница за плащане към уебсайт и да приемате и управлявате онлайн плащания. Той е широко популярен поради своята лекота на използване, обширна документация, поддръжка за местни плащания, опции за персонализиране и брандиране, абонаменти, фактуриране и предотвратяване на измами.
С помощта на Stripe можете да приемате плащания от различни източници, включително кредитни и дебитни карти, Apple Pay и Google Pay.
Добавяне на Stripe Checkout към приложение Next.js
Можете да интегрирате плащането на Stripe с приложения, създадени с различни технологии, включително Next.js.
Този урок предполага, че имате настроен сайт за електронна търговия Next.js и предоставя само ръководство за това как да добавите плащане на Stripe към сайта.
Настройване на Stripe акаунт и извличане на API ключове
За да използвате Stripe плащане, трябва да създадете Stripe акаунт и да получите API ключовете. API ключовете се състоят от публикуваем ключ и таен ключ, които ще използвате за удостоверяване на заявки от вашето приложение към Stripe API.
Следвайте тези стъпки, за да настроите акаунт в Stripe:
- Отидете на Уебсайт Stripe и щракнете върху бутона "Регистрация".
- Въведете вашия имейл, пълно име, държава и парола и щракнете върху бутона „Създаване на акаунт“.
- Потвърдете имейла си, като следвате инструкциите в имейла, който Stripe ще ви изпрати.
- На таблото за управление с ивици щракнете върху „Активиране на плащания“ и отговорете на подканящите въпроси, за да завършите процеса на настройка на акаунта. Тези въпроси може да са относно името на бизнеса, адреса и банковата информация. За целите на разработката използвайте тестов режим.
- Копирайте API ключовете от раздела „Разработчици“ в .env файла в папката на вашето приложение.
Вече ще имате достъп до акаунта в Stripe с помощта на ключовете за API.
Инсталиране на пакета Stripe npm
Изпълнете тази команда, за да инсталирате пакета Stripe npm.
npm инсталирайте лента
Импортирайте библиотеката Stripe в страницата на вашия компонент за плащане.
импортиране Ивица от"ивици";
В папката API създайте нов файл, наречен файл checkout-session.js. Инициализирайте обекта Stripe с API ключовете, които сте извлекли от таблото за управление на Stripe.
конст райе = изискват("ивици")(process.env. STRIPE_SECRET_KEY);
Във функцията за обработка вземете елементите за проверка от параметрите на тялото.
износпо подразбиранеасинхроненфункцияманипулатор(req, res) {
конст { елемент } = req.body;
};
Създайте обект на сесия за плащане към функцията за обработка и предайте елементите.
конст сесия = изчакайте stripe.checkout.sessions.create({
тип_метод_на_плащане: ["карта"],
ред_позиции: [
вещ,
],
режим: "плащане",
успех_url: `${req.headers.origin}/?success=true`,
cancel_url: `${req.headers.origin}/?canceled=true`,
});
Ето какво означават възлите, които предавате към обекта на сесията:
- видове_метод_на_плащане: Типовете методи на плащане, които сесията за плащане приема. Разгледайте списъка с налични методи за плащане в Страйп документация.
- line_items: Списък с елементи, които потребителят купува.
- режим: Режимът на Checkout сесията. Ако артикулите за плащане включват поне един повтарящ се артикул, преминават „абонамент“.
- успех_url: URL лентата ще пренасочи потребителите, ако плащането е успешно
- cancel_url: URL лентата ще пренасочи потребителите, ако анулират плащането.
Като цяло файлът checkout-session.js трябва да изглежда така:
износпо подразбиранеасинхроненфункцияманипулатор(req, res) {
ако (необходим метод „ПУБЛИКУВАНЕ“) {
конст { cart } = req.body;опитвам {
конст сесия = изчакайте stripe.checkout.sessions.create({
ред_позиции: [
количка
],
режим: "плащане",
успех_url: `${req.headers.origin}/success`,
cancel_url: `${req.headers.origin}/cancele`,
});
res.redirect(303, session.url);
} улов (грешка) {
res.статус (грешка.статусКод || 500).json (грешка.съобщение);
}
} друго {
res.setHeader('Позволява', „ПУБЛИКУВАНЕ“);
res.status(405).край('Методът не е разрешен');
}
}
Тази функция вече използва try/catch за пренасочване на потребителите, когато възникне грешка по време на плащане. Сега, след като сте създали API маршрута, който ще обработи плащането, следващата стъпка е да създадете компонент за плащане, който да управлява процеса на плащане.
Вижте тази публикация на създаване на API маршрути в Next.js за по-задълбочено обяснение на маршрутите на API на Next.js.
Създаване на Checkout компонент
За да обработите плащането, трябва да инсталирате библиотеката @stripe/stripe-js с помощта на NPM.
npm инсталирайте @stripe/stripe-js
Библиотеката @stripe/stripe-js е помощна програма за зареждане, която ще ви помогне да заредите екземпляра Stripe.js.
След като инсталацията приключи, създайте нов файл във вашата директория /components с име /components/checkout.js. След това извикайте функцията loadstripe от @stripe/stripe-js библиотека, като подадете ключа за публикуване като аргумент.
импортиране {loadStripe} от'@stripe/stripe-js';
конст stripePromise = loadStripe(
process.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);
loadstripe() връща обещание, което се разрешава с новосъздадения обект Stripe, след като Stripe.js се зареди.
След това добавете функция за създаване на сесия за плащане в компонента.
износпо подразбиранефункцияРазгледайте({количка}) {
конст handleCheckout = асинхронен () => {
опитвам {
конст райе = изчакайте stripePromise;конст checkoutSession = изчакайте axios.post("/api/чек-сесия", {
количка,
});конст резултат = изчакайте stripe.redirectToCheckout({
sessionId: checkoutSession.data.id,
});
ако (result.error) {
предупреждение (резултат.грешка.съобщение);
}
} улов (грешка) {
конзола.log (грешка);
}
};
връщане (
</div>
);
}
Тази функция използва Axios за извикване на API сте създали в папката /api, за да извлечете сесията за плащане.
Добавете бутон за плащане в израза за връщане, който ще задейства функцията handleCheckout при щракване.
Можете да извикате компонента за плащане на страницата на количката.
Работа с пренасочванията от Stripe
В маршрута на API за плащане сте дефинирали URL адрес за успех и URL адрес за отказ, чиято ивица трябва да пренасочва потребителя, когато процесът е успешен или неуспешен. URL адресът за отмяна се съпоставя с маршрута /cancel, докато URL адресът за успех се съпоставя с маршрута /success. Добавете два компонента в папката /pages с име success и cancel, за да обработите тези URL адреси.
В pages/success.js добавете компонента успех.
износпо подразбиранефункцияУспех() {
връщане<див>Плащането е успешнодив>;
}
В pages/cancel.js добавете компонента cancel.
износпо подразбиранефункцияОтказ() {
връщане<див>Възникна грешка по време на плащанедив>;
}Сега Stripe ще пренасочи към някоя от тези страници в зависимост от състоянието на касата.
Ако използвате Next.js 13, вижте този урок на как работи папката на приложението в Next.js 13 за превключване от папката /pages.
Допълнителни опции за персонализиране на страницата за плащане
От таблото за управление на Stripe можете да персонализирате страницата за плащане, за да съответства на външния вид на вашата марка. Можете да добавите лого, икона, цвят на марката, цвят на акцента и дори да използвате свой собствен персонализиран домейн. Освен това, когато създавате сесия за плащане, можете да добавите методите на плащане, които предпочитате, и също така да посочите езика, който Stripe трябва да показва на страницата за плащане. Всички тези опции ви позволяват да персонализирате процеса на плащане, за да отговаря на вашето приложение.
Защо да използвате Stripe за страницата за плащане?
Въпреки че можете да изградите своя собствена услуга за обработка на плащане, използването на платежна платформа като Stripe обикновено е по-добър вариант. Stripe checkout ви помага да намалите времето за разработка, което ви позволява да започнете да приемате плащания за кратко време.
Освен това получавате допълнителни функции като съответствие с PCI, възстановяване на количката, възможности за отстъпки и възможност за събиране на информация за доставка и изпращане на фактури след плащане.
