javascript - Laravel strip 付款表格不处理只是发布

Question

我正在使用来自 Stripe 的默认卡片元素，可以在 here 中找到它.表单呈现和验证条包括作品和呈现。但是，我从未生成 stripeToken，因此订阅失败；

This customer has no attached payment source

当我死转储我的请求时，stripeToken 是 NULL。我认为这是因为 Stripe 表单处理程序对我来说根本不起作用，它们包含的事件监听器永远不会触发。

看起来表单只是像普通表单一样发布，而不是 stripe 添加的阻止默认 JS 监听器。

<form action="{{ route('subscriptionCreate') }}" method="post" id="payment-form">
  @csrf
  <input type="hidden" name="plan" value="{{ $plan->id }}">
  <div class="form-row">
    <label for="card-element">
      Credit or debit card
    </label>
    <div id="card-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>

    <div id="card-errors" role="alert"></div>
  </div>

  <button>Submit Payment</button>
</form>

元素示例中包含的 Javascript；

<script>

// Create a Stripe client.
var stripe = Stripe('###Removed###');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Create an instance of the card Element.
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

// Handle form submission.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the user if there was an error.
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server.
      stripeTokenHandler(result.token);
    }
  });
});


// // Submit the form with the token ID.
function stripeTokenHandler(token) {
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}
</script>

这是我的 Controller ，正如我提到的，$request->stripeToken 不存在我认为它从未被添加到表单中。

public function create(Request $request)
{

    $plan = Plan::findOrFail($request->get('plan'));

    $user = $request->user();

    $request->user()
        ->newSubscription($plan->name, $plan->stripe_plan)
        ->create($request->stripeToken,[
            'email' => $user->email
        ]);

    return redirect()->route('home')->with('success', 'Your plan subscribed successfully');
}

Answer 1

我创建了 https://jsfiddle.net/s8foxw9r/2/确认 stripeTokenHandler 正在工作(并且正在正确生成 token )。

如果打开 jsfiddle URL，然后在浏览器中打开开发人员工具并查看控制台输出，您将看到传递给 stripeTokenHandler() 的 token 对象的转储。

当您点击提交付款时，页面POST到https://postman-echo.com/post这将转储您的请求。您会注意到请求看起来像这样:

{
  "args": {},
  "data": "",
  "files": {},
  "form": {
    "stripeToken": "tok_1F07d72eZvKYlo2CqBprboVK"
  },
  "headers": {
    "x-forwarded-proto": "https",
    "host": "postman-echo.com",
    "content-length": "40",
    "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3",
    "accept-encoding": "gzip, deflate, br",
    "accept-language": "en-US,en;q=0.9",
    "cache-control": "no-cache",
    "content-type": "application/x-www-form-urlencoded",
    "cookie": "sails.sid=s%3AHyTHsNyIhRvFINR3EGiXw1Kf12oufx84.jd6rEiCaqHsrM8eOGN1x%2ByzU%2BMatjM4l5S1Ekxhxdyo",
    "origin": "https://fiddle.jshell.net",
    "pragma": "no-cache",
    "referer": "https://fiddle.jshell.net/",
    "upgrade-insecure-requests": "1",
    "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36",
    "x-forwarded-port": "443"
  },
  "json": {
    "stripeToken": "tok_1F07d72eZvKYlo2CqBprboVK"
  },
  "url": "https://postman-echo.com/post"
}

重要的部分是headers.content-type 和json 属性。这意味着 stripe.js 库通过 application/x-www-form-urlencoded MIME 类型 POSTed 表单，并且 stripeToken包括在内。

这意味着您的问题是以下其中一项/两项:

1. 如果您没有在浏览器中看到生成的 token ，则您的 strip 私钥可能不正确。我将从使用您的 strip 测试私钥开始，它看起来像 pk_test_xxx。
2. 您的 Laravel 服务器设置不正确。很多潜在问题，需要更多信息，不幸的是我从未使用过 Laravel。

最后，我找到了一个 Laravel 的 Stripe 集成包，可能值得一试:https://github.com/cartalyst/stripe-laravel