angularjs - 尝试将数据发布到服务器时，Braintree payment_method_nonce 为空

Question

我正在尝试设置 DROP-IN UI。我在后端使用 Laravel 5.2(遵循文档中解释的设置:

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

我已经创建了一个 BraintreeController.php 并将 client token 作为 json 返回。它看起来像这样:

<?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 为“空”或“空字符串”。有谁知道我做错了什么？谢谢。

编辑:

只是添加并展示给大家posted数据接收端的方法。基本上，我将表单数据发布到 /order/checkout 到 store 方法内的 OrdersController.php。这就是它的样子:

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 .}

当单击表单的提交按钮时，输入到 Drop-in 中的表单数据会被随机生成。因为您的表单没有提交按钮，所以不会生成随机数。

您可以使用 onPaymentMethodReceived callback提交您的表单数据。当您定义此回调时，您的表单将不会提交，这是您在上面指示的所需行为。

这里是一个例子，说明在哪里可以找到define your 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' 属性来触发回调。

如果您希望在定义onPaymentMethodReceived 回调时触发您的表单提交，您可以关注these instructions。这样做。