在 Nuxt Js 中集成 Stripe 元素

Question

上周，我按照此文档https://stripe.com/docs/stripe-js/react应用程序并在我的react类组件中使用，成功地将stripe集成到我的react + spring boot中，

现在我正在从 React 迁移到 nuxt，我想将 stripe 集成到 nuxt js 中。

我如何在我的 nuxt 项目中使用这些组件？

Answer 1

安装条带模块

yarn add @stripe/stripe-js

设置任何需要的环境变量

nuxt.config.js

export default {
  publicRuntimeConfig: {
    stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
  },
}

然后，我们拿一个组件并将Stripe导入其中

Example.vue

<template>
  <div id="iban-element" class="mt-2 stripe-iban-element"></div>
</template>

<script>
import { loadStripe } from '@stripe/stripe-js/pure'

loadStripe.setLoadParameters({ advancedFraudSignals: false }) // https://github.com/stripe/stripe-js#disabling-advanced-fraud-detection-signals
let stripe, elements

export default {
  methods: {
    async loadStripeWhenModalOpens() {
      if (!stripe) {
        stripe = await loadStripe(this.$config.stripePublishableKey)
        elements = stripe.elements()
      }
      this.$nextTick(async () => {
        const iban = elements.create('iban', {
          supportedCountries: ['SEPA'],
          placeholderCountry: 'FR',
          iconStyle: 'default',
          style: {
            ... // fancy styling
          },
        })
        // eslint-disable-next-line
        await new Promise((r) => setTimeout(r, 100)) // ugly but needed if you hard refresh the exact page where the module is imported
        iban.mount('#iban-element')
      })
    },

    destroyStripeIbanElement() {
      const ibanElement = elements?.getElement('iban')
      if (ibanElement) ibanElement.destroy()
    },
  },
  beforeDestroy() {
    this.destroyStripeIbanElement()
  },
}
</script>

此示例正在初始化 IBAN 元素，但您几乎已经明白了要点，并且可以使用此处提供的所有方法：https://stripe.com/docs/js/elements_object/create_element?type=iban