Apple Pay, объявленная в сентябре 2014 г. вместе с iPhone 6 и 6 Plus (черт возьми, мы уже на X…), и доступная в Интернете с WWDC 2016, Apple Pay, вероятно, является лучшим решением для бесконтактных платежей в мире.
Вы можете заплатить практически все, что захотите, с помощью цифровой печати (или лица, если вы один из счастливых обладателей iPhone X), и недавнее исследование показывает, что 90% бесконтактных платежей в США задерживается.
Доступен во Франции, где я живу, уже почти 2 года, мне очень нравится использовать его в повседневной жизни. Моя кредитная карта больше не нужна. Как и любой другой продукт Apple, он используется без проблем, без проблем (и опасен для вашего текущего счета 😂).
Поэтому, естественно, я хотел интегрировать его в продукты, которые я создаю как главный управляющий. Les Tontons Livreurs.
Платеж - это то, с чем… сложно работать, если вы хотите иметь дело напрямую с банками и платежными системами, вы… дурак 😛. С самого начала моего стартапа, как и Deliveroo, Kickstarter, Drivy и других единорогов, я использую Stripe, их API (и документация) действительно хорошо спроектированы, они всегда повторяются над новыми функции ... и, конечно же, они позволяют своим клиентам принимать платежи Apple Pay!
Я интегрировал Apple Pay в наше приложение для iOS, очень просто, но не в тему. Мы поговорим об интеграции Apple Pay в Интернет, что определенно представляет собой особый интерес ... так какого черта мне нужно внедрять? Исследования показали, что коэффициент конверсии увеличивается на 63%, когда клиентам не нужно вводить данные своей кредитной карты. 63 процента !!!! QED.
Но здесь есть две проблемы:
- Даже если Stripe позволяет нам тестировать свой сервис без SSL, Apple требует этого. Во-первых, SSL на локальном хосте - это не так просто, более того, вы не можете использовать самозаверяющие сертификаты ... Это действительно раздражает! Я определенно не плачу 10 евро за тестирование чего-то ...
2. Кроме того, вам необходимо зарегистрировать свой домен на панели управления Stripe, чтобы иметь возможность авторизовать Apple Pay для своих клиентов, а затем вам необходимо «подтвердить» этот домен, загрузив файл, который Stripe проверит, и, очевидно, Stripe не может прочитать мои localhost… который… по своему имени local…
Итак, у меня было несколько часов, пытаясь понять, как протестировать Apple Pay в Интернете, и вот мое решение.
Заявление об ограничении ответственности: я буду использовать React + react-stripe-elements с create-react-app Facebook для создания демонстрационного приложения, но учтите, что это решение работает, пока вы используете любой локальный микросервер, который сопоставляется с любым порт вашего localhost. Таким образом, вы можете использовать Angular, Vue.js или любой другой интерфейсный фреймворк / lib!
Настройка проекта
Предполагая, что на вашем компьютере установлено create-react-app, давайте создадим новое приложение с именем stripe-apple-pay-demo..
Давайте добавим несколько изящных элементов дизайна (я не дизайнер вообще) и добавим react-stripe-elements.
Поскольку вы абсолютно не для того, чтобы научиться кодировать / использовать Stripe (даже с Apple Pay), я пропущу весь код, вы найдете все приложение в репозитории github ( ссылка ниже).
Это восхитительный фруктовый магазин 🍏🍌🍋🍒🍍!
Создайте и / или настройте свою учетную запись Stripe и Apple Pay.
Я предполагаю, что у вас уже есть учетная запись Stripe, возьмите свой публикуемый ключ (в разделе Разработчик ›Ключ API).
Затем перейдите в Оплата ›Apple Pay и нажмите Добавить новый домен.
А здесь, к сожалению, нельзя поставить localhost, Stripe нужен реальный URL ...
Нам нужен способ привязать наш локальный хост к глобальному Интернету ...
Настройка сервера python и ngrok!
Пару лет назад, когда я работал с одним из инженеров Twilio над решением проблемы, мне пришлось раскрыть свой код localhost одному из их инженеров службы поддержки. Он познакомил меня с ngrok, вы можете скачать его на официальном сайте (это бесплатно).
ngrok предоставляет доступ к локальным серверам за NAT и межсетевыми экранами в общедоступный Интернет через защищенные туннели.
Зная, что нам нужен 𝜇-сервер, чтобы иметь возможность предоставлять ./well-known/apple-developer-merchantid-domain-association, мы запустим сервер Python 3 на порту 8000, используя
Python -m http. server 8000 (служба http доступна начиная с Python 3.x, если вы работаете на 2.x, используйте python -m SimpleHTTPServer 8000),
Поскольку вы загрузили ngrok на предыдущем шаге, откройте новую вкладку в своем терминале и выполните команду
ngrok http -subdomain=myservice 8000
Он откроет доступ к вашему localhost:8000 https://myservice.ngrok.com, тогда мы сможем загрузить запрошенный файл и поместить его в папку /. well-known.
Теперь вы можете добавить его в свою учетную запись Stripe, вот и все, вы готовы протестировать Apple Pay в Интернете!
Затем выключите свой сервер Python, вырежьте туннель ngrok и перезапустите его на порту 3001 (или на том, который указан вашей командой yarn start), перейдите к https://myservice.ngrok.io и если у вас есть карты в кошельке, и вы готовы протестировать свою интеграцию с Apple Pay в Интернете!
Счастлив. Взлом.
Если эта статья вам поможет, не стесняйтесь аплодировать мне и / или подписывайтесь на меня в Twitter.
