尝试 post 数据到服务器时，Braintree 的 payment_method_nonse 为空

Question

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

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

我创建了一个 BraintreeController.php 并且它 returns 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 是 "empty" 或 "empty string"。有谁知道我做错了什么？谢谢。

编辑：

只是为了给大家补充一下posted数据接收端的方法。基本上我在 store 方法内将表单数据发布到 /order/checkout 到 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 的 javascript 会在表单提交后自动将随机数注入您的表单，并且卡信息被加密为支付方式随机数。提交表单并成功返回付款方式随机数后，您能否确认该字段仍然为空？

Answer 2

_{完全披露：我在 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 进行操作。

尝试 post 数据到服务器时，Braintree 的 payment_method_nonse 为空

Braintree's payment_method_nonse is empty when trying to post data to server

payment

braintree

angularjs

laravel-5.2