苹果支付 - “支付未完成” - 使用Stripe

Question

我正在使用条纹的“付款请求按钮”来为我的网站实现Apple Pay。在条纹方面一切都正常。令牌正确传递，我在Stripe日志中进行了验证。 https://stripe.com/docs/stripe-js/elements/payment-request-button 然而，每次尝试完成测试付款时，我都会收到来自Apple Pay的错误消息：“未完成付款”。

这让我陷入困境，我不知道如何进行调试或修复。有任何想法吗？

我得到了一个未定义的令牌。

这是错误：

我的设置：

前端：

<script src="https://js.stripe.com/v3/"></script>
<div id="payment-request-button">
  <!-- A Stripe Element will be inserted here. -->
</div>



<script>
var stripe = Stripe('pk_test_xxxxx');

var paymentRequest = stripe.paymentRequest({
  country: 'US',
  currency: 'usd',
  total: {
    label: 'JobQuiz',
    amount: 999,
  },
  requestPayerName: true,
  requestPayerEmail: false,
});


var elements = stripe.elements();
var prButton = elements.create('paymentRequestButton', {
  paymentRequest: paymentRequest,
});

// Check the availability of the Payment Request API first.
paymentRequest.canMakePayment().then(function(result) {
  if (result) {
    prButton.mount('#payment-request-button');
  } else {
    document.getElementById('payment-request-button').style.display = 'none';
  }
});

   paymentRequest.on('token', function(ev) {
  // Send the token to your server to charge it!
    fetch('/apple-pay', {
    method: 'POST',
    body: JSON.stringify({token: ev.token.id}),
    headers: {'content-type': 'application/json'},
  })
  .then(function(response) {
    if (response.ok) {
      // Report to the browser that the payment was successful, prompting
      // it to close the browser payment interface.
      ev.complete('success');
    } else {
      // Report to the browser that the payment failed, prompting it to
      // re-show the payment interface, or show an error message and close
      // the payment interface.
      ev.complete('fail');
    }
  });
});

</script>

app.js 中的服务器端代码

app.post('/apple-pay', function(req, res, next) {


// Set your secret key: remember to change this to your live secret key in production
// See your keys here: https://dashboard.stripe.com/account/apikeys
var stripe = require("stripe")("sk_test_xxxxxx");

// Token is created using Checkout or Elements!
// Get the payment token ID submitted by the form:
const token = req.body.token; // Using Express

const charge = stripe.charges.create({
  amount: 999,
  currency: 'usd',
  description: 'Example charge',
  source: token,
}, function(err, charge){ 
if (err){

} else { 

}
});
});

- AndrewLeonardi

---

你能澄清一下错误吗？它是出现在Apple Pay模态框内还是稍后由Stripe出现的？这个流程看起来对我来说是正确的。 - korben

在手机上使用 Apple Pay 支付时，我并没有看到支付成功的对勾，反而出现了“付款未完成”的错误提示。 - AndrewLeonardi

@korben 有什么想法吗？ - AndrewLeonardi

你需要实际设置一个端点来接受由Apple Pay创建的令牌，该端点位于/charges，并使用该令牌创建一个收费（https://stripe.com/docs/api#create_charge）。 - korben

@korben - 谢谢你!!! 你能指点我如何在node中正确地实现吗？ - AndrewLeonardi

Answer 1

最终解决了这个问题。它最终成为我的bodyParser设置的一个问题。这就解释了为什么token是空的。我忽略了在下面包含app.use(bodyParser.json());

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

- AndrewLeonardi