braintree使用

This article was sponsored by Braintree. Thank you for supporting the sponsors who make SitePoint possible!

本文由Braintree赞助。 感谢您支持使SitePoint成为可能的赞助商！

Braintree touts itself as offering “Simple, powerful payments.” We’ve been using Braintree at my company, KYCK, for ages now and I can attest how easy it makes accepting payments. In December of 2013, Braintree was acquired by PayPal. Not much changed due to the acquisition until recently. As the first major change, Braintree has released a new client SDK aimed at making things easier and adding some new features.

Braintree自称为提供“简单，强大的付款”。 多年来，我们一直在我的公司KYCK使用Braintree，我可以证明它使接受付款变得多么容易。 2013年12月，Braintree被PayPal收购。 直到最近由于收购而变化不大。 作为第一个重大更改，Braintree发布了一个新的客户端SDK，旨在使事情变得更轻松并添加一些新功能。

The new SDK is called “v.zero,” and it offers:

新的SDK称为“ v.zero”，它提供：

• A new Drop-In UI that allows you to start accepting payments with “as little as ten lines of code.”
  新的Drop-In UI，使您可以开始使用“仅十行代码”就可以接受付款。
• The ability to easily accept PayPal as a payment method. This is the big, new feature of the SDK, and, no doubt, a direct result of the PayPal acquisition.
  轻松接受PayPal作为付款方式的能力。 这是SDK的一大新功能，毫无疑问，这是收购PayPal的直接结果。

• Soon, the ability to accept payments via Bitcoin, through a partnership with Coinbase.

  很快， 通过与Coinbase的合作伙伴关系，可以通过比特币接受付款 。

• Powerful, customizable payment flow to fit your needs when the Drop-In UI doesn’t work.
  当Drop-In UI不起作用时，强大的可自定义付款流程可满足您的需求。
• Future changes to the SDK that will be “easy.” In other words, Braintree aims to keep the SDK current with constantly changing technology without forcing developers to overhaul their payment flow.
  对SDK的将来更改将“轻松”进行。 换句话说，布伦特里(Braintree)旨在通过不断变化的技术使SDK保持最新状态，而不会强迫开发人员检查其支付流程。

• One Touch™ mobile payments with PayPal and Venmo. One Touch makes accepting payments via your mobile app as seamless as possible. This article announcing One Touch has a great video explaining the service. If you are a mobile developer, this is a big deal.

  使用PayPal和Venmo的One Touch™移动支付。 一键式通过您的移动应用程序尽可能无缝地接受付款。 宣布One Touch的这篇文章有一段精彩的视频介绍了该服务。 如果您是移动开发人员，那么这很重要。

In this post, I’ll walk through some of the features of the v.zero SDK. Most of the focus will be on the Drop-In UI and accepting PayPal, so you can get up and running fast.

在本文中，我将逐步介绍v.zero SDK的一些功能。 大多数重点将放在Drop-In UI和接受PayPal上，因此您可以快速启动并运行。

应用程序 (The Application)

In order to accept payments, there has to be a product. For our app, I want a compelling product. Something that everyone wants or needs, something that they’ll flock to the site to buy. It hit me like a lightning bolt in the middle of the night: Time. Everyone wants more time. So, that’s what we’re going to sell. Our users will be able to buy extra hours to spend as they see fit in their busy lives. We are going to be bazillionaires in no time.

为了接受付款，必须有一种产品。 对于我们的应用程序，我想要一个引人注目的产品。 每个人都想要或需要的东西，他们会涌向该网站购买的东西。 它像半夜的闪电般击中了我：时间。 每个人都想要更多的时间。 因此，这就是我们要出售的东西。 我们的用户将可以购买额外的时间来度过忙碌的生活。 我们将很快成为亿万富翁。

The app is a vanilla Rails app with Devise for authentication. I am not going to walk through setting up the Rails app. Instead, our starting point is a Rails app with a User model that uses Devise’s password authentication. I’ve also added Zurb Foundation for some easy styling. There are roughly 1.2 million tutorials on how to setup Rails and Devise, and I have tagged our starting point (“starting_point”) in the repository.

该应用程序是带有Devise进行身份验证的香草Rails应用程序。 我不会逐步设置Rails应用程序。 取而代之的是，我们的起点是一个具有使用Devise密码验证的用户模型的Rails应用。 我还添加了Zurb Foundation，以简化样式。 关于如何设置 Rails和Devise的教程大约有120万本，我已经在存储库中标记了我们的起点(“ starting_point”)。

