서버에 데이터를 게시하려고 할 때 Braintree의 payment_method_nonse가 비어 있습니다.

Question

DROP-IN UI를 설정하려고합니다. 해당 문서에 설명 된대로 내가 백엔드에 Laravel 5.2을 사용하고 있습니다 (설정을 따랐다.

[https://laravel.com/docs/5.2/billing#braintree-configuration]

을하고 난 BraintreeController.php을 만들었으며이 json로 client token를 반환 그것은 다음과 같습니다

를 .이 시점에 모든 것을

<?php 

namespace App\Http\Controllers; 

use Illuminate\Http\Request; 
use Braintree_ClientToken; 
use App\Http\Requests; 

class BraintreeController extends Controller 
{ 
    public function token() 
    { 
     return response()->json(['token' => Braintree_ClientToken::generate() ], 200); 
    } 
} 

이 좋은 내가 AngularJS와 여기에서 설정하고있는 클라이언트 측에

내 BillingController.js :

$http.get('/braintree/token').then(function(result){ 
    braintree.setup(result.data.token, "dropin", { 
     container: "payment", 
     paypal: { 
      button: { 
       type: 'checkout' 
      } 
     } 
    }); 
}); 

$('#customButton').on('click', function(event) { 
     var map = {}; 
     $('#billForm').find('input').each(function() { 
     map[$(this).attr("name")] = $(this).val(); 
     }); 
     console.log(map); 

     $http.post('/order/checkout', map).then(function(result){ 
      console.log(result); 
     }); 
    }); 

그리고 난과 같이 양식을 포함하는 간단한 HTML 템플릿 billing.html 있습니다

<form id="billForm"> 
    <input type="text" name="fullname" id="fullname"> 
    <input type="text" name="address1" id="address1"> 
    <input type="text" name="city" id="city"> 
    <input type="text" name="postalcode" id="postalcode"> 

    <div id="payment"></div> 
    <button id="customButton">Submit</button> 
</form> 

내가 가진 문제는 BillingController.js에 로그가 payment_method_nonse는 "빈"또는 "비어 있음을 보여주고 있다는 점이다 끈". 누구든지 내가 뭘 잘못하고 있는지 생각해? 고맙습니다.

편집 :

그냥 추가하고 모든 사람에게 게시 된 데이터의 수신 끝에있는 방법을 표시합니다. 기본적으로 양식 데이터를 store 메서드 안에 OrdersController.php에 /order/checkout에 게시하고 있습니다. 그리고이는 모습입니다 :

public function store(Request $request) 
{ 
    $result = Braintree_Transaction::sale([ 
     'amount' => '10.00', 
     'paymentMethodNonce' => $request->input('payment_method_nonce'), 
     'options' => [ 
      'submitForSettlement' => True 
     ] 
    ]); 

    dd($result); 
} 

을 그리고 이것은이 다시 뱉어 : 양식을 제출하기 전에 양식에

Error {#211 
    +success: false 
    #_attributes: array:8 [ 
    "errors" => ErrorCollection {#213 
     -_errors: ValidationErrorCollection {#227 
     -_errors: [] 
     -_nested: array:1 [ 
      "transaction" => ValidationErrorCollection {#214 
      -_errors: array:1 [ 
       0 => Validation {#212 
       -_attribute: "base" 
       -_code: "91508" 
       -_message: "Cannot determine payment method." 
       } 
      ] 
      -_nested: array:1 [ 
       "creditCard" => ValidationErrorCollection {#216 
       -_errors: array:1 [ 
        0 => Validation {#217 
        -_attribute: "cvv" 
        -_code: "81706" 
        -_message: "CVV is required." 
        } 
       ] 
       -_nested: [] 
       #_collection: [] 
       } 
      ] 
      #_collection: [] 
      } 
     ] 
     #_collection: [] 
     } 
    } 
    "params" => array:1 [ 
     "transaction" => array:4 [ 
     "type" => "sale" 
     "amount" => "10.00" 
     "paymentMethodNonce" => null 
     "options" => array:1 [ 
      "submitForSettlement" => "true" 
     ] 
     ] 
    ] 
    "message" => """ 
     Cannot determine payment method.\n 
     CVV is required. 
     """ 
    "creditCardVerification" => null 
    "transaction" => null 
    "subscription" => null 
    "merchantAccount" => null 
    "verification" => null 
    ] 
} 

Answer 1

_{전체 공개 : 저는 Braintree에서 일합니다. 궁금한 점이 있으시면 support team으로 문의하십시오.}

양식의 제출 단추를 클릭하면 드롭 인에 입력되는 양식 데이터가 nonce가됩니다. 양식에 제출 단추가 없으므로 nonce가 생성되지 않습니다.

onPaymentMethodReceived callback을 사용하여 양식 데이터를 제출할 수 있습니다. 이 콜백을 정의하면 양식이 제출되지 않고 위에서 설명한 원하는 동작이 수행됩니다.

braintree.setup('CLIENT-TOKEN-FROM-SERVER', 'dropin', { 
    container: 'dropin-container', 
    onPaymentMethodReceived: function (obj) { 
     var map = {}; 
     $('#billForm').find('input').each(function() { 
     map[$(this).attr("name")] = $(this).val(); 
     }); 
     map['payment_method_nonce'] = obj.nonce; 
     console.log(map); 

     $http.post('/order/checkout', map).then(function(result){ 
      console.log(result); 
     }); 
    } 
}); 

양식 버튼 콜백을 트리거 할 type='submit' 속성을해야합니다 유의 사항 : 여기

는 어디에 define your onPaymentMethodReceived callback의 예입니다.

onPaymentMethodReceived 콜백이 정의되어있는 동안 양식 제출을 실행하려면 these instructions을 따르십시오.

Answer 2

지불 방법 임시 필드는 비어 있습니다. 이는 예상되는 동작입니다.

Braintree의 javascript는 양식이 제출되고 카드 정보가 지불 방법 nonce로 암호화 된 후에 양식에 nonce를 자동으로 주입합니다. 양식을 제출하고 지불 방법 nonce가 성공적으로 반환 된 후에 필드가 여전히 비어 있는지 확인할 수 있습니까?