Статьи

Купить время с Braintree v.zero SDK

Эта статья была спонсирована Braintree . Спасибо за поддержку спонсоров, которые делают возможным SitePoint!

Braintree рекламирует себя как предложение «Простые, мощные платежи». Мы уже давно используем Braintree в моей компании KYCK, и я могу засвидетельствовать, насколько легко принимать платежи. В декабре 2013 года Braintree была приобретена PayPal. Не так много изменилось в связи с приобретением до недавнего времени. В качестве первого серьезного изменения Braintree выпустила новый клиентский SDK, предназначенный для упрощения работы и добавления некоторых новых функций.

Новый SDK называется v.zero и предлагает:

  • Новый пользовательский интерфейс Drop-In, который позволяет начинать прием платежей с «всего лишь десятью строками кода».
  • Возможность легко принять PayPal в качестве способа оплаты. Это большая новая функция SDK и, без сомнения, прямой результат приобретения PayPal.
  • Вскоре появилась возможность принимать платежи через Биткойн, благодаря партнерству с Coinbase .
  • Мощный, настраиваемый поток платежей в соответствии с вашими потребностями, когда Drop-In UI не работает.
  • Будущие изменения в SDK будут «легкими». Другими словами, Braintree стремится поддерживать SDK в актуальном состоянии с постоянно меняющейся технологией, не вынуждая разработчиков пересматривать поток платежей.
  • Мобильные платежи One Touch ™ через PayPal и Venmo. One Touch делает прием платежей через мобильное приложение максимально удобным. В этой статье, анонсирующей One Touch, есть отличное видео, рассказывающее об услуге. Если вы разработчик мобильных приложений, это большое дело.

В этом посте я расскажу о некоторых функциях v.zero SDK. Основное внимание будет уделено пользовательскому интерфейсу Drop-In и принятию PayPal, чтобы вы могли быстро приступить к работе.

Приложение

Для того, чтобы принимать платежи, должен быть продукт. Для нашего приложения я хочу привлекательный продукт. Что-то, что каждый хочет или нуждается, что-то, что они стекаются на сайт, чтобы купить. Он ударил меня, как молния посреди ночи: время. Каждый хочет больше времени. Итак, вот что мы собираемся продать. Наши пользователи смогут купить дополнительные часы, чтобы тратить, как они считают нужным в своей занятой жизни. Мы скоро станем базилионерами.

Приложение представляет собой ванильное приложение Rails с Devise для аутентификации. Я не собираюсь проходить через настройку приложения Rails. Вместо этого нашей отправной точкой является приложение Rails с моделью User, которая использует аутентификацию по паролю Devise. Я также добавил Zurb Foundation для легкой укладки. Существует около 1,2 миллиона учебных пособий по настройке Rails и Devise , и я пометил нашу начальную точку («стартовая точка») в репозитории .

У наших пользователей будет очень простой процесс покупки. После входа в систему пользователь может выбрать способ оплаты (кредитная карта или PayPal) и заплатить 10 долларов за 1 час. Для запуска в приложении есть OrdersControllernew

Как работает SDK

Поток платежей Braintree состоит из четырех этапов:

  • Создать учетную запись Braintree.
  • Добавьте библиотеку Braintree Ruby в приложение.
  • Предоставьте клиентский токен своему клиенту (в нашем случае браузер)
  • Получите одноразовый номер метода оплаты от клиента (браузера) после авторизации платежа (Примечание. Если до этого шага вы спрашивали меня, что такое одноразовый номер, я бы сказал: «часто бешеное, маленькое пушистое животное, которое атакует»). без провокаций ». Я многого не знаю.)
  • Создайте транзакцию на Braintree, используя метод оплаты nonce.

Создать учетную запись Braintree

Чтобы использовать Braintree для приема платежей, вы должны зарегистрировать учетную запись Braintree. Рекомендуется начинать с «песочницы» Брейнтри, которая позволяет вам проверять платежи без реального обмена денег. Песочница – находка, позволяющая разработчикам совершенствовать поток платежей в среде, которая отражает реальную вещь.

Перейдите на страницу « Начало работы» и зарегистрируйте учетную запись.

Форма регистрации

Braintree отправит подтверждение по электронной почте, так что получите подтверждение, и мы готовы двигаться дальше.

При первом входе в систему вы попадете на панель инструментов Sandbox, которая выглядит следующим образом:

Панель инструментов Песочницы

