Stripe API 오류 수정 방법: "IntegrationError:지정된 요소에서 데이터를 검색할 수 없습니다." Vue 구성 요소에서?

Stripe API 오류 수정 방법: "IntegrationError:지정된 요소에서 데이터를 검색할 수 없습니다." Vue 구성 요소에서?

새로운 Stripe Payment Intents API 문서에 따라 결제 흐름을 Vue2 프로젝트에 통합하려고 합니다.지난 주까지만 해도 잘 작동했어요.그러나 현재 docs는 갱신되어 사용하던 메서드는 폐지되었으며 docs의 예는 플로우를 구현하는 다른 방법을 나타내고 있습니다.

새로운 가이드에 따라 코드는 다음과 같습니다.

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를 삭제하려고 하면 모든 결제 확인 흐름과 함께 오류가 사라집니다.

Stripe 실행 시 문제가 있었습니다.stripe.confirmCardPayment스트라이프 요소가 DOM에서 삭제되었습니다.

실행 시 스트라이프 요소가 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()
}

언급URL : https://stackoverflow.com/questions/58944335/how-can-i-fix-stripe-api-error-integrationerror-we-could-not-retrieve-data-fr