svelte onMount() 觸發后，Stripe Elements card.mount function 錯誤

Question

與其他前端框架相同的問題，它在某些方面得到了修復

我正在嘗試在 Sapper 應用程序中使用條帶。 Stripe 需要使用您在頁面頂部引用的安全 stripe.js 發送信用卡數據。 我使用 svelte onMount() 因為條帶使用他們的腳本提交數據並且不涉及服務器。

單擊購物車組件中的結帳按鈕后，我到達了此付款組件，該組件使用 goTo 將我定向到此付款頁面/組件：

function checkout(){ 
// handle shopping cart items   
await goto('./checkout/pay');      
  }    
  navigateAndSave()
   }

我的支付組件具有以下代碼來收集信用卡數據：

    onMount(async () => {
  var stripe = await Stripe('pk_test....');
  // call stripe.elements which will create the credit card fields 
  // use the fields for card #, expiration and cvv
  var elements = await stripe.elements();
  var card =  await elements.create('card');
  // mount the card to the dom
  card.mount("#card-element");

  card.on('change', ({error}) => {
   // code the validate the credit card number, expiration date and other data.
  });  //end of card.on fn

  // code to charge the card. Call

    // now that you mounted the stripe credit card Elment. Collect credit
    // card details and submit it to stripe to process the payment using
    // their api confirmCardPayment
    stripe.confirmCardPayment(client_secret, {
  payment_method: {
   // the stripe card element has the credit card data
  card: card,
  billing_details: {
  name: 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz'
  }
  }
  }).then(function(result) {
  if (result.error) {
  console.log(result.error.message);
  } else {
  if (result.paymentIntent.status === 'succeeded') {
         // update db, send emails to customer and admin...etc
  }
  }
  });

  // End of submit card information code
   

  } // end onMount()

我的 html 表格是：

    <svelte:head>
  <script src="https://js.stripe.com/v3/"></script>
</svelte:head>


<h1> clientSecret Checkout </h1>


<form on:submit|preventDefault={onMount}>
  <div id="card-element">
    <!-- Elements will create input elements here -->
  </div>

  <!-- We'll put the error messages in this element -->
  <div id="card-errors" role="alert"></div>

  <button id="submit">Pay </button>
</form>

當我通過填寫所有字段（其中 iframe 來自條紋）提交付款表單並單擊付款按鈕時，我收到以下錯誤Uncaught (in promise) IntegrationError: We could not retrieve data from the specified Element。 請確保您嘗試使用的元素仍處於安裝狀態。

我看到卡片字段並輸入了所需的卡片詳細信息，但錯誤顯示該元素未安裝或我正在使用的元素未安裝。 所以在我看來，這與安裝組件有關。

任何了解苗條，組件安裝的人都應該能夠幫助解決這個問題。 在閱讀了 vue、react 和 angular 中的一些其他類似問題后，我意識到這是安裝前端的具體問題，但我還不能用 svlete 弄清楚。

在 Svelte/sapper 中安裝 Iframe 是否存在問題？ 查看了 sapper preload fn 但我如何在我的 onMount() 中訪問卡是我面臨的另一個問題。 如果我在預加載中放入任何內容，我如何訪問卡？

有什么解決辦法嗎？

Answer 1

您需要分兩個階段處理此問題：

1. 安裝 Stripe 元素
2. 提交表格。

目前，您嘗試同時執行兩次：安裝組件時一次，提交表單時再次執行。 我無法使用您上面提供的代碼重現您的確切問題，因為當我嘗試從表單調用 onMount() 時，Sapper 出錯。 我不確定為什么你沒有得到同樣的錯誤。 我認為您的錯誤發生是因為您在提交表單時替換了元素。

當我使用測試卡號時，此代碼會記錄“成功”：

<script>
    import {loadStripe} from '@stripe/stripe-js';
    import { onMount } from 'svelte';

    let stripe = null;
    let card = null;
    let secret = null;

    onMount(async () => {
        stripe = await loadStripe('pk_test_...');

        var elements = await stripe.elements();
        card = await elements.create('card');
        // mount the card to the dom
        card.mount("#card-element");
        secret = await fetch('secret.json').then(resp => resp.json());
    });

    async function handlePayment() {
        // code to charge the card. Call

        // now that you mounted the stripe credit card Elment. Collect credit
        // card details and submit it to stripe to process the payment using
        // their api confirmCardPayment
        console.log(JSON.stringify(secret));
        stripe.confirmCardPayment(secret.client_secret, {
            payment_method: {
                // the stripe card element has the credit card data
                card: card,
                billing_details: {
                    name: 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz'
                }
            }
        }).then(function(result) {
            if (result.error) {
                console.log(result.error.message);
            } else {
                if (result.paymentIntent.status === 'succeeded') {
                    // update db, send emails to customer and admin...etc
                    console.log('Success');
                }
            }
        });
    }
</script>

<h1> clientSecret Checkout </h1>

<form on:submit|preventDefault={handlePayment}>
  <div id="card-element">
    <!-- Elements will create input elements here -->
  </div>

  <!-- We'll put the error messages in this element -->
  <div id="card-errors" role="alert"></div>

  <button id="submit">Pay </button>
</form>