Важные биты на этой странице: идентификатор продавца: открытый ключ и закрытый ключ . Эти значения будут использоваться для настройки Braintree SDK в нашем приложении Rails. На самом деле, если вы посмотрите на ту же страницу, есть пример конфигурации Ruby, которую можно скопировать и вставить в ваше приложение.

Получить библиотеку Braintree Ruby

Пример конфигурации Ruby

В Rails этот тип конфигурации обрабатывается в инициализаторе. Однако у нас еще нет класса Braintree К счастью, у Брэйнтри есть Рубигем, который мы можем использовать. Добавьте gem "braintree"Gemfile и bundle install

Создайте config / initializers / braintree.rb со следующим:

 Braintree::Configuration.environment  = ENV['BRAINTREE_ENV']         || :sandbox
Braintree::Configuratio.merchant_id   = ENV['BRAINTREE_MERCHANT_ID'] || 'your merchant id'
Braintree::Configuration.public_key   = ENV['BRAINTREE_PUBLIC_KEY']  || 'your public key'
Braintree::Configuration.private_key  = ENV['BRAINTREE_PRIVATE_KEY'] || 'your private key'

Создать клиентский токен

Когда наши пользователи приходят, чтобы выиграть больше времени, Брейнтри должен знать, кто мы, чтобы получить наши миллионы. Обычно пользователи выбирают способ оплаты и авторизуют платеж, отправляя форму из нашего приложения на серверы Braintree. Клиентский токен будет предоставлен вместе с информацией о пользователе, и он сообщает Braintree, кто мы, идентифицируя наш торговый счет на их стороне. Braintree возвращает способ оплаты nonce, который представляет авторизованный платеж нашему приложению, которое мы обсудим в ближайшее время.

Drop-In UI

Здесь вступает в игру новый интерфейс Drop-In в v.zero SDK. Создайте частичную часть под названием app / views / payment / _form.html.erb :

 <form id="checkout" method="post" action="/checkout">
  <div id="dropin"></div>
  <input type="submit" value="Pay $10">
</form>

<script type="text/javascript">
  function setupBT() {
    braintree.setup("<%=@client_token%>", 'dropin', {
      container: 'dropin'
    });
  }
  if (window.addEventListener)
    window.addEventListener("load", setupBT, false);
  else if (window.attachEvent)
    window.attachEvent("onload", setupBT);
  else window.onload = setupBT;
  </script>
</script>

Эта formдокументов Брэйнтри . Здесь добавлен блок script Я хотел сохранить все это в одном файле, чтобы было понятнее для этого урока. Токен создается в OrdersController#new

 def new
  @client_token = Braintree::ClientToken.generate
end

Те же самые документы Braintree показывают необходимость добавления файла JavaScript Braintree, так что давайте сделаем это сейчас. Загрузите файл braintree.js в каталог vendor / assets / javascripts и добавьте его в наш app / assets / javascripts / application.js :

 //= require braintree (ADD THIS LINE)
//= require_tree . (This line already exists)

Теперь переменная braintreesetupBT

Если вы запустите сервер (и зарегистрируете учетную запись в приложении), интерфейс Drop-In отобразится и выглядит довольно хорошо:

Drop-In UI

Похоже, у нас есть возможность принимать PayPal и кредитные карты из коробки. Но эта форма выглядит немного странно без поля CVV. Как мы можем добавить CVV?

Мы можем добавить CVV к нашей форме, настроив ее в песочнице Braintree. После входа в систему выберите «Обработка» в меню «Настройки»:

Меню настроек

На этой странице есть множество параметров конфигурации, в том числе:

  • Duplicate Transaction Checking, которая останавливает создание транзакции, если она совпадает с транзакцией в течение последних 30 секунд.
  • Принять Венмо .
  • Базовая защита от мошенничества, включая CVV.
  • Настраиваемые поля.
  • Квитанции электронной почты.
  • Многое, многое другое

Чтобы добавить CVV в форму, нам нужно настроить правила. Нажмите кнопку «Изменить» под «CVV» и добавьте свои правила. Вот мой:

Правила CVV

С настроенными правилами CVV форма теперь имеет поле CVV:

Форма CVV

Это довольно круто.

Способ оплаты Nonce

Перейдем к последнему этапу нашего основного процесса: получим одноразовый способ оплаты от Braintree, который мы предоставим нашему серверу Rails, а затем вернемся в Braintree, чтобы добавить платеж.

Я хочу, чтобы это было максимально просто для нашего первого платежа. Таким образом, мы изменим action/orders@params Измените форму частично:

 <%= form_tag orders_path, method: "post" do %>
  <div id="dropin"></div>
  <input type="submit" value="Pay $10">
