Angularjs + Laravel Stripe 集成 - 响应发送到服务器，但缺少其他详细信息

Question

我有一个 Angular Storefront 应用程序设置。我有一个购物车功能和一个条纹 "pay with card" 按钮等。看起来像这样：

<form action="/#/order" method="POST">

        <script
          src="https://checkout.stripe.com/checkout.js" class="stripe-button"
          data-key="{{ stripeApiKey }}"
          data-billingAddress=true
          data-shippingAddres=true
          data-amount="{{ amount }}"
          data-name="StoreFront Name"
          data-description="Custom-Made Jewellery"
          data-image="../images/www/logo.png"
          data-locale="auto">
        </script>
      </form>

到目前为止一切正常。我提交了表单并标记了 returns 标记，但是表单按照路由 localhost/order（没有 # 符号）而不是 angular 的 localhost/#/order 进入服务器。

为什么 stripe 强制这个重定向？换句话说，为什么 angular 没有捕获这个 return 调用？

总之。然后我创建一个带有 Laravel 的路由来捕获它并转储以检查 returned 数据，如下所示：

Route::post('/order', function($request){ dd($request); });

是的，由 stripe 生成的表格捕获的数据是 returned 除了缺少金额...我的意思是包括 stripeToken 在内的所有内容，买家的详细信息，例如：姓名、电子邮件、账单和送货地址 returned 但缺少有关金额的详细信息。

这是正常现象还是我遗漏了什么？
最后货币仍然显示默认值：我在哪里可以将货币从美元更改为英镑？

提前致谢

Answer 1

1/ 我不认为 Checkout 会强制重定向，但我对 Angular 的了解还不足以解释发生了什么，抱歉。

2/ 是的，这很正常。在服务器端代码的 data-amount configuration option is used for display purposes only. The actual amount that is charged is the one you pass in the amount parameter in the charge creation request 中传递给 Checkout 的金额。

如果您需要用户指定金额（例如，如果您接受捐款），则需要将金额添加到表格中。这是一个简单的 JSFiddle 来说明这种情况：https://jsfiddle.net/ywain/g2ufa8xr/

3/ 您可以使用 data-currency 参数更改结帐表单中显示的货币。就像 data-amount 一样，这仅用于显示目的，实际用于收费的货币由收费创建中的 currency 参数指定。

Answer 2

除了阻止对表单提交事件的默认操作和停止事件传播之外，Stripe 不会参与您的表单。结帐过程完成后，它会将相关数据附加到您的表单，然后触发由 HTML / Javascript 本机处理的表单提交事件。

我建议使用类似 https://github.com/tobyn/angular-stripe-checkout 的方式让 Angular 正确处理您的 Stripe 响应。

否则您可以在表单中添加 ng-submit="handleStripeCheckout($event)" 而不是 action="/#/form"。当 Stripe 的结帐过程完成时，您的 $scope.handleStripeCheckout 方法将是运行，您可以在该方法中分析新的表单数据。

Edit: Stripe checkout.js actually triggers form.submit(). That's a pretty bad bug on their part considering that almost no browsers handle that correctly. (Form submitted using submit() from a link cannot be caught by onsubmit handler)

Answer 3

这就是我设法做到的。

我采用了 custom form 方法。我有一个表单模板来捕获 billing.template.html 中的客户和卡输入，如下所示：

<form method="POST" id="payment-form">
  <span class="payment-errors"></span>

  <div>
    <label>Name</label>
    <input type="text" name="name" data-stripe="name">
  </div>

  <div>
    <label>Email</label>
    <input type="text" name="email" data-stripe="address_email">
  </div>

  <div>
    <label>Address Line 1</label>
    <input type="text" name="street" data-stripe="address_line1">
  </div>

  <div>
    <label>Postcode</label>
    <input type="text" name="postcode" data-stripe="address_zip">
  </div>

  <div>
    <label for="country">Country</label>
      <select ng-include="'../templates/_partials/_countrylist.html'"
        id="countries" name="country" class="form-control"
        name="country" ng-model="country" id="country" size="2"
        data-stripe="address_country" required></select>
  </div>

  <div class="form-row">
    <label>
      <span>Card Number</span>
      <input type="text" name="cardNumber" size="20" data-stripe="number"/>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>CVC</span>
      <input type="text" name="cvc" size="4" data-stripe="cvc"/>
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Expiration (MM/YYYY)</span>
      <input type="text" name="expMonth" size="2" data-stripe="exp-month"/>
    </label>
    <span> / </span>
    <input type="text" name="expYear" size="4" data-stripe="exp-year"/>
  </div>

  <button id="customButton">Pay with Card</button>
