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

编辑：

只需添加并向所有人显示发布数据接收端的方法。基本上我是在/order/checkout方法中将表单数据发布到OrdersController.php到store。这就是它的外观：

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的表单数据将被取消。由于您的表单没有提交按钮，因此不会生成任何nonce。

您可以使用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进行操作。

Answer 2

在提交表单之前，表单中的付款方式nonce字段将为空。这是预期的行为。

Braintree的javascript会在表单提交后自动将nonce注入您的表单，并将卡信息加密为付款方式nonce。提交表单后，您是否可以确认该字段仍为空，并且成功返回付款方式nonce？

尝试将数据发布到服务器时，Braintree的payment_method_nonse为空

2 个答案: