Braintree nonce를 ruby ​​on rails 컨트롤러에 전달

Question

현재 braintree 호스트 필드를 사용하여 신용 카드를 내 앱에 포함합니다. 내가보기에서 지불 논스를 컨트롤러에 전달하는 방법을보고 있습니다. 자바 스크립트는 내가 braintree API를 트리거하고 내 경고에 넌센스를 반환하는 것 같다하지만 지금은 코드의 마지막 부분을 실행하는 컨트롤러에 이것을 통과해야합니다 컨트롤러컨트롤러 작성 방법 내에서 코드의 마지막 부분을 실행

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 

123,414,는

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

_{전체 공개를 application.js : 나는 브레인 트리에서 작동합니다. 더 궁금한 점이 있으시면 support으로 언제든지 문의하십시오.}

alert 행의 application.js 직후에 지불 방법 nonce가 포함 된 요청을 서버로 보내야합니다. 예를 들어, 당신은 아약스와 함께이 작업을 수행 할 수 있습니다

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

이 그런 다음 루비 레일에 컨트롤러 내에서, 당신은 거래를 완료 요청에 지불 방법 비표를 사용하여 Transaction.sale를 호출 할 수 있습니다. 호스트 된 필드에 대한 자세한 내용은 link을 확인하십시오. 볼트의 질문에

편집 : 당신이 볼트를 사용하는 경우

, 당신은 지불 넌스 각 시간을 필요로하지 않고 사용자를 충전 할 수 있습니다. 제어판을 통해 또는 Customer.create을 통해 고객을 생성 한 후 고객 개체의 payment_methods 속성을 통해 직접 payment_method_token을 검색 할 수 있습니다. 나중에 사용자에게 요금을 청구하려면 서버에서 payment_method_token을 검색하고 으로 전화하여 payment_method_token을 전달하십시오.

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