Интеграция Stripe с Vue - основы работы с клиентом

Использование Stripe.JS и Elements для создания простого компонента Vue.JS для сбора платежей по картам.

Отказ от ответственности: эта статья не является аффилированным лицом и не спонсируется Stripe. Это уникальное выражение моих знаний и опыта в качестве независимого разработчика, интегрирующего службы Stripe в мою платформу.

TL; DR:
+ Ваш вариант использования может не требовать элементов Stripe, сначала проверьте
+ Если у вас есть JavaScript, вы можете реализовать Stripe, я просто предпочитаю Vue
+ Vue в основном просто Библиотека Java Script, проверьте их документацию
+ Stripe - это сервис безопасных транзакций, поэтому он может быть немного самоуверенным
+ Stripe требует для работы всего несколько методов и фрагментов данных
+ Прочтите ниже в разделе Добавление полосы, если вам нужна конкретная информация.

Введение

{"Гайки и болты" начинаются в Настройка Vue или Добавление полосы для экспертов Vue}

Если вы читаете это, я полагаю, что вы хотите интегрировать обработку платежей в свое веб-приложение. Но прежде чем идти дальше, убедитесь, какая интеграция на стороне клиента лучше всего соответствует вашим потребностям; есть несколько разных вариантов. Вы можете ознакомиться с ними здесь в моей предыдущей статье. Если вы решите, что вам нужна Checkout, содержание этой статьи не будет вам очень полезно. Если вы решите, что вам нужны Elements, вы попали в нужное место, и вы также можете увидеть, как интегрировать серверную часть в другой из моих предыдущих статей. Это можно сделать до или после внедрения клиентской части, это не имеет большого значения.

Также обратите внимание, что я реализую это с помощью фреймворка Vue.JS. Вы можете реализовать Stripe Elements с любой комбинацией JavaScript и HTML, но мне лично нравится чистота Vue. Если вы не знакомы с Vue или обеспокоены тем, что не можете реализовать его в своем текущем техническом стеке: уверяю вас, что если вы сможете реализовать Stripe, вы сможете реализовать и Vue. Это не руководство по Vue, и я буду использовать дизайн, специфичный для Vue, но я надеюсь, что он будет достаточно простым, чтобы кто-то без предварительных знаний мог эффективно реализовать Stripe с Vue; Тем не менее, я предлагаю вам проверить документацию. Я использую самую ванильную форму Vue из возможных, но большая часть более свежей документации сосредоточена вокруг реализации Vue SFC, а моя личная реализация использует этот более сложный формат.

Как всегда, я буду делать здесь то, что может быть не лучшим методом, но упрощаю объяснение. Не стесняйтесь выражать любые опасения, но признайте, что я стараюсь не допускать излишнего углубления содержания, но при этом быть всеобъемлющим.

Настройка Vue

Если вы знакомы с Vue, все это должно показаться вам довольно знакомым, и вы, вероятно, сможете перейти к Добавление полосы. Если нет, попросту говоря, Vue - это просто библиотека JavaScript, поэтому ее можно использовать с любой веб-страницей (если вы скажете «не будет работать, если JS отключен», то и Stripe.js тоже не будет… так что вам, вероятно, следует найти другой сервис транзакций). Самый быстрый способ начать работу - просто включить ссылку на CDN в свой html-шаблон (примечание: это может быть не рекомендуемым выбором для вашего конкретного случая). Вы определенно можете добавить все это на существующую страницу, но чистая индексная страница без ничего другого будет выглядеть примерно так:

Помимо ссылки на CDN, вы также увидите там div и еще один скрипт. Вот как Vue добавляется на страницу путем включения div в желаемое место, которое действует как дверной проем для «внедрения» вашего пользовательского экземпляра Vue. Это похоже на то, что вы просто определяете очень сложный класс для div, который оказывается экземпляром Vue. Файл .js - это то, что будет определять ваш экземпляр Vue, который div использует с классом «app»; мы определяем это ниже:

Короче говоря, вы даете фреймворку Vue объект параметров, и он выдает экземпляр, который затем присоединяется к любому div с определением «el» (вы можете увидеть его имя, как если бы вы назвали класс CSS: .app). El - это ваш крючок в базовом HTML-шаблоне. Как только это будет определено, все остальное внутри этого экземпляра Vue будет автономным (включая другие компоненты Vue) и будет внедрено в названный div виртуальной DOM. Все в вашем шаблоне внутри div «app» может взаимодействовать с экземпляром Vue. Однако мне лично нравится оставлять его пустым и определять свой собственный шаблон как одну из опций Vue. Я также предпочитаю, чтобы мой экземпляр был как можно более чистым, а все остальное собирал внутри компонентов. Элемент с именем «StripeVueCard» внутри моей опции шаблона является одним из них.

На этом этапе мы можем работать над компонентом, не обращая внимания на что-либо еще в веб-приложении, и он будет отображаться там, где мы внедрили div app. Чтобы узнать больше об экземплярах и компонентах Vue, ознакомьтесь с руководством. Все, что вам нужно знать, это то, что Vue разделяет части кода, упаковывая все необходимые данные, методы и код шаблона в отдельные компоненты. Vue также предоставляет вычисляемые свойства и множество удобных привязок данных, чтобы сделать код максимально чистым и простым. Чтобы заставить элемент Stripe работать в этой чистой структуре, продолжайте читать.

