Полный исходный код этого руководства доступен в репозитории Ionic4-stripe Github.
Stripe — один из наиболее широко используемых и быстрорастущих платежных шлюзов, которые вы можете интегрировать в свой веб-сайт или приложение. Он поддерживает широкий спектр способов оплаты и быстро распространяется по всему миру. Stripe может позаботиться почти обо всех ваших платежных требованиях в приложениях и на веб-сайте. Простота интеграции Stripe сделала его популярным среди разработчиков по сравнению с PayPal и другими платежными шлюзами. Хорошее сравнение Stripe и PayPal можно изучить здесь (спойлер — Stripe побеждает)
Что такое Ионик 4?
Вы, наверное, уже знаете об Ionic, но я помещаю его здесь только для новичков. Ionic — это полный SDK с открытым исходным кодом для разработки гибридных мобильных приложений, созданный Максом Линчем, Беном Сперри и Адамом Брэдли из Drifty Co. в 2013 году. Ionic предоставляет инструменты и услуги для разработки гибридных мобильных приложений с использованием таких веб-технологий, как CSS, HTML5 и Sass. . С помощью этих веб-технологий можно создавать приложения, а затем распространять их через собственные магазины приложений для установки на устройства с помощью Cordova.
Другими словами, если вы создаете нативные приложения для Android, вы пишете код на Java. Если вы создаете нативные приложения в iOS, вы пишете код на Obj-C или Swift. Оба они мощные, но сложные языки. С Cordova (и Ionic) вы можете написать один фрагмент кода для своего приложения, которое может работать как на iOS, так и на Android (и Windows!), и это также с простотой HTML, CSS и JS.
Ionic 4 и платежные шлюзы
Ionic 4 может создавать самые разные приложения, и, следовательно, в приложениях Ionic 4 может быть реализовано множество платежных шлюзов. Популярными из них являются PayPal, Stripe, Braintree, покупка в приложении и т. д. Для получения более подробной информации о платежных шлюзах вы можете прочитать мой блог Решения для платежных шлюзов в Ionic 4.
Stripe можно интегрировать как на веб-сайты, так и в мобильные приложения. Существуют разные способы интеграции Stripe SDK. В этом блоге мы узнаем, как интегрировать платежный шлюз Stripe в приложения Ionic 4 и Ionic 4 PWA.
Существует два основных способа интеграции Stripe в приложение Ionic.
Вы можете использовать реализацию Ionic Native, которая представляет собой оболочку собственных SDK Stripe для iOS и Android. Для этого используется cordova-plugin-stripe. Это имеет ограничение, заключающееся только в облегчении создания токенов для разовых платежей.
Альтернативный подход — использовать Stripe.js, который является реализацией их функциональности на JavaScript. Это легко использовать и быстро реализовать, так как это реализовано в JavaScript. Функциональность предоставляется динамически на странице и поддерживает как разовые, так и регулярные платежи.
В этом посте мы узнаем, как реализовать оба этих метода для платежей Stripe в приложении Ionic 4 и PWA. Чтобы упростить понимание, давайте представим весь поток графически.
Предпосылки
- Создайте приложение Ionic 4 для интеграции с Stripe
- Учетная запись разработчика Stripe для ключей API
Шаги
- Шаг 1 – интегрируйте подключаемый модуль Stripe Native (SDK) для создания токенов на уровне приложения.
- Шаг 2. Интегрируйте Stripe JS в PWA или веб-сайт для создания токенов на уровне веб-сайта.
- Шаг 3. Создайте функцию Firebase (или любую внутреннюю функцию для приема вызовов API), чтобы принимать токены из приложения и отправлять платежные запросы на сервер Stripe.
- Шаг 4. Подключите приложение или PWA к нашему серверу Firebase. Завершите платежные запросы Stripe с сервера Firebase.
Начнем шаг за шагом
Полный исходный код этого руководства доступен в репозитории Ionic4-stripe Github.
Предпосылки
Создайте базовое приложение Ionic 4
Создать базовое приложение Ionic 4 очень просто. Предполагая, что в вашей системе установлены все основные требования, запустите
$ ionic start MyApp sidemenu
Это создает ваше приложение с шаблоном titleMyApp и бокового меню.
Для получения дополнительной информации о том, как создать базовое приложение Ionic 4, обратитесь к моему блогу Как создать приложение Ionic 4.
С небольшими изменениями моя домашняя страница выглядит так.
Структура файла выглядит примерно так, просто для идеи
Основная функциональная часть этого HTML — не что иное, как кнопка оплаты, которую вы видите выше, которая вызывает функцию payWithStripe().
<ion-button expand="full" color="success" (click)="payWithStripe()">Pay with Stripe</ion-button>
Учетная запись разработчика Stripe
Посетите Stripe.com и создайте учетную запись. Платежные услуги Stripe в настоящее время доступны в ограниченном количестве стран, как показано на этой странице.
Как только вы окажетесь внутри Stripe Dashboard, найдите вкладку «Разработчик» -> ключи API.
Публикуемый ключ — это то, что вы используете для подключения Strive Native SDK или Stripe.js во внешнем интерфейсе. Секретный ключ используется в бэкэнде, где ваш сервер подключается к серверу Stripe для фактической оплаты.
Это все, что вам нужно от учетной записи Stripe на данный момент. Вы можете переключать клавиши Live и использовать их вместо этого после того, как протестировали процесс.
Теперь давайте рассмотрим интеграцию Stripe с Ionic 4.
Шаг 1 — Интегрируйте плагин Stripe Native
Обратите внимание, что и Шаг 1, и Шаг 2, упомянутые выше, помогут вам создать платежный токен только с сервера Stripe. Он НЕ завершает платеж. Для завершения платежа вы можете использовать сгенерированный токен, отправить его на свой сервер и выполнить платежный запрос через ваш сервер (шаг 4 ниже).
Чтобы включить функциональность Stripe в ваше приложение Ionic 4, вам необходимо установить собственный плагин Stripe. Установите плагин с помощью следующих команд
$ ionic cordova plugin add cordova-plugin-stripe $ npm install @ionic-native/stripe
После завершения установки импортируйте модуль Stripe в свой app.module.ts
а также импортируйте Stripe в свой файл страницы stripe.page.ts, например
Теперь, с родным SDK, мы можем генерировать платежный токен только для разовых платежей через Stripe SDK. Функция оплаты выглядит следующим образом
setPublishableKey подключает Stripe SDK с помощью вашего публикуемого ключа.
createCardToken вместе с данными карты создайте карту в Stripe. Вы можете применить внешние проверки данных карты, иначе сервер Stripe отправит соответствующее сообщение об ошибке.
Обратите внимание, что данные карты, используемые здесь, являются данными тестовой карты Stripe по умолчанию. Больше тестовых карт вы можете найти в документации Stripe.
При успешном ответе на функцию createCardToken сервер Stripe отправит обратно платежный токен, который будет иметь информацию, подобную следующей:
На данный момент это предел функциональности плагина Stripe Ionic Native. На шагах 3 и 4 мы увидим, как использовать этот токен для выполнения платежного запроса.
Шаг 2 — Интегрируйте Stripe.js в свой PWA / веб-сайт
В этой части мы интегрируем Stripe в среду PWA/веб-сайта, так как нативный плагин здесь работать не будет. Наша страница PWA/веб-сайта в примере репозитория выглядит следующим образом:
Прежде всего, добавьте stripe.js в свой файл index.html. Это справедливо для обоих, если вы создаете Ionic 4 PWA или отдельный веб-сайт.
<script src="https://js.stripe.com/v3/" async></script>
В stripe.js мы используем так называемые полосатые элементы, которые похожи на кнопку оплаты PayPal. С Stripe Elements вы получаете готовую платежную форму с надлежащей проверкой, локализацией и поддержкой платежей в браузере.
Мы реализуем элементы stripe.js на отдельной странице в нашем приложении Ionic 4 — Stripe-web.
На HTML-странице вместо обычной кнопки мы создаем форму, в которую интегрированы элементы Stripe.
Обратите внимание на элементы ID payment-form , card-element и card-errors ID, которые будут использоваться элементами Stripe.
payment-form будет содержать форму, прослушиватели для ввода и кнопку отправки, card-element будет содержать форму ввода карты, а card-errors покажет все ошибки проверки. Стиль для этих div можно легко контролировать.
Теперь реализация JS. Логическая часть элемента Stripe будет выглядеть следующим образом.
Давайте пройдем через это шаг за шагом
Мы импортируем Stripe на страницу с
declare var Stripe;
а затем создать переменную stripe
stripe = Stripe('YOUR_PUBLISHABLE_KEY');
Это этап инициализации элементов Stripe на вашей странице. Теперь, поскольку нам нужны элементы HTML div для создания элементов Stripe, мы вызовем соответствующие функции в ngOnInit, чтобы все элементы HTML загружались заранее.
ngOnInit() {
this.setupStripe();
}
Теперь функция setupStripe содержит все части реализации функциональности Stripe.js. Прежде всего, мы создаем card в HTML div с IDcard-element
let elements = this.stripe.elements();
var style = {
base: {
color: '#32325d',
lineHeight: '24px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
this.card = elements.create('card', { style: style });
console.log(this.card);
this.card.mount('#card-element');
Это создает форму ввода карты в HTML, которая состоит из четырех частей.
- Номер карты
- Срок действия
- ЦВК и
- ZIP
Все проверки обрабатываются автоматически, так что это 😅
Далее прикрепляем слушатели к form-inputs для отображения ошибок валидации в HTML div с ID card-errors, если таковые имеются
this.card.addEventListener('change', event => {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
Наконец, мы слушаем событие submit формы, чтобы отправить запрос на токенизацию на сервер Stripe.
var form = document.getElementById('payment-form');
form.addEventListener('submit', event => {
event.preventDefault();
this.stripe.createSource(this.card).then(result => {
if (result.error) {
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
console.log(result);
}
});
});
Обратите внимание на функцию createSource, которая создает платежный токен. Ранее мы обсуждали, что Native SDK может генерировать токены только для разовых платежей, а здесь вы можете генерировать токены для карт, с которых также можно совершать повторные платежи. Используйте createToken(), если вам нужно сделать разовый платеж, или createSource(), чтобы создать карту, по которой в будущем можно будет выставлять счета несколько раз.
Результат возвращает много полезной информации, которую можно хранить локально, хранить на сервере или использовать только один раз для создания платежей с использованием возвращенного токена.
Обратите внимание, что usage: reusable означает, что по этой карте можно выполнять несколько транзакций, например платежи по подписке и т. д.
Благодаря этому мы успешно создали токены с использованием элементов Stripe (stripe.js) в среде PWA / веб-сайта.
Шаг 3 — Создание проекта Firebase и функций для выполнения вызовов API на сервер Stripe
Первые два шага интеграции Stripe позволили нам генерировать платежные токены в среде приложения и веб-сайта. Но токены — это не платежи. Мы хотим совершить платеж с помощью Stripe. В этом Stripe немного отличается от PayPal. PayPal позволяет вам осуществлять полную оплату на самом интерфейсе, в то время как Stripe позволяет осуществлять платежи только на сервере.
Например, мы будем использовать серверную часть Firebase, поскольку ее проще всего реализовать с помощью приложения Ionic 4. После настройки проекта Firebase мы отправим простой HTTP-запрос на наш сервер Firebase для завершения платежа.
Предположение. Вы уже знаете, как создать проект Firebase и развернуть на нем функцию Firebase. Если нет, вы можете создать любой другой сервер узлов и выполнять к нему вызовы API.
Подключите Firebase к вашему проекту
Короче говоря, вы можете создать проект Firebase на веб-странице консоли Firebase, подключить его к приложению Ionic 4, используя firebase init . Также для этого в вашей системе должны быть установлены firebase-tools. (Используйте npm install firebase-tools -g)
Как только ваш проект будет готов, подключите его к приложению Ionic 4, используя
$ firebase init
затем выберите проект и выберите вариант functions из вариантов.
С помощью Firebase Functions вы можете, по сути, настроить серверные функции (node.js) в той же среде, локально протестировать их с помощью firebase serve, а затем развернуть их в своем проекте Firebase, чтобы его можно было подключить к вашему приложению/веб-сайту.
Как только вы подключите проект Firebase, вы увидите папку functions в корне вашего проекта, как показано ниже.
Создайте функцию firebase для выполнения платежных запросов.
После этого вы можете создать свою внутреннюю функцию в файле functions/index.js. Эта функция примет объект запроса из вашего приложения/веб-сайта, отправит платежный запрос на сервер Stripe и снова вернет ответ вашему приложению/веб-сайту.
Обратите внимание, что запрос платежа из вашего приложения должен содержать
- сумма — числом (Примечание:это число указано в центах, если вы используете «usd». Поэтому используйте 100, если платеж составляет 1 доллар США. Использование менее 50 приведет к ошибке.)
- валюта — строка кода валюты, например. "доллар США"
- токен — тот, который мы получили на шаге 1 и шаге 2
Эти данные должны быть отправлены в объекте в запросе POST API, как показано на следующем шаге.
Тестируйте функции Firebase локально
Чтобы проверить, правильно ли написана ваша функция Firebase, запустите функцию локально, выполнив команду
$ firebase serve
Это запустит ваш локальный сервер firebase, и URL-адрес будет отображаться в терминале, что-то вроде
http://localhost:5000/shoppr-c97a7/us-central1/payWithStripe
Теперь вы можете сделать вызов API для этого URL-адреса, используя POSTMAN или любое другое приложение для вызова API, или просто запрос curl с терминала. Помните, что вам также необходимо отправить информацию о сумме, валюте и токене в этом вызове POST API.
Разверните функцию Firebase на работающем сайте
После успешного локального тестирования разверните функции firebase на рабочем сервере, используя
$ firebase deploy --only functions
Это развернет функции на вашем действующем сервере Firebase, к которому вы сможете выполнять вызовы API. URL-адрес функции снова будет отображаться в терминале после развертывания, что-то вроде
https://us-central1-shoppr-c97a7.cloudfunctions.net/payWithStripe
Шаг 4 — Подключите приложение/PWA к действующему серверу Firebase и выполните платежные запросы.
Чтобы наше приложение могло делать HTTP-запросы, мы импортируем HttpClient в наш app.module.ts
и на нашей stripe.page.ts странице
import { HttpClient } from "@angular/common/http";
...
constructor(private http: HttpClient){}
Как только мы получим токен в ответ от сервера Stripe (Шаг 1/Шаг 2), мы вызовем REST API, соединяющий приложение с нашим сервером Firebase.
makePayment(token) {
this.http
.post(
'https://us-central1-shoppr-c97a7.cloudfunctions.net/payWithStripe', {
amount: 100,
currency: "usd",
token: token.id
})
.subscribe(data => {
console.log(data);
});
}
Успешный ответ сервера будет выглядеть следующим образом. Это длинный ответ, но вы понимаете, что все, что вам нужно, там есть, верно?
Вывод
Я знаю, что это длинный пост, в котором нужно многое понять. Повторю суть поста -
Stripe Payment состоит из двух частей — front-end (токенизация) и back-end (фактический запрос платежа). Интеграция платежей Stripe будет следовать этому графическому потоку.
Передняя часть может быть выполнена с использованием
- Ionic Native Plugin — Приложения
- stripe.js (элементы полосы) — Веб-сайт / PWA
Back-end часть может быть выполнена на любом сервере, который у вас есть. Например, мы использовали сервер Firebase.
Полный исходный код этого руководства доступен в репозитории Ionic4-stripe Github.
Следите за новостями об Ionic 4!
использованная литература
НАШЛИ ЭТОТ ПОСТ ИНТЕРЕСНЫМ?
Ознакомьтесь с другим моим сообщением Интеграция платежей Ionic 4 PayPal — для приложений и PWA
Также ознакомьтесь с другими нашими сообщениями в блогах, связанными с Firebase в Ionic 4, Геолокация в Ionic 4, QR-код и сканеры в Ionic 4 и переводы в Ionic 4.
НУЖНЫ БЕСПЛАТНЫЕ IONIC 4 STARTERS?
Вы также можете найти бесплатные стартеры Ionic 4 на нашем сайте enappd.com.
Вы также можете создать свое следующее потрясающее приложение с помощью Ionic 4 Full App.