<% end %>
<%= @params %> <!-- We'll remove this later, just testing now -->

Форма теперь немного добавлена ​​в Rails, поэтому ошибок токена аутентификации не будет. Кроме того, я добавил @params

POSTing to /ordersOrdersController#create Начиная просто:

 def create
  @params = params
  render action: :new
end

Чтобы проверить форму с помощью кредитной карты, нам нужен поддельный номер. Вы можете получить поддельные номера кредитных карт с этой страницы на сайте PayPal. (Они не работают для реальных вещей … не то чтобы я их пробовал или что-то в этом роде.)

Заполните форму и посмотрите, что произойдет.

Форма заполнена

Я сразу заметил следующую крутость:

  • Это не позволит мне ввести мусор в кредитную карту или другие поля. Некоторая базовая, но надежная проверка входных данных поставляется с формой бесплатно. Ницца.
  • Текстовые метки полезны и интуитивно понятны. На самом деле, это приятный опыт, и он лучше, чем форма, на разработку и реализацию которой потребовались годы KYCK.

Отправка формы, размещенной в нашем методе create

 {"utf8"=>"✓",
 "authenticity_token"=>"Yxt5NzsrKB4u/rEjmR3A7pIwVbcpGCL/lEBTMx7H8x0=",
 "payment_method_nonce"=>"1e6dfd62-f92e-4703-8807-b3f6b9b28c84",
 "action"=>"create",
 "controller"=>"orders"}

Там это … способ оплаты одноразовый. Вы можете читать о nonces все, что вы хотите, но увидеть дикого человека – это действительно захватывающий опыт.

Создать транзакцию Braintree

Ну, это довольно захватывающе. Мы уже на последнем этапе нашего теста приема платежей. На данный момент, это просто вопрос создания транзакции на Braintree. Это довольно легко, как оказалось. Измените OrdersController#create

 def create
  nonce = params[:payment_method_nonce]
  render action: :new and return unless nonce
  result = Braintree::Transaction.sale(
    amount: "10.00",
    payment_method_nonce: nonce
  )

  flash[:notice] = "Sale successful. Head to Sizzler" if result.success?
  flash[:alert] = "Something is amiss. #{result.transaction.processor_response_text}" unless result.success?
  redirect_to action: :new
end

Вернитесь и заполните свою форму с этим поддельным номером кредитной карты и BOOM! Мы можем принимать платежи.

Sizzler

Введите PayPal

Давайте посмотрим, насколько легко использовать PayPal, как использовать поддельный номер кредитной карты. Вернитесь в приложение и вместо заполнения формы нажмите большую синюю кнопку PayPal. Вы должны увидеть всплывающее окно с просьбой войти в систему:

Логин PayPal

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

условия

Нажмите «Согласен», и вы вернетесь к форме. Изменения отражают то, что вы используете PayPal

Использование PayPal

Нажмите «Pay $ 10» и посмотрите, как PayPal принимается. ММММ … это хорошая оплата.

Считать наши деньги

Если вы направитесь к приборной панели Braintree Sandbox, вы увидите, что мы движемся вверх!

Деньги!

Человек, сегодня был огромен для нас!

Следующие шаги

В этой статье рассказывается о том, что можно сделать с помощью Braintree v.zero SDK. Если бы мы хотели поднять наше приложение для покупки времени на новый уровень, мы могли бы:

  • Храните идентификаторы клиентов Braintree на наших локальных пользователях, что позволяет этим пользователям повторно использовать способы оплаты. Braintree предлагает хранилище, в котором будут храниться токены для каждого из способов оплаты, добавленных пользователем. Затем клиент может выбрать один из этих способов оплаты, вернувшись, чтобы купить больше времени.
  • Контролируйте жизненный цикл транзакций для транзакций нашего приложения. Процесс обработки транзакций Braintree задействован, и вы должны знать об этом, если используете Braintree. Вы можете рассчитаться, освободить, возместить средства, среди других действий. Изучи это, живи этим, люби это.
  • Предлагаем подписки нашим клиентам. Может быть, они могут получать 10 часов в месяц за 90 долларов или что-то в этом роде. Braintree предлагает повторяющиеся счета, которые удивительно просты в обращении. Здесь живет настоящий сыр.

Может быть, у вас есть другие предложения о том, где мы можем потратить время на хокинг? Дайте мне знать, что нам делать дальше, и, возможно, я напишу статью для наиболее востребованного предмета.

Помните, что источник этой статьи находится в этом хранилище .

В то же время, следите за этими одноразовыми номерами. Они могут прыгнуть в любое время.