Купить время с 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::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'

 <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>

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

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

 <%= 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 -->

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

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

 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