</form>

我知道我们不应该在这些表单输入中使用 name 属性，但我保留了它们以便我可以使用 angular 验证，但我在提交前使用 jquery 删除了它们到服务器。

现在我创建了一个控制器来处理表单：BillingController.js。在那里我有一个 "on click" 处理程序，它通过获取表单并做一些准备工作来启动事情：禁用按钮以防止进一步点击并删除那些 'dreaded' 名称属性，comme ca:

  $('#customButton').on('click',function(event) {
    var $form = $('#payment-form');

    // Disable the submit button to prevent repeated clicks
    $form.find('button').prop('disabled', true);

    //NOW REMOVE THOSE NAME ATTRIBUTES
    $form.find('input').removeAttr('name');

    // call Stripe object and send form data to get back the token.
    // NOTE first argument is $form 
    Stripe.card.createToken($form, stripeResponseHandler);

    // Prevent the form from submitting with the default action
    return false;
  });

现在让我在这里引用文档，因为理解这一点非常重要：https://stripe.com/docs/tutorials/forms

The important code to notice is the call to Stripe.card.createToken. The first argument is the form element containing credit card data entered by the user. The relevant values are fetched from their associated inputs using the data-stripe attribute specified in the form.

接下来我们创建 stripeResponseHandler()。请记住，它是上面 Stripe.card.createToken($form, stripeResponseHandler); 中的第二个参数，当 Stripe returns 令牌时被调用。

function stripeResponseHandler(status, response) {
  var $form = $('#payment-form');

  if (response.error) {
    // Show the errors on the form
    $form.find('.payment-errors').text(response.error.message);
    $form.find('button').prop('disabled', false);
  } else {
    // response contains id and card, which contains additional card details
    var token = response.id;
    // Insert the token into the form so it gets submitted to the server
    $form.append($('<input type="hidden" name="stripeToken" />').val(token));
    // and submit
    $form.get(0).submit();
  }
};

这是从 stripe 自己的文档中复制粘贴的内容：https://stripe.com/docs/tutorials/forms。现在，我想说的是，这是我们很多人被表单执行重定向等事实绊倒的地方 - 注意最后一行 $form.get(0).submit(); 。这就是导致自动提交的原因，重定向到表单上的任何操作，如果你有的话（在我的情况下，action 属性不是必需的，因为我在我的控制器中进行重定向）。

所以我决定删除 $form.get(0).submit() 并在完成向服务器发送数据后实施我自己的重定向。

注意：Stripe 的响应将包含来自 $form 的数据 - 尝试 console.log(response); 了解回发的内容。

最后：我们检查是否返回了任何错误，如果有则显示它们。否则一切正常，向服务器发送数据。

最终代码如下：

function stripeResponseHandler(status, response) {

      var $form = $('payment-form');

      if (response.error) {
        // Show the errors on the form
        $form.find('.payment-errors').text(response.error.message);
      } else {
        // response contains id and card, which contains additional card details
        var token = response.id;

        // prepare data
        var data = {
            stripeToken: token,
            fullName: response.card.name,
            street: response.card.address_line1,
            postcode: response.card.address_zip,
            town: response.card.address_city,
            country: response.card.address_country,
            last4: response.card.last4
        };

        // send to server
        $http.post('/checkout', data).then(function(result){
          // here you can redirect yourself.
          window.location.href = "/#/order-complete";
        });

      }
    };

Angular 在这里使用条纹真的很好。也看看这个 link：https://gist.github.com/boucher/1750368 - 从中学到很多东西。

我希望它对今天的人有所帮助。编码愉快！

Angularjs + Laravel Stripe 集成 - 响应发送到服务器，但缺少其他详细信息

Angularjs + Laravel Stripe integration - Response goes to server and other details missing

stripe-payments

angularjs-routing