В этом уроке мы узнаем, как интегрировать платежный шлюз в Vue Js с помощью Stripe в нашей демо-версии.- коммерческое приложение
Вступление
Мы создаем приложение для электронной коммерции с нуля, используя Vue.js в интерфейсе и Java с Spring boot для серверной части. Вы можете ознакомиться с первым руководством по интерфейсу из этой серии здесь. Давайте создадим интерфейс для нашего приложения электронной коммерции с помощью Vue.js Мы создаем полноценное приложение для электронной коммерции с нуля. Сегодня мы собираемся добавить функцию Products.javascript.plain english.io
Платежный шлюз – важная функция для приложения электронной коммерции. В предыдущем уроке мы интегрировали платежный шлюз с использованием Spring Boot и Stripe. Теперь мы создадим его интерфейсную часть, такую как прием товаров из корзины и данных карты.
Если вы хотите обратиться к серверной части платежного шлюза, воспользуйтесь приведенной ниже ссылкой.
Давайте добавим функцию оформления заказа в Spring Boot для нашего приложения электронной коммерции | автор: NilMadhab | Javarevisited | Март, 2021/Средний
Нулевой Мазхаб ・ 11 марта 2021 г. ・ Средний
Живая демо-версия
Приложение для электронной коммерции Web tutsplus
Вы можете найти полный код по адресу Github .
Пред- реквизиты
Знание Vue js
Код Visual Studio — с открытым исходным кодом (рекомендуется)
Хороший браузер — (рекомендуется Chrome)
API, который мы будем использовать
getCartItems:
Это метод get, и мы будем использовать его для хранения товаров корзины в массиве, чтобы мы могли передать его в качестве тела запроса в наш серверный API с помощью Axios.
Контрольный список:
Это метод post, которому в качестве тела ответа мы передадим массив элементов корзины. Этот метод отвечает за создание сеанса i d.
Разместить заказ:
Это метод post, и если платеж пройдет успешно, мы будем использовать его для добавления заказа в таблицу заказов в нашей базе данных. Итак, в качестве параметров для метода Axios post мы передадим токен вошедшего в систему пользователя и сгенерированный идентификатор сеанса.
Структура проекта
Полоса
Stripe – один из лучших способов обработки онлайн-платежей, и недавно они выпустили Stripe Elements. Stripe Elements – это их предварительно созданная библиотека компонентов пользовательского интерфейса, которая поможет вам легко создавать собственные потоки оформления заказа. Теперь это упрощает, как никогда, настройку пользовательской формы оплаты для вашего приложения.
В этом уроке мы будем использовать Stripe.js для создания платежного шлюза .
Прежде всего, нам нужен наш собственный API-ключ Stripe test. Так что продолжайте и создайте учетную запись на stripe, а затем с панели мониторинга получите ключ API для целей тестирования. Сохраните этот ключ в переменной окружения. Чтобы сделать это:
Создайте файл в исходном каталоге с расширением .env
В этом файле создайте переменную , в которой будет храниться ключ API.
Назовите переменную как .
Поток учебного пособия
Объявление требуемых переменных данных Установка stripe Инициализация и настройка элемента Stripe Реализация метода выборки элементов корзины Реализация передачи элементов корзины в метод внутреннего API и получения идентификатора сеанса в качестве ответа Переход пользователя к успешному или неудачному платежному компоненту в соответствии со статусом оплаты Stripe
Теперь давайте закодируем
Создайте папку с именем Checkout и в этой папке создайте файл vue с именем Checkout, который будет содержать интерфейсную логику для платежного шлюза.
1.Создание переменных данных
маркер stripe API: хранит ключ API
полоса: полосатый элемент
Элемент Stripe – это набор компонентов с различными элементами, которые вы можете использовать для создания форм оформления заказа, таких как кнопки и входные данные для сбора информации от пользователя. Тот, на котором мы собираемся сосредоточиться, – это элемент карты. Элемент карты позволяет собирать информацию о карте в одном элементе. Он включает в себя динамически обновляемый значок бренда карты, а также входные данные для электронной почты, срока действия, CVV, названия страны, имени владельца карты.
знак: хранит токен пользователя
идентификатор сеанса: сохраняет сгенерированный идентификатор сеанса с помощью Stripe
проверьте массив тела: тело ответа, которое мы отправим в наш серверный API
2. Установка полосы
Элемент Stripe является частью Stripe.js итак, нам нужно включить скрипт с помощью метода include Stripe (который мы реализуем далее), которому мы передаем исходный URL-адрес скрипта, и поскольку includeStripe – это функция обратного вызова, мы вызываем метод configureStripe, который мы реализуем впереди. Итак, когда мы вызываем этот метод includeS tripe? Когда компонент визуализируется в это время, мы инициализируем этот метод.
Мы привязываем это, чтобы у нас был доступ к методам локального компонента внутри обратного вызова, и мы вызываем configureStripe, как только все будет загружено. Мы еще не реализовали это, но это следующий шаг! Это наш метод обратного вызова, который настроит Stripe локально внутри компонента.
Кроме того, эта страница оформления заказа будет отображаться, когда пользователь нажимает кнопку подтверждения заказа на странице корзины. Если вы хотите взглянуть, вы можете обратиться к this . Поэтому, когда пользователь нажимает подтвердить заказ, мы вызываем метод оформления заказа в компоненте корзины, в котором мы перемещаем пользователя к компоненту оформления заказа с помощью метода маршрутизатора. И этому методу маршрутизатора мы передаем идентификатор параметра как размер корзины (количество товаров в корзине).
checkout(){
this.$router.push({ name: 'Checkout',params:{id:this.len}})
}
//from the Cart.vue
Теперь, почему мы передаем идентификатор параметров?
Мы передаем идентификатор, чтобы проверить, вызывается ли страница оформления заказа тогда и только тогда, когда пользователь нажимает кнопку подтверждения заказа. Предположим, пользователь находится на какой-то другой странице, например на странице продуктов, и оттуда он переходит на страницу оформления заказа, явно указав в URL-адресе, пользователь не сможет этого сделать, потому что тогда идентификатор по умолчанию будет передан как неопределенный. И в смонтированном методе Check out компонента мы сначала проверяем, что если идентификатор имеет допустимый тип данных (в данном случае это должна быть строка, поскольку мы передаем идентификатор в качестве параметров в методе маршрутизатора компонента Cart), то только мы визуализируем компонент Checkout.
Если идентификатор не определен, т.е. пользователь пытается перейти на страницу оформления заказа без подтверждения заказа, он будет перенаправлен на домашнюю страницу. Кроме того, если корзина пуста, то кнопка подтверждения заказа отключена, но тогда также, если пользователь попытается перейти на страницу оформления заказа, явно указав URL-адрес, пользователь все равно будет перенаправлен на домашнюю страницу, потому что в этом случае также идентификатор, переданный компоненту оформления заказа, будет неопределенным.
Таким образом, идентификатор параметров (размер корзины) передается из компонента диаграммы, чтобы просто подтвердить, переходит ли пользователь к компоненту оформления заказа или нет, подтвердив заказ.
3.Инициализация и настройка элемента Stripe
Включают в себя Stripe.js динамически
3.1 Включает в себя полосу:
Он создаст тег script, загрузит наш файл Stripe javascript и добавит его в заголовок нашего приложения. Этот метод принимает 2 параметра: URL файла, который мы загружаем динамически, который будет файлом Stripe JS, и функцию обратного вызова, которая будет выполняться при загрузке файла.
Настройка элемента Stripe
3.2 конфигуриРуемая полоса:
Помните, что в смонтированном методе мы вызвали метод include Stripe, а затем в качестве функции обратного вызова мы вызвали метод configureStripe, который отвечает за создание объекта Stripe для конкретного сеанса оплаты.
Stripe, который мы объявили ранее как переменную данных, будет содержать локальный экземпляр объекта Stripe, который находится в загруженном нами Stripe JS API.
4.Реализовать выборку товаров из корзины метод
Во-первых, нам нужно сохранить элементы корзины в массиве, который мы объявили как переменную данных с именем check out Body Array .
Итак, как мы хотим сохранить товары корзины в переменной данных?
Поскольку post API, который мы реализовали в предыдущем руководстве, требует списка элементов корзины в качестве тела запроса, мы храним элементы корзины в checkoutBodyArray .
Извлечение товаров из корзины
Мы реализуем метод getAllItems, который вызывает get API/cart, который возвращает товары в корзине в качестве ответа. Итак, мы сохраняем этот ответ в массиве check out Body и передаем этот массив в качестве тела запроса в серверный API checkout.
Мы вызываем метод getAllItems в методе mounted, так как мы хотим получить элементы корзины при отображении компонента Checkout. Поэтому вызовите этот метод в смонтированном методе, который мы реализовали ранее.
5.Реализуйте передачу элементов корзины в метод backend API
Передача товаров из корзины в серверный API
Теперь, поскольку у нас есть элементы корзины в массиве check out Body, нам нужно передать это методу post. Итак, мы реализуем функцию go To Check out, которая вызывает сообщение Axios. После передачи массива элементов корзины в серверный API мы получаем идентификатор сеанса в качестве ответа.
Итак, мы сохраняем идентификатор сеанса в локальном хранилище, а затем вызываем метод перенаправления для проверки Stripe, в котором мы сохраняем идентификатор сеанса, полученный из данных ответа, в нашем SessionID, который перенаправит пользователя на страницу, размещенную на Stripe, для безопасного сбора платежной информации. Когда пользователь завершает свою покупку, он перенаправляется обратно на наш веб-сайт.
Вот как выглядит страница оформления заказа Stripe
6. Переход пользователя к компоненту успешной или неудачной оплаты в соответствии со статусом оплаты Stripe
Здесь мы обрабатываем результат платежа, т.е. Если платеж прошел успешно, мы добавляем заказ в таблицу заказов, а если платеж не прошел успешно, мы не добавляем этот заказ и перенаправляем пользователя на страницу истории заказов.
Итак, где обрабатывается результат платежа? Мы не определили его здесь, во внешнем интерфейсе, поэтому, если вы помните, в предыдущем бэкэнд-руководстве (точнее, в классе OrderService) мы определили, что had задает URL-адрес успеха и URL-адрес сбоя, как показано ниже.
SessionCreateParams params = SessionCreateParams.*builder*()
.addPaymentMethodType(SessionCreateParams.PaymentMethodType.*CARD*)
.setMode(SessionCreateParams.Mode.*PAYMENT*)
.setCancelUrl(failedURL)
.addAllLineItem(sessionItemsList)
.setSuccessUrl(successURL)
.build();
И неудачный URL-адрес и SuccessURL были определены как
String successURL = baseURL + "payment/success"; String failedURL = baseURL + "payment/failed";
а базовым файлом был URL-адрес front end Vue js//, над которым мы работаем.
Переход пользователя к компоненту успешной или неудачной оплаты в соответствии со статусом оплаты Stripe
Сначала нам нужно создать папку в исходном каталоге с именем helper, и в этой папке мы создаем другую папку с именем payment . В этой папке создайте два компонента vue Failed.vue и Success.vue .
Компонент Успеха платежа
Итак, в компоненте Success мы создаем переменные данных токен и идентификатор сеанса и определяем метод для сохранения текущий заказ в нашей базе данных.
Итак, в методе SaveOrder мы используем серверный API/order/добавлять
который мы обсудим в следующем уроке .
Чтобы получить представление о том, что делает API, обратитесь к описанию API выше:
В случае успеха мы перенаправляем пользователя в компонент истории заказов, где отображаются текущие и старые заказы.
Компонент Сбоя платежа
В этом компоненте мы удаляем идентификатор сеанса из локального хранилища и не сохраняем этот порядок в таблице заказов. Наконец, мы по-прежнему перемещаем пользователя на страницу истории заказов, но здесь текущий заказ не будет виден, но будут доступны предыдущие заказы.
Поздравляю!!!
Вы успешно внедрили интерфейсную часть платежного шлюза с использованием Vuejs и Stripe. Вы можете найти полный код по адресу Github .
Оригинал: “https://dev.to/nilmadhabmondal/let-s-add-a-checkout-feature-in-vue-js-for-our-ecommerce-app-2fnc”