Our users will have a very simple purchasing flow. Once logged in, the user can choose a payment method (credit card or PayPal) and pay $10 for 1 hour. To start, the application has an OrdersController with a new action and view.

我们的用户将拥有非常简单的购买流程。 登录后，用户可以选择一种付款方式(信用卡或PayPal)，并在1小时内支付10美元。 首先，应用程序具有一个带有new动作和视图的OrdersController 。

SDK的工作方式 (How the SDK Works)

The Braintree payment flow consists of four steps:

Braintree付款流程包括四个步骤：

• Create a Braintree Account.
  创建一个Braintree帐户。
• Add the Braintree Ruby Library to the application.
  将Braintree Ruby库添加到应用程序。
• Provide a client token to your client (meaning, the browser, in our case)
  向客户提供客户令牌(在我们的情况下，即浏览器)
• Receive a payment method nonce from the client (browser) after a payment is authorized (Note: Before this step, if you had asked me what a nonce is, I would’ve said, “an often rabid, small, furry animal that attacks without provocation.” There’s a lot I don’t know.)
  在授权付款后，从客户(浏览器)那里收到一种付款方式的随机数(注意：在此步骤之前，如果您问我随机数是什么，我会说：“一种经常狂犬病的小毛茸茸动物没有挑衅。”我不知道很多。
• Create a transaction on Braintree using the payment method nonce.
  使用付款方式现时在Braintree上创建交易。

创建一个Braintree帐户 (Create a Braintree Account)

In order to use Braintree to accept payments, you have to sign up for a Braintree account. It’s recommended to start in the Braintree “Sandbox,” which allows you to test payments without money actually exchanging hands. The Sandbox is a godsend, allowing developers to perfect the payment flow in an environment that mirrors the real thing.

为了使用Braintree接受付款，您必须注册一个Braintree帐户。 建议从Braintree“沙盒”开始，它可以让您测试付款而无需实际换手。 沙盒是天赐的礼物，它使开发人员能够在反映真实事物的环境中完善支付流程。

Head over to the Get Started page and sign up for an account.

转到“ 入门”页面并注册一个帐户。

Braintree will send a confirmation email, so get confirmed and we’re ready to move forward.

Braintree将发送一封确认电子邮件，因此得到确认，我们准备前进。

The first login drops you on the Sandbox Dashboard, which looks like this:

首次登录将您带到Sandbox仪表板上，如下所示：

The important bits on this page are: Merchant ID:, Public Key, and Private Key. These values will be used to configure the Braintree SDKs in our Rails app. In fact, if you look on that same page, there is an example Ruby configuration that can be copied and pasted into your app.

此页面上的重要位是： 商户ID ：，公钥和私钥 。 这些值将用于在Rails应用程序中配置Braintree SDK。 实际上，如果您在同一页面上查看，就会有一个示例Ruby配置，可以将其复制并粘贴到您的应用程序中。

获取Braintree Ruby库 (Get the Braintree Ruby Library)

In Rails, this kind of configuration is handled in an initializer. However, we don’t have a Braintree class in our codebase yet. Luckily, Braintree has a Rubygem for us to utilize. Add gem "braintree" to the Gemfile and bundle install.

在Rails中，这种配置在初始化程序中处理。 但是，我们的代码库中还没有Braintree类。 幸运的是，布伦特里有一个Rubygem供我们使用。 将gem "braintree"添加到Gemfile并bundle install 。

Create a config/initializers/braintree.rb with the following:

使用以下命令创建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'

生成客户令牌 (Generate a Client Token)

When our users show up to buy more time, Braintree has to know who we are in order to get us our millions. Basically, the users will select a payment method and authorize a payment by submitting a form from our app to Braintree’s servers. The client token will be provided alongside the user’s information, and it tells Braintree who we are by identifying our merchant account on their side. Braintree returns a payment method nonce that represents the authorized payment to our application, which we’ll discuss in a moment.

当我们的用户出现来购买更多时间时，Braintree必须知道我们是谁，才能为我们赢得数百万美元。 基本上，用户将选择付款方式并通过将应用程序中的表格提交给Braintree的服务器来授权付款。 客户令牌将与用户信息一起提供，并通过识别我们在他们那边的商家帐户来告诉Braintree我们是谁。 Braintree向我们的应用程序返回了代表授权付款的付款方式随机数，我们将在稍后讨论。

嵌入式UI (Drop-In UI)

Here is where the new Drop-In UI in the v.zero SDK comes into play. Create a partial called app/views/payment/_form.html.erb:

这是v.zero SDK中新的Drop-In UI起作用的地方。 创建一个名为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>

This form is pulled directly from the Braintree docs. The script block is added here to handle the generation of the client token. I wanted to keep it all in one file to make it clearer for this tutorial. The token is created in the OrdersController#new method:

此form直接从Braintree文档中提取。 此处添加了script块来处理客户端令牌的生成。 我想将所有内容保存在一个文件中，以使本教程更加清楚。 令牌是在OrdersController#new方法中创建的：

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

Those same Braintree docs show the need to add the Braintree javascript file, so let’s do that now. Download the braintree.js file into the vendor/assets/javascripts directory and add it to our app/assets/javascripts/applications.js:

这些相同的Braintree文档表明需要添加Braintree javascript文件，所以现在就开始做。 将braintree.js文件下载到vendor / assets / javascripts目录中，并将其添加到我们的app / assets / javascripts / applications.js中 ：

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

Now, the braintree javascript variable in our setupBT function will exist.

现在， setupBT函数中的braintree javascript变量将存在。

If you run the server (and sign up for an account in the app), the Drop-In UI renders and looks pretty good:

如果您运行服务器(并在应用程序中注册帐户)，则Drop-In UI会呈现并看起来非常不错：

It looks like we have the ability to accept PayPal and credit cards out of the box. But that form looks a bit odd without a CVV field. How can we add CVV?

看来我们有能力开箱即用地接受PayPal和信用卡。 但是，如果没有CVV字段，则该表格看起来有些奇怪。 我们如何添加CVV？

We can add CVV to our form by configuring it in the Braintree Sandbox. Once logged in, Choose “Processing” from the “Settings” menu:

我们可以通过在Braintree沙箱中配置CVV到表单中。 登录后，从“设置”菜单中选择“处理中”：

This page has a metric ton of configuration options, including:

此页面具有大量的配置选项，包括：

• Duplicate Transaction Checking, which stops a transaction from being created if it matches one within the last 30 seconds.
  重复事务检查，如果在最近30秒内匹配一个事务，则将阻止创建该事务。

• Accept Venmo.

  接受Venmo 。

• Basic Fraud Protection, including CVV.
  基本欺诈保护，包括CVV。
• Custom Fields.
  自定义字段。
• Email Receipts.
  电子邮件收据。
• Much, much more.
  更多，更多。

To get CVV added to the form, we’ll need to configure the rules. Click the “Edit” button under “CVV” and add your rules. Here’s mine:

要将CVV添加到表单中，我们需要配置规则。 单击“ CVV”下的“编辑”按钮，然后添加您的规则。 这是我的：

With the CVV rules configured, the form now has the CVV field:

配置了CVV规则后，表单现在具有CVV字段：

That is pretty cool.

太酷了。

付款方式 (Payment Method Nonce)

On to the last step in our basic process: getting a payment method nonce from Braintree that we will provide to our Rails server and then back to Braintree to add a payment.

进入基本流程的最后一步：从Braintree获取付款方式随机数，我们将其提供给Rails服务器，然后返回Braintree添加付款。

I want this to be as simple as possible for our first payment. As such, we’ll change the action on our form to post to /orders and we’ll render out the @params. Change the form partial:

我希望我们的第一笔付款尽可能简单。 这样，我们将更改表单上的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 -->

The form is now Rails-ed up a bit, that way there won’t be any authenticity token errors. Also, I added @params so we can get a good look at what is provided to the server by the Braintree form.

现在，该表单已被Rails修改，这样就不会出现任何真实性令牌错误。 另外，我添加了@params以便我们可以更好地了解Braintree表单提供给服务器的内容。

POSTing to /orders is going to expect OrdersController#create to exist. Starting simple:

发布到/orders将期望OrdersController#create存在。 从简单开始：

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

To test the form with a credit card, we need a fake number. You can grab fake credit card numbers from this page on the PayPal site. (They don’t work for real stuff… not that I tried them or anything.)

要使用信用卡测试表格，我们需要一个假号码。 您可以从PayPal网站上的此页面上获取伪造的信用卡号。 (它们不适用于真正的东西……不是我尝试过它们或其他方法。)

Fill out the form and see what happens.

填写表格，看看会发生什么。

I immediately noticed the following coolness:

我立即注意到以下凉爽之处：

• It won’t let me type any garbage into the Credit Card or other fields. Some basic, but solid, input validation comes with the form for free. Nice.
  它不会让我在“信用卡”或其他字段中输入任何垃圾内容。 该表格免费提供一些基本但可靠的输入验证。 真好
• The text labels are helpful and intuitive. It’s a nice experience, in fact, and better than a form that took KYCK ages to design and implement.
  文本标签非常有用且直观。 实际上，这是一种很好的体验，并且比花了KYCK多年的时间设计和实施的形式要好。

Submitting the form posted to our create method and rendered the params in the view:

将表单提交到我们的create方法，并在视图中呈现参数：

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

There it is… the payment method nonce. You can read about nonces all you want, but seeing one in the wild is truly a breathtaking experience.

那里...付款方式随机数。 您可以随意阅读有关随机数的信息，但是在野外看到一个随机数确实是一种令人叹为观止的体验。

创建Braintree交易 (Create a Braintree Transaction)

Well, this is pretty exciting. We are already on to the last step in our test run of accepting payments. At this point, it’s simply a matter of creating a transaction on Braintree. This is pretty easy, as it turns out. Change OrdersController#create like so:

好吧，这非常令人兴奋。 我们已经进入接受付款测试的最后一步。 此时，只需在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

Go back and fill in your form with that fake credit card number and BOOM! We can accept payments.

返回并使用该假信用卡号和BOOM填写您的表格！ 我们可以接受付款。

输入贝宝 (Enter PayPal)

Let’s see if the using PayPal is as easy as using a fake credit card number. Go back to the app and, instead of filling out the form, click that big, blue PayPal button. You should see a popup asking you to sign in:

让我们看看使用PayPal是否像使用伪造的信用卡号一样容易。 返回应用程序，而不是填写表单，而是单击蓝色的大贝宝按钮。 您应该会看到一个弹出窗口，要求您登录：

Notice it places an overlay on the main form, which is sassy. Once logged in, you’re told exactly what the vendor is asking:

请注意，它在主要表单上放置了一个时髦的叠加层。 登录后，将确切告知您供应商的要求：

Click ‘Agree’, and you’re returned to the form. It changes to reflect that you’re using PayPal

点击“同意”，您将返回到表单。 它发生变化以反映您正在使用PayPal

Click “Pay $10” and watch PayPal being accepted. MMMM…that is some good payment.

单击“支付10美元”，然后查看接受PayPal。 MMMM ...这是一个不错的付款。

数钱 (Counting Our Money)

If you head over to the Braintree Sandbox dashboard, you can see that we are movin’ on up!

如果您转到Braintree Sandbox仪表板，您可以看到我们正在继续前进！

Man, today was HUGE for us!

伙计，今天对我们来说是巨大的！

下一步 (Next Steps)

This article scratches the surface of what can be done with the Braintree v.zero SDK. If we wanted to take our time-buying application to the next level, we might:

本文介绍了Braintree v.zero SDK可以完成的工作。 如果我们想将按时间购买的应用程序提高到一个新的水平，我们可以：

• Store Braintree customer IDs on our local Users, allowing these users to reuse payment methods. Braintree offers the Vault that will store tokens for each of the payment methods a user adds. The customer can then choose one of these payment methods when returning to buy more time.

  将Braintree客户ID存储在我们的本地用户上，以允许这些用户重复使用付款方式。 Braintree提供的保管箱将存储用户添加的每种付款方式的令牌。 然后，客户在返回购买更多时间时可以选择这些付款方式之一。

• Control the transaction life cycle for our application’s transactions. The Braintree transaction processing flow is involved and you need to know it if you’re using Braintree. You can settle, release, refund funds, among other actions. Learn it, live it, love it.

  控制应用程序交易的交易生命周期。 涉及Braintree事务处理流程 ，如果您正在使用Braintree，则需要知道它。 您可以清算，释放，退款资金以及其他操作。 学习，生活，热爱它。

• Offer subscriptions to our customers. Maybe they can get 10 hours a month for $90 or something. Braintree offers recurring billing that is surprisingly easy to handle. This is where the real cheese lives.

  向我们的客户提供订阅。 也许他们每月可以花90美元左右的价格获得10个小时的服务。 Braintree提供的定期计费出奇地易于处理。 这就是真正的奶酪所在的地方。

Maybe you have other suggestions for where we can take our time hawking? Let me know what we should do next, and maybe I’ll pen an article for the most requested item.

也许您对我们可以在哪里花时间做其他建议？ 让我知道下一步该怎么做，也许我会为最需要的项目写一篇文章。

Remember, the source for this article is in this repository.

请记住，本文的来源在此存储库中 。

In the meantime, watch out for those nonces. They can spring at any time.

同时，提防那些随机性。 他们可以随时弹跳。

翻译自: https://www.sitepoint.com/buy-time-braintree-v-zero-sdk/

braintree使用