Добавление полосы

Stripe - это сервис транзакций; это требует от них принятия больших мер для обеспечения герметичности и безопасности своей службы. Это означает, что практически любой может реализовать услугу безопасных транзакций, но существует очень специфический способ взимания таможенных сборов. Во-первых, вы должны использовать их библиотеку на основе URL-адресов. Вы также можете принимать конфиденциальную финансовую информацию клиентов только внутри элементов, которые они размещают. Таким образом, вместо того, чтобы собирать данные самостоятельно, мы должны монтировать их элементы на нашем веб-сайте. Плата может взиматься только при создании токена, представляющего данные пользователя, которые затем могут быть отправлены в нашу внутреннюю службу для обработки с помощью секретного ключа доступа. Эти элементы, встроенные в приложение, заботятся о создании токена и по ходу выполнения других проверок. Это действительно упрощает работу, но все же есть несколько нюансов, которые нужно знать при работе с ними.

Перво-наперво… убедитесь, что вы включили библиотеку Stripe.JS везде, где у вас есть Vue.JS (или в другом интуитивно понятном месте). Это должно выглядеть примерно так:

<script src=”https://js.stripe.com/v3/"></script>

После того, как ваше приложение настроено так, как вы хотите, вы начнете создавать компонент Stripe; Я называю свою StripeVueCard (ее скелет вы увидите выше). В самом простом случае, для обработки транзакций Stripe, вам действительно нужен только некоторый код инициализации, пара элементов в вашем шаблоне и метод отправки. Я рассмотрю здесь простейший случай, а затем перейду к более обширным реализациям. Давайте начнем с рассмотрения соответствующих данных, чтобы понять, с чем все будет работать.

Данные Stripe Card:

Примечание. Для компонентов свойство data не является объектом, а предоставляет функцию, которая возвращает объект. Это важно для того, чтобы объекты данных каждого компонента оставались независимыми, в противном случае они были бы связаны друг с другом, мешая друг другу. В этом случае это может быть не так важно, но это правильный дизайн.
Хотя не все это явно необходимо, это основные переменные, которые я использую для создания заряда с помощью элемента Stripe.

Публикуемый ключ Stripe (spk): Первое, что необходимо для транзакций Stripe, - это ваш публикуемый ключ. В идеале это должно быть установлено вызовом API при монтировании компонента. Вы можете найти его в панели управления Stripe, и он будет отформатирован как pk_live_xxxxx или pk_test_xxxxx для тестовых ключей.

Объект Stripe (полоса): инициализируется при монтировании, экземпляр объекта Stripe привязан к этому компоненту и является тем, что предоставляет элементы полосы, которые мы монтируем, а также создает токен заряда, который будет отправлен на задний план. конец.

Объект карты (карта): он создается объектом полосы, монтируется в контейнер div в нашем шаблоне, и на него ссылаются, когда мы создаем токен запроса на оплату.

Ваше сообщение (msg): Хотя это и не обязательно, хорошо, если ваши пользователи могут прочитать сообщение, управляемое переменными.

Сумма платежа (payAmount): при отправке платежа ее нужно будет сократить до целого числа (отформатированного как 1000 для 10 долларов США).

Отключить отправку (lockSubmit): используется для устранения проблемы, когда платеж только что был отправлен, или в случае неверных данных.

Теперь, когда мы знаем, как выглядят данные, давайте посмотрим на базовый шаблон.

Шаблон карточки с полосой:

Я использую Bootstrap здесь, чтобы дать простой стиль CSS, не создавая его сам. Ссылку на CDN можно найти здесь, чтобы добавить к другим ссылкам на скрипты. В противном случае просто не обращайте внимания на содержание класса.

Итак, ключевые элементы здесь:
Заголовок, запрашивающий пользователя. Это можно легко привязать к динамическому значению, передаваемому компоненту с помощью интерполяции текста, как видно из ссылок msg и payAmount в h2. Сумма также должна быть напрямую связана с созданием начисления.

Элемент управления монтируемой формой Div. Это div, в который мы будем монтировать элемент Stripe. Он должен быть легко доступен для нашего JS-кода (обратите внимание на объявление ref = ”card”) и должен иметь стиль, как и другие элементы управления, поскольку Stripe может управлять только определенным уровнем стиля для смонтированного элемента.

Кнопка "Отправить". Довольно просто, должна быть кнопка отправки, которую пользователь мог бы нажать. Вы можете видеть, что существует «отключенная» привязка, которая используется для предотвращения двойного щелчка пользователем или отправки неверных данных. Также существует директива v-on: click, которая после предотвращения действия по умолчанию (чтобы Vue имел полный контроль) вызывает наш метод покупки.

Конечно, на данный момент в ваш шаблон фактически не вставлен элемент Stripe. Для этого нам нужно запустить функцию при монтировании компонента, создав элемент Stripe и монтируя его внутри ссылочного div. Смонтированный код должен выглядеть примерно так:

