在 Nuxt Js 中集成 Stripe 元素

Question

上周，我通过遵循此文档https://stripe.com/docs/stripe-js/react应用程序并在我的 React 类组件中使用，成功地在我的 React + Spring Boot 中集成了条带，

现在我正在从 react 迁移到 nuxt，我想在 nuxt js 中集成条带。

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

Answer 1

安装条带模块

yarn add @stripe/stripe-js

设置任何需要的环境变量

nuxt.config.js

yarn add @stripe/stripe-js

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

Example.vue

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

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