使用Braintree.js創建具有CC信息的用戶

Question

我試圖通過braintree.js在一個表單中提交創建新用戶（設計）和支付令牌的表單。我的html表單看起來像這樣。

<div class="container"> 
    <h2 class='registration'>Sign up</h2> 
    <%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: {:class => 'col-sm-12'}) do |f| %> 
    <%= devise_error_messages! %> 

    <div class="form-horizontal"> 
     <%= f.label :email, class: "col-sm-3 control-label" %> 
     <div class="col-sm-7"> 
     <%= f.email_field :email, class: "form-control" %> 
     </div> 
    </div><br /><br /> 

    <div class="form-horizontal"> 
     <%= f.label :full_name, class: "col-sm-3 control-label" %> 
     <div class="col-sm-7"> 
     <%= f.text_field :full_name, class: "form-control",autofocus: true %> 
     </div> 
    </div><br /><br /> 

    <div class="form-horizontal"> 
     <%= f.label :password, class: "col-sm-3 control-label" %> 
     <div class="col-sm-7"> 
     <%= f.password_field :password, autocomplete: "off", class: "form-control" %> 
     </div> 
    </div><br /><br /> 

    <div class="form-horizontal"> 
     <%= f.label :password_confirmation, class: "col-sm-3 control-label" %> 
     <div class="col-sm-7"> 
     <%= f.password_field :password_confirmation, autocomplete: "off", class: "form-control" %> 
     </div> 
    </div><br /><br /> 

     <input data-braintree-name="number" value="4111111111111111"> 
     <input data-braintree-name="cvv" value="100"> 

     <input data-braintree-name="expiration_month" value="10"> 
     <input data-braintree-name="expiration_year" value="2020"> 

     <div id="braintree-container"></div> 

     <script src="https://js.braintreegateway.com/v2/braintree.js"></script> 
     <script> 
     braintree.setup("MY BRAINTREE TOKEN", 
         "custom", 
          { 
          container: "braintree-container", 
          paymentMethodNonceInputField: "payment-method-nonce"} 
     ); 
     var client = new braintree.api.Client({clientToken: <%= @client_token %>}); 
     client.tokenizeCard({number: "4111111111111111", expirationDate: "10/20"}, function (err, nonce) { 

     </script> 

    <div class="form-group"> 
     <div class="col-sm-offset-2 col-sm-6"> 
     <%= f.submit "Sign up", class: "btn btn-primary form-registration", id: "user-form-submit" %> 
     </div> 
    </div><br /><br /> 
    <% end %> 
</div> 

我認爲應該發生什麼，當我提交這是從。 Rails創建一個新用戶。然後Braintree.js通過CC信息向他們的服務發出請求，併發送帶有值的params [：payment method_nonce]。但是會發生什麼情況是用戶被創建，但我沒有收到有關payment_method_nonce的信息。

你可能會問爲什麼我想從一個頁面添加所有這些信息？我計劃在用戶註冊後創建一個後臺工作人員來創建訂閱。

控制器（我的用戶控制器）

class Users::RegistrationsController < Devise::RegistrationsController 
    def new 
    @client_token = Braintree::ClientToken.generate() 
    super 
    end 


    def create 
    super 
    end 

def configure_sign_up_params 
    devise_parameter_sanitizer.for(:sign_up) << [:full_name, :credit_card, :cvc, 
    :expiration_month, :expiration_year, :token, :client_token] 
    end 

我的模式是這樣的

create_table "users", force: true do |t| 
    t.string "email",     default: "", null: false 
    t.string "encrypted_password",  default: "", null: false 
    t.datetime "created_at" 
    t.datetime "updated_at" 
    t.string "full_name",       null: false 
    t.string "token" 
    end 

信息

-Rails 4 -Ruby 2.0 - Braintree.js V2

Answer 1

我在布倫特裏工作。 Braintree的自定義集成旨在讓您控制表單的外觀，同時自動處理信用卡信息安全傳輸到BT服務器並向您的表單添加付款方式隨機數。它不與braintree.api.Client和卡片標記一起使用;這僅在您想要自己處理卡數據標記時才使用，或者在提交之前使用表單完成更復雜的事情。

至於你爲什麼沒有得到隨機數，你是否在braintree.setup的調用中插入客戶端令牌（就像你在創建你的客戶端一樣）？此外，因爲您正在向設置調用提供paymentMethodNonceInputField，所以這是BT javascript將用於向您發送臨時數的隱藏輸入的名稱。這是一個可選字段，因此除非您有理由使用破折號而不是下劃線命名此參數，否則可能需要將其刪除。如果你同時做了這兩件事，那麼在你的控制器中可以使用params[:payment_method_nonce]這個隨機數。

最後，因爲我們不建議使用與付款方式相同的格式創建用戶。偶爾會發生用戶將在錯誤字段中輸入信用卡數據的情況，在這種情況下，它最終會在您的服務器上。

爲了實現您的目標，您可能需要顛倒事情發生的順序，並且有兩個單獨的表單。首先，點擊提交，然後讓Braintree.js完成它的工作，然後在傳遞給它的回調中，將結果輸入到提交給rails的單獨表單中，然後提交該表單，然後使用信息進行用戶創建等操作該表單提交。

如果您還有其他問題，您可能需要聯繫Braintree support。