javascript - 在 Nuxt Js 中集成 Stripe 元素

Question

上周，我按照此文档成功在我的 react + spring boot 中集成了 Stripe https://stripe.com/docs/stripe-js/react应用程序并在我的 react 类组件中使用，
现在我正在从 react 迁移到 nuxt，我想在 nuxt js 中集成 strip 。
我如何在我的 nuxt 项目中使用这些组件？

Answer 1

安装 strip 模块

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()
  },
}

这个例子是初始化一个 IBAN 元素，但你几乎明白了，可以使用这里所有可用的方法: https://stripe.com/docs/js/elements_object/create_element?type=iban