vue.js - 如何修复 Stripe API 错误 : "IntegrationError: We could not retrieve data from the specified Element." in a Vue component?

Question

我正在尝试遵循新的 Stripe Payment Intents API documentation在我的 Vue2 项目中集成支付流程。
直到上周，它运作顺利。但是现在文档已更新，我使用的方法已被弃用，文档中的示例说明了实现流程的不同方式。

遵循新指南，代码结果:

mounted: function() {
const stripe = Stripe(this.content.public_key);
const elements = stripe.elements();
const card = elements.create('card');
card.mount('#card-element');

card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

const cmp = this;
stripe.confirmCardPayment(cmp.clientSecret, {
  payment_method: {card: card}
}).then(function(result) {
  if (result.error) {
    // Show error to your customer (e.g., insufficient funds)
    console.log(result.error.message);
  } else {
    // The payment has been processed!
    if (result.paymentIntent.status === 'succeeded') {
    }
  }
});

但在控制台中出现:

(index):1 Uncaught (in promise) IntegrationError: We could not retrieve data from the specified Element.
          Please make sure the Element you are attempting to use is still mounted.
at new t (https://js.stripe.com/v3/:1:10762)
at Nr (https://js.stripe.com/v3/:1:44368)
at e.Mr._handleMessage (https://js.stripe.com/v3/:1:50022)
at e._handleMessage (https://js.stripe.com/v3/:1:26204)
at https://js.stripe.com/v3/:1:48624

你有什么建议来解决它吗？
我已经尝试使用 $refs 来检索卡片元素，使用 Vue NextTick，从 stripe.js 加载中删除异步，但控制台总是抛出相同的错误。

和vue的虚拟DOM有关系吗？
如果我尝试删除 stripe.confirmCardPayment，则错误和所有付款确认流程都会消失。

Answer 1

我的问题是在执行 Stripe 时(在我的例子中是 stripe.confirmCardPayment)，Stripe 元素已从 DOM 中删除。

确保 Stripe 元素在执行时位于 DOM 中。这是一个示例，用于演示导致此错误的原因:

<loader v-if="isSubmittingPayment" text="Invoking Stripe Call" />
<div v-else>
  <div id="Stripe-elements-card></div>
  <button @click="invokeStripe">Pay</button>
</div>
...
pay() {
  this.isSubmittingPayment = true // Queue offending DOM manipulation
  this.stripe.confirmCardPayment()
}