Getting started with BrainTree Payment Gateway in Rails

Braintree is said to make easy to accept payments in your app or website. Get integrated quickly using our guides and selecting from our range of client SDKs and server SDKs.

Client Configuration: In our case its Javascript

In a nutshell, Braintree’s JavaScript SDK requires you to load braintree.js and initialize it with some options.

Use the direct link

You can also load braintree.js directly from here. Once loaded, braintree will be available on the global namespace.

HTML
<script src="https://js.braintreegateway.com/js/braintree-2.24.1.min.js"></script>

This file is distributed as a UMD bundle to support a variety of module systems. This means you can use tools like Browserify, Webpack, or Require.js to include it in your project.

Set Up Your Client

We want custom payment form: Hosted Fields

Customize your checkout to fit the look and feel of your website.

Using a Custom integration, you can take advantage of Hosted Fields to preserve your user experience while maintaining SAQ A compliance.

For a merchant to be eligible for the easiest level of PCI compliance—SAQ A—payment fields cannot be hosted on your checkout page

All payment fields must be hosted on an external payment gateway’s domain and presented to the user in a frame or with a redirect. These payment fields are:

  • Card number
  • CVV
  • Expiration date
  • Postal code

Hosted Fields renders an iframe to handle input for each field where your customer enters card details. This provides you with the ability to customize the look and feel of your web page while ensuring that you are compliant with PCI requirements.

Screenshot from 2016-05-28 12:42:24

%form#my-sample-form{:action => "/", :method => "post"}
  .form-group
    %input.form-control{placeholder: 'Name on Card*'}
  .form-group
    .form-control#card-number
  .row
    .col-xs-12.col-md-5
      .form-group
        .form-control#cvv
    .col-xs-12.col-md-7
      = link_to 'What is this?', 'javascript::void(0)', id: 'payment-cvv-tip'
      #payment-cvv-tip-section
        = image_tag 'cvv.jpg'
  .row
    .col-xs-12.col-md-6
      .form-group
        .form-control#expiration-month
    .col-xs-12.col-md-6
      .form-group
        .form-control#expiration-year
  .form-group
    #payment-disclaimer
      By clicking "Make Payment" you acknowledge that there are no
      refunds and this does not guarantee you employment.
  .actions
    %input{:type => "submit", :value => "Pay", class: 'btn btn-primary pull-right payment-btn' }/
  .clearfix

  #payment-error
    %noscript JavaScript is not enabled and is required for this form. First enable it in your web browser

And corresponding JS code will be

%script{:src => "https://js.braintreegateway.com/js/braintree-2.24.1.min.js"}
:javascript
  braintree.setup("#{client_token}", "custom", {
    id: "my-sample-form",
    hostedFields: {
      number: {
        selector: "#card-number",
        placeholder: 'Card Number*'
      },
      cvv: {
        selector: "#cvv",
        placeholder: 'Security Code*',
        styles: {'input': {'font-weight': 300}}
      },
      expirationMonth: {
        selector: "#expiration-month",
        placeholder: 'Expiration Month*'
      },
      expirationYear: {
        selector: "#expiration-year",
        placeholder: 'Expiration Year*'
      },
      postalCode: {
        selector: "#postal-code",
        placeholder: 'Billing Zip Code*'
      }
    }
  });

How to get YOUR_CLIENT_TOKEN?

For this you are gonna need

gem 'braintree', '> 2.56.0' # previous version has no `ClientToken` class
# controller helper method
helper_method :client_token
def client_token
  Braintree::ClientToken.generate
end

 

Receive a payment method nonce from your client

Once your client successfully obtains a customer payment method, it receives a payment_method_nonce representing customer payment authorization, which it then sends to your server.

Create a transaction

result = Braintree::Transaction.sale( :amount => "10.00", 
  :payment_method_nonce => nonce_from_the_client, 
  :options => { 
    :submit_for_settlement => true 
   })

 

 

 

 

Source

https://developers.braintreepayments.com/guides/client-sdk/setup/javascript/v2

https://developers.braintreepayments.com/?_ga=1.163006527.2006074051.1463990615

https://developers.braintreepayments.com/start/hello-client/javascript/v2

https://developers.braintreepayments.com/guides/hosted-fields/overview/javascript/v2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s