{"id":22325956,"url":"https://github.com/flozero/nuxt-stripe","last_synced_at":"2025-04-05T17:03:41.571Z","repository":{"id":176298558,"uuid":"655469308","full_name":"flozero/nuxt-stripe","owner":"flozero","description":"nuxt module for stripe","archived":false,"fork":false,"pushed_at":"2025-03-19T20:13:21.000Z","size":882,"stargazers_count":111,"open_issues_count":2,"forks_count":10,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-05T05:08:07.852Z","etag":null,"topics":["nuxt","nuxt-modules","stripe"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flozero.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-19T01:09:41.000Z","updated_at":"2025-03-22T15:34:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"d1da3bc6-ff9f-4dcf-89a2-4dd8f47bda38","html_url":"https://github.com/flozero/nuxt-stripe","commit_stats":null,"previous_names":["fuentesloic/nuxt3-stripe","fuentesloic/nuxt-stripe","flozero/nuxt-stripe"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flozero%2Fnuxt-stripe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flozero%2Fnuxt-stripe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flozero%2Fnuxt-stripe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flozero%2Fnuxt-stripe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flozero","download_url":"https://codeload.github.com/flozero/nuxt-stripe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369953,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nuxt","nuxt-modules","stripe"],"created_at":"2024-12-04T02:14:38.115Z","updated_at":"2025-04-05T17:03:41.544Z","avatar_url":"https://github.com/flozero.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Nuxt module for Stripe\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n\nNuxt module for application using stripe.\n\n- [✨ \u0026nbsp;Release Notes](/CHANGELOG.md)\n- [🏀 Online playground](https://stackblitz.com/github/fuentesloic/nuxt-stripe?file=playground%2Fapp.vue)\n\n## Features\n\nThis Nuxt module provides an easy way to integrate Stripe in your Nuxt application, both on the client-side and server-side. It utilizes the official [stripe](https://www.npmjs.com/package/stripe) package for server-side usage and [@stripe/stripe-js](https://www.npmjs.com/package/@stripe/stripe-js) for the client-side.\n\n## Installation\n\n1. Add `@unlok-co/nuxt-stripe` dependency to your project\n\n```bash\nnpx nuxi@latest module add stripe-next\n```\n\n2. Add `@unlok-co/nuxt-stripe` to the `modules` section of `nuxt.config.ts`\n\n```ts\nexport default defineNuxtConfig({\n  modules: [\"@unlok-co/nuxt-stripe\"],\n});\n```\n\n## Configuration\n\nFor all available `serverConfig` options take a look at the [official repo README](https://github.com/stripe/stripe-node#configuration). While for the `clientConfig` options take a look at the [official docs](https://stripe.com/docs/js/initializing#init_stripe_js-options).\n\n### Using Options\n\n```ts\nexport default defineNuxtConfig({\n  modules: [\"@unlok-co/nuxt-stripe\"],\n  stripe: {\n    // Server\n    server: {\n      key: process.env.STRIPE_SECRET_KEY,\n      options: {\n        // your api options override for stripe server side\n        // https://github.com/stripe/stripe-node?tab=readme-ov-file#configuration\n      },\n      // CLIENT\n    },\n    client: {\n      key: process.env.STRIPE_PUBLIC_KEY,\n      // manualClientLoad: true, // if you want to have control where you are going to load the client\n      // your api options override for stripe client side https://stripe.com/docs/js/initializing#init_stripe_js-options\n      options: {},\n    },\n  },\n});\n```\n\n### Alternatively using [Runtime Config](https://nuxt.com/docs/guide/going-further/runtime-config)\n\n```ts\nexport default defineNuxtConfig({\n  modules: [\"@unlok-co/nuxt-stripe\"],\n  runtimeConfig: {\n    // Server\n    stripe: {\n      key: process.env.STRIPE_SECRET_KEY,\n      options: {},\n    },\n    // Client\n    public: {\n      stripe: {\n        key: process.env.STRIPE_PUBLIC_KEY,\n        options: {},\n      },\n    },\n  },\n});\n```\n\n## Usage\n\n### Server-side\n\nThe module provides a `useServerStripe` function to create a Stripe instance on the server-side.\nThis instance can be used to interact with the Stripe API.\n\n#### Minimum example\n\n```ts\nimport { defineEventHandler } from \"h3\";\nimport { useServerStripe } from \"#stripe/server\";\n\nexport default defineEventHandler(async (event) =\u003e {\n  const stripe = await useServerStripe(event);\n  console.info(\"Stripe instance:\", stripe);\n\n  return {\n    version: stripe.VERSION,\n  };\n});\n```\n\n#### generate payment intent for stripe elements\n\nAt any time you can find a full code at `playground/server/api/create-payment-intent.get.ts` for the server side and `playground/components/OtherComponent.vue`\nfor the client side.\n\nServer side example:\n\n```ts\nexport default defineEventHandler(async (event) =\u003e {\n  const stripe = await useServerStripe(event);\n  const orderAmount = 1400;\n  let paymentIntent;\n\n  try {\n    paymentIntent = await stripe.paymentIntents.create({\n      currency: \"usd\",\n      amount: orderAmount,\n      automatic_payment_methods: { enabled: true },\n    });\n\n    return {\n      clientSecret: paymentIntent.client_secret,\n      error: null,\n    };\n  } catch (e) {\n    return {\n      clientSecret: null,\n      error: e,\n    };\n  }\n});\n```\n\nClient side example:\n\n```ts\nconst { stripe } = useClientStripe();\n\nwatch(\n  stripe,\n  async () =\u003e {\n    if (stripe.value) {\n      // https://github.com/stripe-samples/accept-a-payment/blob/main/payment-element/client/vue-cva/src/components/SrCheckoutForm.vue\n      const { clientSecret, error } = await $fetch(\n        \"/api/create-payment-intent\"\n      );\n      if (error) {\n        console.error(error);\n        return;\n      }\n\n      const elements = stripe.value.elements({\n        clientSecret: clientSecret as string,\n      });\n      const linkAuthenticationElement = elements.create(\"linkAuthentication\");\n      linkAuthenticationElement.mount(\"#linkAuthenticationElement\");\n    }\n  },\n  {\n    immediate: true,\n  }\n);\n```\n\n### Client-side usage\n\nOn the client-side, you can use the `useClientStripe`. This is going to expose to you an object with\n\n```ts\n{\n  stripe, // This composable is a wrap around the [`loadStripe`](https://github.com/stripe/stripe-js#loadstripe) and can be used in pages or plugins.\n    isLoading, // You don't really need this in practice but we did expose it\n    loadStipe; // you can also manually loadStripe if you have disabled auto load for stripe\n}\n```\n\nYou can see the actual code used inside `playground/app.vue` file.\n\n#### Automated load of stripe client side\n\n```vue\n\u003ctemplate\u003e\n  \u003ch1\u003eNuxt Stripe instance\u003c/h1\u003e\n  \u003cdiv\u003e\n    {{ stripe ? stripe : \"Loading...\" }}\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\nimport { watch } from \"vue\";\n\nconst { stripe, isLoading } = await useClientStripe();\n\u003c/script\u003e\n```\n\n#### Manually load client side stripe\n\nnuxt.config.ts\n\n```ts\nstripe: {\n    client: {\n      // ...\n      manualClientLoad: true, // this is the part you want\n    },\n      // ...\n},\n```\n\nApp.vue\n\n```ts\nimport { useNuxtApp, useClientStripe } from \"#imports\";\n\nconst { loadStripe, stripe } = useClientStripe();\nconst nuxtApp = useNuxtApp();\n\n// you can leave it empty if you already have defined the keys in the config or override like in this example\nstripe.value = await loadStripe(nuxtApp.$config.public.stripe.key);\n```\n\n## Development\n\nInitial step: Clone this repository\n\n```bash\n# Install dependencies\nyarn install\nnpm install\n\n# Generate type stubs\nyarn dev:prepare\nnpm run dev:prepare\n\n# Develop with the playground\nyarn dev\nnpm run dev\n\n# Build the playground\nyarn dev:build\nnpm run dev:build\n\n# Run ESLint\nyarn lint\nnpm run lint\n\n# Run Vitest\nyarn test\nyarn test:watch\nnpm run test\nnpm run test:watch\n\n# Release new version\nyarn release\nnpm run release\n```\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/@unlok-co/nuxt-stripe/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/@unlok-co/nuxt-stripe\n[npm-downloads-src]: https://img.shields.io/npm/dm/@unlok-co/nuxt-stripe.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/@unlok-co/nuxt-stripe\n[license-src]: https://img.shields.io/npm/l/@unlok-co/nuxt-stripe.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/@unlok-co/nuxt-stripe\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflozero%2Fnuxt-stripe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflozero%2Fnuxt-stripe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflozero%2Fnuxt-stripe/lists"}