svelte onMount() 触发后条纹元素 card.mount 函数错误

Question

Same issue with other frontend framework and it fixed in some

我正在尝试在 Sapper 应用程序中使用条纹。 Stripe 需要使用您在页面头部引用的安全 stripe.js 发送信用卡数据。我使用 svelte onMount() 因为 stripe 使用他们的脚本提交数据并且不涉及服务器。

点击购物车组件中的结账按钮后，我到达了这个支付组件，该组件使用 goTo 将我定向到此付款 page/component:

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>

当我通过填写所有字段（来自 stripe 的 iframe）提交付款表格并单击付款按钮时，我收到以下错误 未捕获（承诺）IntegrationError：我们无法从指定的元素中检索数据。请确保您尝试使用的元素仍处于安装状态。

我看到了卡片字段并输入了所需的卡片详细信息，但错误提示元素未安装或我正在使用的元素未安装。所以在我看来，它与安装组件有关。

任何了解 svelte、组件安装的人都应该能够帮助解决这个问题。在阅读了 vue、react 和 angular 中的其他一些类似问题后，我意识到这是关于安装前端的一些特定问题，但我还不能用 svlete 解决它。

在 Svelte/sapper 中安装 Iframe 是否有问题？查看了 sapper preload fn 但如何在 onMount() 中访问卡是我面临的另一个问题。如果我在预加载中放入任何东西，我如何访问卡？

有什么解决办法吗？

Answer 1

您需要分两个阶段处理：

安装 Stripe 元素
提交表格。

目前您正尝试同时执行这两项操作：一次是在安装组件时，另一次是在提交表单时。我无法使用上面提供的代码重现您的确切问题，因为当我尝试从表单调用 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>

svelte onMount() 触发后条纹元素 card.mount 函数错误

Stripe Elements card.mount function error after svelte onMount() fires

javascript

stripe-payments

svelte-component

sapper

svelte-3