将Braintree随机数传递给轨道上的红宝石控制器

Question

我目前使用braintree托管字段将信用卡嵌入到我的应用程序中。我正在看我如何通过付款nonce从视图到控制器。 javascript我似乎触发braintree api并返回一个nonce到我的警报，但我只需要现在推这通过控制器执行最后一块代码

内控制器创建方法我有

def create 
    result = Braintree::PaymentMethod.create(
     :customer_id => current_user.customer_cim_id, 
     :payment_method_nonce => nonce_from_the_client, 
     :cardholder_name => "#{current_user.first_name} #{current_user.last_name}", 
     :options => { 
      :make_default => true, 
      :fail_on_duplicate_payment_method => true 
     } 
    ) 

新视图

- title t('.title') 
= form_for(@payment_method, :url => myaccount_payment_methods_path(@payment_method), :html => {:id => 'cardForm'}) do |f| 
    = render :partial => 'form', :locals => {:f => f} 
/Load Hosted Fields component. 
%script{:src => '//js.braintreegateway.com/web/3.0.0-beta.10/js/hosted-fields.min.js'} 

形式视图

.mdl-grid 
    .panel 
    %header.panel__header 
     %h1 Card Payment 
    .panel__content 
     .textfield--float-label 
     %label.hosted-field--label{:for => "card-number"} 
      %i.material-icons credit_card 
      Card Number 
     #card-number.hosted-field 
     .textfield--float-label 
     %label.hosted-field--label{:for => "expiration-date"} 
      %i.material-icons date_range 
      Expiration Date 
     #expiration-date.hosted-field 
     .textfield--float-label 
     %label.hosted-field--label{:for => "cvv"} 
      %i.material-icons lock 
      CVV 
     #cvv.hosted-field 
    %footer.panel__footer 
     = f.submit class: 'pay-button', id: 'button-pay', disabled: true 

的application.js

var form = document.querySelector('#cardForm'); 
var submit = document.querySelector('input[type="submit"]'); 

braintree.client.create({ 
    authorization: 'sandbox_92dswc7q_mbmb637xwpzgxbrd' 
}, function (err, clientInstance) { 
    if (err) { 
     console.error(err); 
     return; 
    } 

    // Create input fields and add text styles 
    braintree.hostedFields.create({ 
     client: clientInstance, 
     styles: { 
      'input': { 
       'color': '#282c37', 
       'font-size': '16px', 
       'transition': 'color 0.1s', 
       'line-height': '3' 
      }, 
      // Style the text of an invalid input 
      'input.invalid': { 
       'color': '#E53A40' 
      }, 
      // placeholder styles need to be individually adjusted 
      '::-webkit-input-placeholder': { 
       'color': 'rgba(0,0,0,0.6)' 
      }, 
      ':-moz-placeholder': { 
       'color': 'rgba(0,0,0,0.6)' 
      }, 
      '::-moz-placeholder': { 
       'color': 'rgba(0,0,0,0.6)' 
      }, 
      ':-ms-input-placeholder ': { 
       'color': 'rgba(0,0,0,0.6)' 
      } 

     }, 
     // Add information for individual fields 
     fields: { 
      number: { 
       selector: '#card-number', 
       placeholder: '1111 1111 1111 1111' 
      }, 
      cvv: { 
       selector: '#cvv', 
       placeholder: '123' 
      }, 
      expirationDate: { 
       selector: '#expiration-date', 
       placeholder: '10/2019' 
      } 
     } 
    }, function (err, hostedFieldsInstance) { 
     if (err) { 
      console.error(err); 
      return; 
     } 

     hostedFieldsInstance.on('validityChange', function (event) { 
      // Check if all fields are valid, then show submit button 
      var formValid = Object.keys(event.fields).every(function (key) { 
       return event.fields[key].isValid; 
      }); 

      if (formValid) { 
       $('.pay-button').prop("disabled", false); 
      } else { 
       $('.pay-button').prop("disabled", true); 
      } 
     }); 

     hostedFieldsInstance.on('empty', function (event) { 
      $('header').removeClass('header-slide'); 
      $('#card-image').removeClass(); 
      $(form).removeClass(); 
     }); 

     hostedFieldsInstance.on('cardTypeChange', function (event) { 
      // Change card bg depending on card type 
      if (event.cards.length === 1) { 
       $(form).removeClass().addClass(event.cards[0].type); 
       $('#card-image').removeClass().addClass(event.cards[0].type); 
       $('header').addClass('header-slide'); 

       // Change the CVV length for AmericanExpress cards 
       if (event.cards[0].code.size === 4) { 
        hostedFieldsInstance.setPlaceholder('cvv', '1234'); 
       } 
      } else { 
       hostedFieldsInstance.setPlaceholder('cvv', '123'); 
      } 
     }); 

     submit.addEventListener('click', function (event) { 
      event.preventDefault(); 

      hostedFieldsInstance.tokenize(function (err, payload) { 
       if (err) { 
        console.error(err); 
        return; 
       } 

       // This is where you would submit payload.nonce to your server 
       alert('Got a nonce: ' + payload.nonce); 
       // If this was a real integration, this is where you would 
       // send the nonce to your server. 
       console.log('Got a nonce: ' + payload.nonce); 
      }); 
     }, false); 
    }); 
}); 

Answer 1

_{全面披露：我在布伦特里工作。如果您有任何其他问题，请随时联系support。}

在application.js中的alert行之后，您会希望向您的服务器发送包含付款方式随机数的请求。例如，你可以使用Ajax做到这一点：

$.ajax({ type: "POST", url: your_payment_url, data: {"payment_method_nonce":payload.nonce} });

那么你的Ruby on Rails的控制器中，您可以使用的付款方式的随机数在请求完成交易打电话Transaction.sale。 有关托管领域的更多信息，请查看此link。在跳马问题

编辑：

如果您使用库，你可以无需支付现时每次都向用户收取费用。创建客户后（通过控制面板或通过Customer.create，您可以直接通过Customer对象的payment_methods属性检索payment_method_token。稍后向用户收费时，请在您的服务器上检索其payment_method_token并呼叫Transaction.sale，并传入payment_method_token。

result = Braintree::Transaction.sale(
    :amount => "your_amount", 
    :payment_method_token => "payment_method_token" 
)