Stripe — это платформа для обработки платежей, которая позволяет добавить на веб-сайт предварительно созданную страницу оформления заказа, а также принимать и управлять онлайн-платежами. Он широко популярен благодаря простоте использования, обширной документации, поддержке локальных платежей, возможностям настройки и брендинга, подпискам, выставлению счетов и предотвращению мошенничества.
Используя Stripe, вы можете принимать платежи из различных источников, включая кредитные и дебетовые карты, Apple Pay и Google Pay.
Добавление Stripe Checkout в приложение Next.js
Вы можете интегрировать Stripe Checkout с приложениями, созданными с использованием различных технологий, включая Next.js.
В этом руководстве предполагается, что у вас есть настроенный сайт электронной коммерции Next.js, и предоставляется только руководство о том, как добавить Stripe Checkout на сайт.
Настройка учетной записи Stripe и получение ключей API
Чтобы использовать Stripe checkout, вам необходимо создать учетную запись Stripe и получить ключи API. Ключи API состоят из публикуемого ключа и секретного ключа, который вы будете использовать для аутентификации запросов от вашего приложения к API Stripe.
Выполните следующие действия, чтобы настроить учетную запись 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.body;
};
Создайте объект сеанса оформления заказа в функцию обработчика и передайте элементы.
константа сеанс = Ждите stripe.checkout.sessions.create({
платежные_методы_типы: ['карта'],
позиции: [
элемент,
],
режим: 'оплата',
успех_url: `${req.headers.origin}/?success=true`,
отмена_url: `${req.headers.origin}/?canceled=true`,
});
Вот что означают узлы, которые вы передаете объекту сеанса:
- payment_method_types: Типы способов оплаты, которые принимает сеанс оформления заказа. Просмотрите список доступных способов оплаты в Страйп-документация.
- позиции: список товаров, которые покупает пользователь.
- режим: режим сеанса оформления заказа. Если элементы оформления заказа включают хотя бы один повторяющийся элемент, пройдите «подписку».
- Success_url: полоса URL будет перенаправлять пользователей в случае успешной оплаты.
- cancel_url: Полоса URL перенаправит пользователей, если они отменят платеж.
В целом файл checkout-session.js должен выглядеть так:
экспортпо умолчаниюасинхронныйфункцияобработчик(запрос, разрешение) {
если (треб.метод 'ПОЧТА') {
константа {корзина} = req.body;пытаться {
константа сеанс = Ждите stripe.checkout.sessions.create({
позиции: [
тележка
],
режим: 'оплата',
успех_url: `${req.headers.origin}/success`,
отмена_url: `${req.headers.origin}/cancele`,
});
res.redirect(303, сессия.url);
} ловить (ошибка) {
res.status (err.statusCode || 500).json (сообщение об ошибке);
}
} еще {
res.setHeader('Позволять', 'ПОЧТА');
рез.статус(405).конец('Метод не разрешен');
}
}
Эта функция теперь использует try/catch для перенаправления пользователей при возникновении ошибки во время оформления заказа. Теперь, когда вы создали маршрут API, который будет обрабатывать платеж, следующим шагом будет создание компонента оформления заказа для обработки процесса оформления заказа.
Посмотрите этот пост на создание маршрутов API в Next.js для более подробного объяснения маршрутов API Next.js.
Создание компонента проверки
Для оформления заказа вам необходимо установить библиотеку @stripe/stripe-js с помощью NPM.
npm установить @stripe/stripe-js
Библиотека @stripe/stripe-js — это утилита загрузки, которая поможет вам загрузить экземпляр Stripe.js.
После завершения установки создайте в каталоге /components новый файл с именем /components/checkout.js. Затем вызовите функцию loadstripe из библиотеки @stripe/stripe-js, передав публикуемый ключ в качестве аргумента.
Импортировать { loadStripe } от'@полоса/полоса-js';
константа stripePromise = loadStripe(
процесс.env. NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
);
loadstripe() возвращает обещание, которое разрешается с помощью вновь созданного объекта Stripe после загрузки Stripe.js.
Затем добавьте функцию для создания сеанса оформления заказа в компоненте.
экспортпо умолчаниюфункцияПроверить({корзина}) {
константа ручкаПроверка = асинхронный () => {
пытаться {
константа полоса = Ждите полосаОбещание;константа checkoutSession = Ждите аксиос.пост("/API/кассовый сеанс", {
тележка,
});константа результат = Ждите stripe.redirectToCheckout({
sessionId: checkoutSession.data.id,
});
если (результат.ошибка) {
оповещение (результат.ошибка.сообщение);
}
} ловить (ошибка) {
консоль.лог (ошибка);
}
};
возвращаться (
</div>
);
}
Эта функция использует Axios для вызова API вы создали в папке /api для получения сеанса проверки.
Добавьте кнопку оформления заказа в оператор return, которая будет запускать функцию handleCheckout при нажатии.
Вы можете вызвать компонент оформления заказа на странице корзины.
Обработка редиректов от Stripe
В маршруте API проверки вы определили URL-адрес успеха и URL-адрес отмены, по которым полоса должна перенаправлять пользователя в случае успешного или неудачного процесса. URL-адрес отмены сопоставляется с маршрутом /cancel, а URL-адрес успеха сопоставляется с маршрутом /success. Добавьте два компонента в папку /pages с именем Success и Cancel для обработки этих URL-адресов.
В pages/success.js добавьте компонент успеха.
экспортпо умолчаниюфункцияУспех() {
возвращаться<див>Оформить заказ успешнодив>;
}
В pages/cancel.js добавьте компонент отмены.
экспортпо умолчаниюфункцияОтмена() {
возвращаться<див>Произошла ошибка при оплатедив>;
}Теперь Stripe будет перенаправлять на любую из этих страниц в зависимости от статуса оформления заказа.
Если вы используете Next.js 13, см. этот учебник на как работает папка приложения в Next.js 13 для перехода из папки /pages.
Дополнительные параметры настройки страницы оформления заказа
На панели инструментов Stripe вы можете настроить страницу оформления заказа, чтобы она соответствовала внешнему виду вашего бренда. Вы можете добавить логотип, значок, фирменный цвет, акцентный цвет и даже использовать собственный домен. Кроме того, при создании сеанса оформления заказа вы можете добавить предпочтительные способы оплаты, а также указать язык, который Stripe должен отображать на странице оформления заказа. Все эти параметры позволяют настроить процесс оформления заказа в соответствии с вашим приложением.
Зачем использовать Stripe для страницы оформления заказа?
Хотя вы можете создать свою собственную службу обработки заказов, использование платежной платформы, такой как Stripe, обычно является лучшим вариантом. Stripe Checkout помогает сократить время разработки, позволяя начать принимать платежи в кратчайшие сроки.
Кроме того, вы получаете дополнительные функции, такие как соответствие PCI, восстановление корзины, возможности скидок и возможность собирать информацию о доставке и отправлять счета-фактуры после оплаты.
