В этом руководстве мы узнаем, как интегрировать платежный шлюз в VueJs с помощью Stripe в нашем демонстрационном приложении для электронной коммерции.
Введение
Мы создаем приложение для электронной коммерции с нуля, используя Vue.js во внешнем интерфейсе и Java со Springboot для внутреннего интерфейса. Вы можете ознакомиться с первым учебным пособием этой серии по интерфейсу здесь.
Давайте создадим интерфейс для нашего приложения электронной коммерции с помощью Vue.js
Мы создаем полное приложение электронной коммерции с нуля. Сегодня мы собираемся добавить функцию «Товары. javascript.plainenglish.io »
Платежный шлюз - важная функция для приложения электронной коммерции. В предыдущем руководстве мы интегрировали платежный шлюз с помощью Spring Boot и Stripe. Теперь мы создадим его внешнюю часть, такую как прием товаров в тележке и данных карты.
Если вы хотите обратиться к серверной части платежного шлюза, используйте ссылку ниже.
Живая демонстрация
Https://infallible-swartz-b50174.netlify.app/
Вы можете найти полный код на Github.
Предварительные условия
- Знание Vuejs
- Visual Studio Code - с открытым исходным кодом (рекомендуется)
- Хороший браузер - (рекомендуется Chrome).
API, который мы будем использовать
getCartItems:
Это метод получения, и мы будем использовать его для хранения элементов корзины в массиве, чтобы мы могли передать его в качестве тела запроса нашему внутреннему API с помощью Axios.
checkoutList:
Это метод отправки, которому в качестве тела ответа мы передаем массив элементов корзины. Этот метод отвечает за создание идентификатора сеанса.
разместить заказ:
Это почтовый метод, и в случае успешной оплаты мы будем использовать его для добавления заказа в таблицу заказов в нашей базе данных. Итак, в качестве параметров метода публикации Axios мы передадим токен вошедшего в систему пользователя и сгенерированный идентификатор сеанса.
Структура проекта
Полоса
Stripe - один из лучших способов обработки платежей в Интернете, и недавно они выпустили Stripe Elements. Stripe Elements - это их предварительно созданная библиотека компонентов пользовательского интерфейса, которые помогут вам легко создавать свои собственные потоки оформления заказа. Теперь это упрощает, как никогда, настройку пользовательской формы оплаты для вашего приложения.
В этом уроке мы будем использовать Stripe.js для создания платежного шлюза.
В первую очередь, нам нужен собственный API-ключ Stripe test. Так что продолжайте и создайте учетную запись на полосе, а затем из панели управления получите ключ API для целей тестирования. Сохраните этот ключ в переменной среды. Сделать это:
Создайте файл в исходном каталоге с расширением .env
В этом файле создайте переменную, в которой будет храниться ключ API.
Назовите переменную VUE_APP_VARIABLENAME=YOURAPIKEY.
Ход учебника
Объявление необходимых переменных данных
Установка нашивки
Инициализация и настройка элемента Stripe
Реализовать метод получения товаров из корзины
Реализовать передачу элементов корзины в метод backend API и получение идентификатора сеанса в качестве ответа.
Навигация пользователя к успешному или неудачному платежному компоненту в соответствии со статусом платежа Stripe
А теперь давайте код
Создайте папку с именем Checkout и в этой папке создайте файл vue с именем Checkout, который будет содержать логику внешнего интерфейса для платежного шлюза.
1. создание переменных данных
stripeAPIToken: хранит ключ API
stripe: элемент полосы
Stripe Element - это набор компонентов с множеством элементов, которые вы можете использовать для создания форм оформления заказа, таких как кнопки и входы для сбора информации от пользователя. Мы сосредоточимся на карточном элементе. Элемент карты позволяет собирать информацию о карте в одном элементе. Он включает в себя динамически обновляемый значок бренда карты, а также поля для ввода электронной почты, срока действия, CVV, названия страны, имени держателя карты.
token: хранит токен пользователя
sessionId: сохраняет сгенерированный идентификатор сеанса полосой
checkoutBodyArray: тело ответа, которое мы отправим нашему внутреннему API
2. Установка Stripe
Элемент Stripe является частью Stripe.js, поэтому нам нужно включить скрипт с помощью includeStripe method (который мы реализуем далее), которому мы передаем URL-адрес источника скрипта, и поскольку includeStripe является функцией обратного вызова, мы вызываем configureStripe method, который мы реализуем заранее. Итак, когда мы назовем этот includeStripe метод? Когда компонент визуализируется в это время, мы инициализируем этот метод.
т.е. в mounted method мы вызываем эту функцию.
Мы связываем это, чтобы у нас был доступ к методам локального компонента внутри обратного вызова, и мы вызываем configureStripe после того, как все было загружено. Мы еще не реализовали это, но это дальше! Это наш метод обратного вызова, который настроит Stripe локально внутри компонента.
Кроме того, эта checkout страница будет отображаться, когда пользователь нажимает кнопку подтверждения заказа на странице корзины. Если хотите взглянуть, то можете обратиться к этому. Поэтому, когда пользователь нажимает кнопку подтверждения порядка, мы вызываем метод checkout в cart component, в котором мы перемещаем пользователя к Checkout component, используя метод маршрутизатора. И этому методу маршрутизатора мы передаем params id как размер корзины (количество товаров в корзине).
checkout(){
this.$router.push({ name: ‘Checkout’,params:{id:this.len}})
}
//from the Cart.vue
Теперь почему мы передаем идентификатор параметров?
Мы передаем идентификатор, чтобы проверить, вызывается ли checkout page тогда и только тогда, когда пользователь нажимает confirm order button. Предположим, пользователь находится на какой-либо другой странице, например, на странице продуктов, и оттуда он переходит на страницу оформления заказа, явно указав в URL-адресе, пользователь не сможет это сделать, потому что тогда идентификатор по умолчанию будет передан как undefined. И в mounted method Checkout компонента мы сначала проверяем, что если идентификатор имеет допустимый тип данных (в данном случае это должна быть строка, поскольку мы передаем идентификатор в качестве параметров в методе маршрутизатора компонента Cart), тогда только мы визуализируем Checkout component .
Если идентификатор не определен, т.е. пользователь пытается перейти на checkout page, не подтверждая порядок, он будет перенаправлен на Home page. Кроме того, если корзина пуста, кнопка подтверждения заказа отключена, но также, если пользователь пытается перейти на checkout page, явно указав в URL-адресе, пользователь все равно будет перемещен на Home page, потому что в этом случае идентификатор также передается в Checkout component будет неопределенным.
Таким образом, идентификатор params (размер корзины) передается от компонента Cart, чтобы просто подтвердить, переходит ли пользователь к Checkout component, подтверждая заказ.
3.Инициализация и настройка элемента Stripe
Включить Stripe.js динамически
3.1 includeStripe:
Он создаст тег скрипта, загрузит наш javascript-файл Stripe и добавит его в заголовок нашего приложения. Этот метод принимает 2 параметра: URL-адрес файла, который мы загружаем динамически, который будет файлом Stripe JS, и функцию обратного вызова, которая будет запускаться при загрузке файла.
Теперь, когда мы правильно загрузили файл, мы выполним обратный вызов, и Stripe будет настроен.
Настроить элемент полосы
3.2 configureStripe:
Помните, что в mounted method мы вызвали метод includeStripe, а затем в качестве функции обратного вызова мы вызвали метод configureStripe, который отвечает за создание объекта Stripe для конкретного сеанса оплаты.
stripe, который мы объявили ранее как переменная данных, будет содержать локальный экземпляр объекта Stripe, который находится в загруженном нами Stripe JS API.
4.Выполнить метод получения товаров из корзины.
Во-первых, нам нужно сохранить элементы корзины в массиве, который мы объявили как переменную данных с именем checkoutBodyArray.
Итак, как мы хотим хранить элементы корзины в переменной данных?
Поскольку API сообщений, который мы реализовали в предыдущем руководстве, требует список элементов корзины в качестве тела запроса, мы сохраняем элементы корзины в checkoutBodyArray.
Получение товаров из корзины
Мы реализуем метод getAllItems, который вызывает метод get API / cart, который возвращает товары в корзине в качестве ответа. Таким образом, мы сохраняем этот ответ в checkoutBodyArray и передаем этот массив в качестве тела запроса в API серверной части оформления заказа.
Мы вызываем getAllItems method в смонтированном методе, поскольку мы хотим получить элементы корзины при визуализации компонента Checkout. Поэтому вызовите этот метод в установленном нами ранее методе.
5.Выполнить передачу элементов корзины в метод API серверной части.
Передача элементов корзины в API серверной части
Теперь, когда у нас есть элементы корзины в checkoutBodyArray, нам нужно передать это методу post. Итак, мы реализуем функцию goToCheckout, которая вызывает сообщение Axios. После передачи массива элементов корзины в API серверной части мы получаем в качестве ответа идентификатор сеанса.
Таким образом, мы сохраняем идентификатор сеанса в локальном хранилище, а затем вызываем redirectToCheckout метод Stripe, в котором мы сохраняем идентификатор сеанса, который мы получили из данных ответа в нашем sessionId, который перенаправит пользователя на страницу, размещенную в Stripe, для безопасного сбора платежей. Информация. Когда пользователь совершает покупку, он перенаправляется обратно на наш веб-сайт.
Так выглядит страница оформления заказа Stripe
6. Перемещение пользователя к успешному или неудачному платежному компоненту в соответствии со статусом платежа Stripe.
Здесь мы обрабатываем результат платежа, т. Е. Если платеж прошел успешно, мы добавляем заказ в таблицу заказов, а в случае сбоя платежа мы не добавляем этот заказ и перемещаем пользователя на страницу истории заказов.
Так где же обрабатывается результат платежа? Мы не определяли его здесь, во внешнем интерфейсе, поэтому, если вы помните, в предыдущем руководстве по бэкэнду (точнее, в классе OrderService) мы определили, что было установлено success URL и failure URL , как показано ниже.
SessionCreateParams params = SessionCreateParams.builder()
.addPaymentMethodType(SessionCreateParams.PaymentMethodType.CARD)
.setMode(SessionCreateParams.Mode.PAYMENT)
.setCancelUrl(failedURL)
.addAllLineItem(sessionItemsList)
.setSuccessUrl(successURL)
.build();
И failedURL и successURL были определены как
String successURL = baseURL + "payment/success"; String failedURL = baseURL + "payment/failed";
а baseURL был URL-адресом внешнего интерфейса Vuejs, над которым мы работаем.
Навигация пользователя к успешному или неудачному платежному компоненту в соответствии со статусом платежа Stripe
Во-первых, нам нужно создать папку в исходном каталоге с именем helper , и в этой папке мы создадим другую папку с именем payment. В этой папке создайте два компонента vue Failed.vue и Success.vue.
Компонент успешного платежа
Таким образом, в компоненте «Успех» мы создаем токен переменных данных и идентификатор сеанса и определяем метод для сохранения текущего порядка в нашей базе данных.
Итак, в saveOrder method мы используем backend API / order / add
который мы обсудим в следующем руководстве.
Чтобы получить представление о том, что делает API, обратитесь к описанию API выше:
В случае успеха мы перенаправляем пользователя в компонент истории заказов, где видны текущие и старые заказы.
Компонент сбоя платежа
В этом компоненте мы удаляем идентификатор сеанса из локального хранилища и не сохраняем этот порядок в таблице заказов. Наконец, мы по-прежнему перемещаем пользователя на страницу истории заказов, но здесь текущий заказ не будет виден, но будут доступны предыдущие заказы.
Поздравляем !!!
Вы успешно реализовали интерфейсную часть платежного шлюза с помощью Vuejs и Stripe. Вы можете найти полный код на Github.