Монтаж карты Stripe:

Монтируемый добавляется как одно из свойств вашего компонента Vue и будет запускаться хуком жизненного цикла Vue при монтировании. Первая строка не обязательна, но рекомендуется предоставлять переменную с областью действия для взаимодействия с компонентом Vue, особенно при работе с другими областями действия в методе. Ключевые моменты:
Инициализировать экземпляр Stripe. Для этого понадобится ваш публикуемый ключ, который я сохранил здесь только как компонентную переменную (spk), но предлагаю вам фактически вытащить его со своего сервера Stripe здесь, в смонтированном виде.
Инициализировать экземпляр элемента карты. Все действия происходят с этим объектом. Вы можете создать несколько различных элементов, но сейчас мы начнем с элемента карты, который содержит все необходимые данные транзакции в одном.
Установите элемент. Элемент Stripe card теперь может монтироваться внутри ссылочного элемента в вашем шаблоне. Поскольку значение ref добавляется к элементу, Vue может легко получить к нему доступ, указав ссылку на $ refs. {RefName}. Вот как мы передаем элемент методу монтирования.

Когда все инициализировано, компонент должен отображаться с готовым к использованию элементом Stripe card. Теперь все, что осталось, - это настроить метод для обработки события отправки.

Методы полосовой карты:

Обработка на стороне клиента на самом деле сводится к двум вещам: получение токена заряда из смонтированного элемента Stripe (или возврат ошибки, если что-то не так) и отправка токена вместе с суммой заряда и другими параметрами на ваш сервер для обработки. заряд. Давайте рассмотрим это шаг за шагом. Начиная с метода покупки (который будет вызываться отправкой при щелчке), первое, что нужно сделать, это заблокировать отправку, чтобы она действовала как противодействие, чтобы пользователь не мог попытаться отправить дважды до того, как транзакция будет завершена. Чтобы получить токен начисления, вы передаете объект элемента методу createToken экземпляра Stripe. Если у вас есть несколько элементов (отдельная карта, CVV и срок действия), то нужно передать только один. Метод является асинхронным, он возвращает обещание, на котором вы затем можете связать свою логику обработки. Если метод возвращает ошибку, перехватите ее и передайте через метку ошибки или предупреждение пользователя. В противном случае вызовите метод обработки транзакции. Всегда учитывайте асинхронные обещания, даже если вы просто используете предупреждение, чтобы передать ошибку пользователю (не обязательно лучший вариант).

В случае успеха передайте токен в метод обработки транзакции. Токен будет добавлен в объект данных вместе, по крайней мере, со следующими вещами: валюта (см. Параметры здесь), описание (это будет в их квитанции), сумма (в формате 100000 = 1000,00 долларов США - Я использую простой метод для удаления значение из отображаемой валюты). Затем я строю свой маршрут из базового маршрута API (переданного из конфигурации) и конкретной конечной точки. Чтобы вызвать API, просто включите vue-resource с другими вашими скриптами:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Это делает очень простой пост-вызов с учетом вашего маршрута и переменных данных:

self.$http.post(route,dt, {headers:{} })

Метод post также является асинхронным и требует цепочки обещаний. Как только ваш сервер вернул ответ, транзакция была обработана, и вы технически готовы. Конечно, вы, вероятно, должны хотя бы уведомить пользователя об успешном или неудачном завершении. Я также предлагаю вернуть пользователю квитанцию, которая предоставляется в виде URL-адреса из Stripe API. Это можно увидеть ниже в разделе «Предлагаемые улучшения».

Теперь все, что вам осталось, - это обработка запроса на оплату на стороне вашего сервера. Вы можете увидеть, как это сделать, в моей предыдущей статье. Однако есть еще несколько вещей, которые, на мой взгляд, важно знать при работе с интеграциями Stripe.

Предлагаемые улучшения

Чтобы сделать эту статью короче, я решил выделить улучшения в отдельную статью. Перейдите сюда, если вы хотите получить более подробную информацию о создании надежной реализации на стороне клиента.

Другие проблемы:

Есть еще несколько мелочей, о которых вам следует знать при работе с Stripe.

Ширина области просмотра: метатег для ширины области просмотра позволяет полосе обеспечивать согласованность со своими элементами во всех ситуациях просмотра. Возможно, вы уже настраиваете это, это довольно часто, но если вы не включите следующее в заголовок вашего шаблона, чтобы Stripe хорошо отображался везде:
<meta name="viewport" content="width=device-width,initial-scale=1"/>

Брендинг Stripe: убедитесь, что вы используете правильные активы бренда Stripe и соблюдаете их соглашение об использовании, если это так.

Нулевое значение. Stripe плохо обрабатывает суммы платежа с нулевым значением. Убедитесь, что вы отправляете действительное ненулевое значение для суммы.

Это должно быть все, что необходимо для обработки транзакций Stripe. Если я что-то пропустил, дайте мне знать, и я обновлю это. Спасибо за прочтение.

Keep Calm & Code On;
-Marcus