{"id":33003184,"url":"https://github.com/pathwaysdigital/nuxt-stripe-payments","last_synced_at":"2026-05-17T02:02:08.928Z","repository":{"id":322806823,"uuid":"1090938790","full_name":"pathwaysdigital/nuxt-stripe-payments","owner":"pathwaysdigital","description":"Lightweight Stripe payment integration for Nuxt 3 with support for all payment methods including Apple Pay, Google Pay, SEPA, EPS, and more.","archived":false,"fork":false,"pushed_at":"2025-11-23T11:39:46.000Z","size":189,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-12T19:34:09.997Z","etag":null,"topics":["creditcard","eps","nuxt","revolut","stripe","stripe-payment","stripe-payments","vue"],"latest_commit_sha":null,"homepage":"https://pathways-digital.com","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/pathwaysdigital.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-06T10:42:32.000Z","updated_at":"2025-11-23T11:39:50.000Z","dependencies_parsed_at":"2025-11-13T14:01:54.349Z","dependency_job_id":null,"html_url":"https://github.com/pathwaysdigital/nuxt-stripe-payments","commit_stats":null,"previous_names":["pathwaysdigital/nuxt-stripe-payments"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/pathwaysdigital/nuxt-stripe-payments","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pathwaysdigital%2Fnuxt-stripe-payments","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pathwaysdigital%2Fnuxt-stripe-payments/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pathwaysdigital%2Fnuxt-stripe-payments/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pathwaysdigital%2Fnuxt-stripe-payments/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pathwaysdigital","download_url":"https://codeload.github.com/pathwaysdigital/nuxt-stripe-payments/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pathwaysdigital%2Fnuxt-stripe-payments/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33125182,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-16T18:38:32.183Z","status":"online","status_checked_at":"2026-05-17T02:00:05.366Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["creditcard","eps","nuxt","revolut","stripe","stripe-payment","stripe-payments","vue"],"created_at":"2025-11-13T14:00:41.024Z","updated_at":"2026-05-17T02:02:08.921Z","avatar_url":"https://github.com/pathwaysdigital.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Nuxt Stripe Payments\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[![Nuxt][nuxt-src]][nuxt-href]\n\nLightweight Stripe payment integration for Nuxt 3 with support for all payment methods including Apple Pay, Google Pay, SEPA, EPS, and more.\n\n## Features\n\n✅ **Zero Dependencies** - Loads Stripe.js dynamically, no heavy dependencies  \n✅ **All Payment Methods** - Cards, Apple Pay, Google Pay, SEPA, EPS, Revolut Pay, etc.  \n✅ **Subscriptions** - Full support for Stripe subscriptions with Checkout Sessions  \n✅ **Subscription Management** - Cancel, update, resume, and manage subscriptions easily  \n✅ **TypeScript Support** - Full type safety out of the box  \n✅ **Auto-configured** - Works with Nuxt's auto-imports  \n✅ **Customizable** - Full control over appearance and behavior  \n✅ **SSR Compatible** - Works with Nuxt's server-side rendering  \n\n## Quick Setup\n\n1. Add `nuxt-stripe-payments` dependency to your project\n\n```bash\nnpm install nuxt-stripe-payments stripe\n# or\nyarn add nuxt-stripe-payments stripe\n# or\npnpm add nuxt-stripe-payments stripe\n```\n\n2. Add `nuxt-stripe-payments` to the `modules` section of `nuxt.config.ts`\n\n```js\nexport default defineNuxtConfig({\n  modules: [\n    'nuxt-stripe-payments'\n  ],\n  \n  stripePayments: {\n    // Set your default Stripe publishable key\n    publishableKey: process.env.NUXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,\n    // or hardcode for development: publishableKey: 'pk_test_xxxxx',\n    defaultCurrency: 'eur',\n    apiEndpoint: '/api/create-payment-intent'\n  }\n})\n```\n\n3. Add your Stripe keys to `.env`:\n\n```env\nNUXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxx\nSTRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxx\n```\n\n4. Create a backend endpoint for payment intents\n\nCreate `server/api/create-payment-intent.post.ts`:\n\n```typescript\nimport Stripe from 'stripe'\n\nexport default defineEventHandler(async (event) =\u003e {\n    const { \n        amount, \n        currency, \n        metadata,\n        customerId,      // Existing customer ID (optional)\n        customerData     // New customer data (optional)\n    } = await readBody(event)\n    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)\n    \n    let customer: Stripe.Customer | null = null\n    \n    // Create or retrieve customer\n    if (customerId) {\n        customer = await stripe.customers.retrieve(customerId) as Stripe.Customer\n    } else if (customerData) {\n        // Create new customer\n        const customerParams: Stripe.CustomerCreateParams = {\n            email: customerData.email,\n            name: customerData.firstName \u0026\u0026 customerData.lastName \n                ? `${customerData.firstName} ${customerData.lastName}` \n                : undefined,\n            metadata: {\n                ...(customerData.company \u0026\u0026 { company: customerData.company }),\n                ...(customerData.vatId \u0026\u0026 { vat_id: customerData.vatId })\n            }\n        }\n        \n        // Add address if provided\n        if (customerData.address) {\n            customerParams.address = {\n                line1: customerData.address.line1,\n                line2: customerData.address.line2,\n                city: customerData.address.city,\n                state: customerData.address.state,\n                postal_code: customerData.address.postal_code,\n                country: customerData.address.country\n            }\n        }\n        \n        if (customerParams.email || customerParams.name) {\n            customer = await stripe.customers.create(customerParams)\n        }\n    }\n    \n    const paymentIntent = await stripe.paymentIntents.create({\n        amount,\n        currency,\n        automatic_payment_methods: {\n            enabled: true,\n            allow_redirects: 'always'\n        },\n        metadata: metadata || {},\n        ...(customer \u0026\u0026 { customer: customer.id })\n    })\n    \n    return {\n        clientSecret: paymentIntent.client_secret,\n        ...(customer \u0026\u0026 { customerId: customer.id })\n    }\n})\n```\n\nThat's it! You can now use the `StripePayment` component in your application ✨\n\n## Usage\n\n### Basic Example\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003c!-- Uses publishableKey from nuxt.config.ts --\u003e\n    \u003cStripePayment\n      :amount=\"1099\"\n      @success=\"handleSuccess\"\n      @error=\"handleError\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst handleSuccess = (paymentIntent) =\u003e {\n  console.log('Payment successful!', paymentIntent)\n  navigateTo('/success')\n}\n\nconst handleError = (error) =\u003e {\n  console.error('Payment failed:', error)\n}\n\u003c/script\u003e\n```\n\n### Advanced Example with Overrides\n\n```vue\n\u003ctemplate\u003e\n  \u003cStripePayment\n    :amount=\"2499\"\n    currency=\"usd\"\n    api-endpoint=\"/api/custom-payment\"\n    return-url=\"https://yourdomain.com/complete\"\n    button-text=\"Subscribe Now\"\n    button-class=\"custom-btn\"\n    :appearance=\"stripeAppearance\"\n    :metadata=\"paymentMetadata\"\n    @success=\"handleSuccess\"\n    @error=\"handleError\"\n    @ready=\"handleReady\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst stripeAppearance = {\n  theme: 'stripe',\n  variables: {\n    colorPrimary: '#0570de'\n  }\n}\n\nconst paymentMetadata = {\n  orderNumber: '12345',\n  customerId: 'cus_abc123',\n  source: 'web'\n}\n\u003c/script\u003e\n```\n\n### Using Different Keys per Component\n\n```vue\n\u003ctemplate\u003e\n  \u003cStripePayment\n    publishable-key=\"pk_test_different_account_xxx\"\n    :amount=\"1099\"\n    @success=\"handleSuccess\"\n  /\u003e\n\u003c/template\u003e\n```\n\n### Programmatic Submit\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cStripePayment\n      ref=\"paymentRef\"\n      :amount=\"1099\"\n      hide-button\n      @success=\"handleSuccess\"\n    /\u003e\n    \n    \u003cbutton @click=\"submitPayment\"\u003e\n      Pay Now\n    \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst paymentRef = ref(null)\n\nconst submitPayment = () =\u003e {\n  paymentRef.value?.submit()\n}\n\u003c/script\u003e\n```\n\n### Customer Data Collection\n\nThe module supports collecting customer data and automatically creating Stripe Customers during payment processing. This is useful for tracking customers, managing subscriptions, and compliance (e.g., VAT handling).\n\n#### Basic Example with Customer Data\n\n```vue\n\u003ctemplate\u003e\n  \u003cStripePayment\n    :amount=\"1099\"\n    :customer-data=\"customerInfo\"\n    @success=\"handleSuccess\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst customerInfo = {\n  email: 'customer@example.com',\n  firstName: 'John',\n  lastName: 'Doe',\n  company: 'Acme Corp',\n  address: {\n    line1: '123 Main St',\n    city: 'New York',\n    state: 'NY',\n    postal_code: '10001',\n    country: 'US'\n  },\n  vatId: 'VAT123456'\n}\n\nconst handleSuccess = (paymentIntent) =\u003e {\n  console.log('Payment successful!', paymentIntent)\n  console.log('Customer ID:', paymentIntent.customerId)\n  navigateTo('/success')\n}\n\u003c/script\u003e\n```\n\n#### Using Existing Customer\n\nIf you already have a Stripe Customer ID, you can pass it directly:\n\n```vue\n\u003ctemplate\u003e\n  \u003cStripePayment\n    :amount=\"1099\"\n    customer-id=\"cus_xxxxxxxxxxxxx\"\n    @success=\"handleSuccess\"\n  /\u003e\n\u003c/template\u003e\n```\n\n#### Partial Customer Data\n\nYou can provide partial customer data - only the fields you have:\n\n```vue\n\u003ctemplate\u003e\n  \u003cStripePayment\n    :amount=\"1099\"\n    :customer-data=\"{ email: 'customer@example.com', firstName: 'John', lastName: 'Doe' }\"\n    @success=\"handleSuccess\"\n  /\u003e\n\u003c/template\u003e\n```\n\n#### Module-Level Configuration\n\nEnable customer data collection globally in `nuxt.config.ts`:\n\n```typescript\nexport default defineNuxtConfig({\n  stripePayments: {\n    publishableKey: process.env.NUXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,\n    collectCustomerData: true,  // Enable globally\n    customerDataFields: ['email', 'name', 'company', 'address', 'vat']\n  }\n})\n```\n\n**Note:** Even with module-level configuration, you still need to provide the `customerData` prop or `customerId` prop to the component. The module config only sets defaults for which fields to collect if you're building a form.\n\n## Subscriptions\n\nThe module includes full support for Stripe subscriptions using Checkout Sessions. Subscriptions redirect users to Stripe's hosted checkout page for a seamless experience.\n\n### Getting a Stripe Price ID\n\nBefore using the `StripeSubscription` component, you need to create a Price in your Stripe Dashboard. Here's how:\n\n**Option 1: Stripe Dashboard (Recommended for beginners)**\n\n1. Go to [Stripe Dashboard](https://dashboard.stripe.com) → **Products**\n2. Click **\"Add product\"** or select an existing product\n3. Set up your pricing:\n   - Choose **Recurring** for subscriptions\n   - Set the billing period (monthly, yearly, etc.)\n   - Set the price amount\n   - Configure any additional options (trial period, metered billing, etc.)\n4. Click **\"Save product\"**\n5. Copy the **Price ID** (starts with `price_`) from the product page\n\n**Option 2: Stripe API (For programmatic setup)**\n\n```typescript\nimport Stripe from 'stripe'\n\nconst stripe = new Stripe(process.env.STRIPE_SECRET_KEY)\n\n// Create a product first\nconst product = await stripe.products.create({\n  name: 'Premium Plan',\n  description: 'Monthly subscription to premium features'\n})\n\n// Create a price for the product\nconst price = await stripe.prices.create({\n  product: product.id,\n  unit_amount: 2999, // $29.99 in cents\n  currency: 'usd',\n  recurring: {\n    interval: 'month'\n  }\n})\n\nconsole.log('Price ID:', price.id) // Use this in your component\n```\n\n**Option 3: Stripe CLI (For testing)**\n\n```bash\n# Create a test price\nstripe prices create \\\n  --product prod_test123 \\\n  --unit-amount 2999 \\\n  --currency usd \\\n  --recurring interval=month\n```\n\nThe price ID will look like: `price_1ABC123def456GHI789jkl012`\n\n### Basic Subscription Example\n\n```vue\n\u003ctemplate\u003e\n  \u003cStripeSubscription\n    price-id=\"price_xxxxxxxxxxxxx\"\n    @success=\"handleSuccess\"\n    @error=\"handleError\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst handleSuccess = (session) =\u003e {\n  console.log('Checkout session created:', session)\n  // User will be redirected to Stripe Checkout\n}\n\nconst handleError = (error) =\u003e {\n  console.error('Subscription error:', error)\n}\n\u003c/script\u003e\n```\n\n### Subscription with Trial Period\n\n```vue\n\u003ctemplate\u003e\n  \u003cStripeSubscription\n    price-id=\"price_xxxxxxxxxxxxx\"\n    :trial-period-days=\"14\"\n    customer-email=\"customer@example.com\"\n    @success=\"handleSuccess\"\n  /\u003e\n\u003c/template\u003e\n```\n\n### Multiple Prices / Add-ons\n\n```vue\n\u003ctemplate\u003e\n  \u003cStripeSubscription\n    :price-id=\"['price_basic', 'price_addon']\"\n    :quantity=\"1\"\n    @success=\"handleSuccess\"\n  /\u003e\n\u003c/template\u003e\n```\n\n### Subscription Management\n\nUse the `useStripeSubscription` composable to manage subscriptions:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton @click=\"cancelSub\"\u003eCancel Subscription\u003c/button\u003e\n    \u003cbutton @click=\"openPortal\"\u003eManage Subscription\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst { cancelSubscription, createPortalSession } = useStripeSubscription()\nconst subscriptionId = 'sub_xxxxxxxxxxxxx'\nconst customerId = 'cus_xxxxxxxxxxxxx'\n\nconst cancelSub = async () =\u003e {\n  try {\n    // Cancel at period end (recommended)\n    await cancelSubscription(subscriptionId, false)\n    alert('Subscription will cancel at period end')\n  } catch (error) {\n    console.error('Failed to cancel:', error)\n  }\n}\n\nconst openPortal = async () =\u003e {\n  try {\n    const { url } = await createPortalSession(customerId)\n    window.location.href = url\n  } catch (error) {\n    console.error('Failed to open portal:', error)\n  }\n}\n\u003c/script\u003e\n```\n\n### Update Subscription\n\n```vue\n\u003cscript setup\u003e\nconst { updateSubscription } = useStripeSubscription()\n\nconst upgradePlan = async () =\u003e {\n  try {\n    await updateSubscription('sub_xxxxxxxxxxxxx', {\n      priceId: 'price_premium',\n      quantity: 1\n    })\n    alert('Subscription updated!')\n  } catch (error) {\n    console.error('Failed to update:', error)\n  }\n}\n\u003c/script\u003e\n```\n\n### Backend Endpoints for Subscriptions\n\nCreate `server/api/create-checkout-session.post.ts`:\n\n```typescript\nimport Stripe from 'stripe'\n\nexport default defineEventHandler(async (event) =\u003e {\n    const {\n        priceId,\n        customerId,\n        customerEmail,\n        mode = 'subscription',\n        allowPromotionCodes = false,\n        trialPeriodDays,\n        quantity = 1,\n        metadata = {},\n        successUrl,\n        cancelUrl\n    } = await readBody(event)\n    \n    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)\n    \n    const lineItems = Array.isArray(priceId) \n        ? priceId.map((id: string) =\u003e ({ price: id, quantity }))\n        : [{ price: priceId, quantity }]\n    \n    const session = await stripe.checkout.sessions.create({\n        mode,\n        line_items: lineItems,\n        success_url: successUrl || `${getRequestURL(event).origin}/subscription-success?session_id={CHECKOUT_SESSION_ID}`,\n        cancel_url: cancelUrl || `${getRequestURL(event).origin}/subscription-cancel`,\n        allow_promotion_codes: allowPromotionCodes,\n        customer: customerId,\n        customer_email: customerEmail,\n        subscription_data: trialPeriodDays ? {\n            trial_period_days: trialPeriodDays\n        } : undefined,\n        metadata\n    })\n    \n    return {\n        sessionId: session.id,\n        url: session.url\n    }\n})\n```\n\nCreate `server/api/subscriptions/[id].put.ts` for updating subscriptions:\n\n```typescript\nimport Stripe from 'stripe'\n\nexport default defineEventHandler(async (event) =\u003e {\n    const id = getRouterParam(event, 'id')\n    const { priceId, quantity, metadata } = await readBody(event)\n    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)\n    \n    const subscription = await stripe.subscriptions.retrieve(id!)\n    const subscriptionItemId = subscription.items.data[0]?.id\n    \n    const updated = await stripe.subscriptions.update(id!, {\n        items: [{\n            id: subscriptionItemId,\n            price: priceId,\n            quantity\n        }],\n        metadata: metadata || {}\n    })\n    \n    return updated\n})\n```\n\nCreate `server/api/subscriptions/[id]/cancel.post.ts` for canceling:\n\n```typescript\nimport Stripe from 'stripe'\n\nexport default defineEventHandler(async (event) =\u003e {\n    const id = getRouterParam(event, 'id')\n    const { immediately = false } = await readBody(event)\n    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)\n    \n    if (immediately) {\n        return await stripe.subscriptions.cancel(id!)\n    } else {\n        return await stripe.subscriptions.update(id!, {\n            cancel_at_period_end: true\n        })\n    }\n})\n```\n\nSee the `playground/server/api` directory for complete examples of all subscription endpoints.\n\n## Module Configuration\n\nConfigure default values in `nuxt.config.ts`:\n\n```typescript\nexport default defineNuxtConfig({\n  stripePayments: {\n    // Required: Your Stripe publishable key\n    publishableKey: process.env.NUXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,\n    \n    // Optional: Default currency for all payments\n    defaultCurrency: 'eur', // 'usd', 'gbp', etc.\n    \n    // Optional: Default API endpoint\n    apiEndpoint: '/api/create-payment-intent'\n  }\n})\n```\n\n**Configuration Options:**\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `publishableKey` | `string` | `''` | Default Stripe publishable key |\n| `defaultCurrency` | `string` | `'eur'` | Default currency for payments |\n| `apiEndpoint` | `string` | `'/api/create-payment-intent'` | Default API endpoint for payment intents |\n| `checkoutSessionEndpoint` | `string` | `'/api/create-checkout-session'` | Default API endpoint for checkout sessions (subscriptions) |\n| `subscriptionEndpoint` | `string` | `'/api/subscriptions'` | Default API endpoint for subscription management |\n| `collectCustomerData` | `boolean` | `false` | Enable customer data collection globally |\n| `customerDataFields` | `string[]` | `['email', 'name', 'address']` | Fields to collect when collectCustomerData is enabled |\n\nAll configuration options can be overridden per component via props.\n\n## Component Props\n\n### StripePayment Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `publishableKey` | `string` | from config | Stripe publishable key (overrides config) |\n| `amount` | `number` | **required** | Amount in cents |\n| `currency` | `string` | from config | Currency code (overrides config) |\n| `apiEndpoint` | `string` | `'/api/create-payment-intent'` | Backend endpoint |\n| `returnUrl` | `string` | `''` | Redirect URL after payment |\n| `buttonText` | `string` | `'Pay Now'` | Submit button text |\n| `submittingText` | `string` | `'Processing...'` | Loading button text |\n| `loadingText` | `string` | `'Loading payment form...'` | Initial loading text |\n| `buttonClass` | `string` | Default styles | Custom button CSS classes |\n| `hideButton` | `boolean` | `false` | Hide built-in button |\n| `appearance` | `object` | `{}` | Stripe Elements appearance |\n| `metadata` | `object` | `{}` | Custom metadata to attach to the payment |\n| `collectCustomerData` | `boolean` | from config | Enable customer data collection (overrides config) |\n| `customerDataFields` | `string[]` | from config | Fields to collect (overrides config) |\n| `customerData` | `object` | `undefined` | Customer data object (email, firstName, lastName, company, address, vatId) |\n| `customerId` | `string` | `undefined` | Existing Stripe customer ID (skips customer creation) |\n\n### StripeSubscription Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `priceId` | `string \\| string[]` | **required** | Stripe price ID(s) for subscription |\n| `customerId` | `string` | `''` | Existing Stripe customer ID |\n| `customerEmail` | `string` | `''` | Customer email (creates customer if not exists) |\n| `checkoutSessionEndpoint` | `string` | from config | Backend endpoint for checkout sessions |\n| `successUrl` | `string` | `''` | URL to redirect after successful checkout |\n| `cancelUrl` | `string` | `''` | URL to redirect if checkout is canceled |\n| `buttonText` | `string` | `'Subscribe Now'` | Button text |\n| `submittingText` | `string` | `'Redirecting...'` | Loading button text |\n| `buttonClass` | `string` | Default styles | Custom button CSS classes |\n| `hideButton` | `boolean` | `false` | Hide built-in button |\n| `metadata` | `object` | `{}` | Custom metadata to attach to subscription |\n| `mode` | `'subscription' \\| 'setup' \\| 'payment'` | `'subscription'` | Checkout session mode |\n| `allowPromotionCodes` | `boolean` | `false` | Allow promotion codes in checkout |\n| `trialPeriodDays` | `number` | `undefined` | Number of trial days |\n| `quantity` | `number` | `1` | Subscription quantity |\n| `billingAddressCollection` | `'auto' \\| 'required'` | `'auto'` | Billing address collection |\n| `collectShippingAddress` | `boolean` | `false` | Collect shipping address |\n\n## Styling\n\n### Default Styling\n\nThe component comes with clean, framework-agnostic CSS styling that works out of the box without any CSS framework:\n\n```vue\n\u003cStripePayment :amount=\"1099\" /\u003e\n```\n\nThe default button uses vanilla CSS with a nice blue theme, hover states, and disabled states.\n\n### Custom Button Styling\n\nYou can customize the button with your own CSS classes:\n\n```vue\n\u003cStripePayment\n  :amount=\"1099\"\n  button-class=\"my-custom-button\"\n/\u003e\n```\n\n```css\n.my-custom-button {\n  background: linear-gradient(to right, #667eea, #764ba2);\n  color: white;\n  padding: 12px 24px;\n  border-radius: 8px;\n  font-weight: 600;\n  border: none;\n  cursor: pointer;\n}\n\n.my-custom-button:hover:not(:disabled) {\n  opacity: 0.9;\n}\n\n.my-custom-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n```\n\n### shadcn-vue Integration\n\nThe component automatically detects and uses [shadcn-vue](https://www.shadcn-vue.com/) Button component if it's installed in your project:\n\n```vue\n\u003c!-- If shadcn-vue is installed, this automatically uses the shadcn Button --\u003e\n\u003cStripePayment :amount=\"1099\" /\u003e\n```\n\n**How it works:**\n- The component tries to import `@/components/ui/button/Button.vue`\n- If found, it uses the shadcn Button with `variant=\"default\"`\n- If not found, it falls back to a native HTML button with custom styling\n- When using shadcn, the `buttonClass` prop is ignored to preserve shadcn's styling\n\n**Manual shadcn setup:**\n\nIf you want to ensure shadcn-vue is being used, install it first:\n\n```bash\nnpx shadcn-vue@latest init\nnpx shadcn-vue@latest add button\n```\n\nThen use the payment component as normal - it will automatically use your shadcn Button!\n\n### Hiding the Default Button\n\nIf you want complete control over the button styling or layout:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cStripePayment\n      ref=\"paymentRef\"\n      :amount=\"1099\"\n      hide-button\n      @success=\"handleSuccess\"\n    /\u003e\n    \n    \u003c!-- Your custom button --\u003e\n    \u003cYourCustomButton @click=\"submitPayment\"\u003e\n      Complete Purchase\n    \u003c/YourCustomButton\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst paymentRef = ref(null)\n\nconst submitPayment = () =\u003e {\n  paymentRef.value?.submit()\n}\n\u003c/script\u003e\n```\n\n## Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `@success` | `paymentIntent` | Payment succeeded. Includes `customerId` if customer was created or provided |\n| `@error` | `errorMessage` | Error occurred |\n| `@ready` | - | Form ready for input |\n\n## Composables\n\n### useStripe()\n\nComposable to load Stripe.js script dynamically:\n\n```typescript\nconst { loadStripe, stripeInstance, isLoaded } = useStripe()\n\n// Load Stripe\nconst stripe = await loadStripe('pk_test_xxxxx')\n```\n\n### useStripeSubscription()\n\nComposable for managing Stripe subscriptions:\n\n```typescript\nconst {\n  cancelSubscription,\n  updateSubscription,\n  getSubscription,\n  resumeSubscription,\n  createPortalSession,\n  listSubscriptions\n} = useStripeSubscription()\n\n// Cancel subscription\nawait cancelSubscription('sub_xxxxx', false) // false = cancel at period end\n\n// Update subscription\nawait updateSubscription('sub_xxxxx', {\n  priceId: 'price_new',\n  quantity: 2\n})\n\n// Get subscription\nconst subscription = await getSubscription('sub_xxxxx')\n\n// Resume canceled subscription\nawait resumeSubscription('sub_xxxxx')\n\n// Open customer portal\nconst { url } = await createPortalSession('cus_xxxxx')\nwindow.location.href = url\n\n// List customer subscriptions\nconst { subscriptions } = await listSubscriptions('cus_xxxxx')\n```\n\n## Payment Methods Supported\n\nThe module automatically enables all Stripe payment methods:\n\n- 💳 Credit/Debit Cards\n- 🍎 Apple Pay\n- 🤖 Google Pay\n- 🏦 SEPA Direct Debit\n- 🇦🇹 EPS (Austria)\n- 🇩🇪 Giropay (Germany)\n- 💶 Sofort\n- 💜 Revolut Pay\n- And many more...\n\n## Testing\n\nUse Stripe test cards:\n\n- **Success**: `4242 4242 4242 4242`\n- **Requires 3DS**: `4000 0025 0000 3155`\n- **Declined**: `4000 0000 0000 9995`\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Generate type stubs\nnpm run dev:prepare\n\n# Develop with the playground\nnpm run dev\n\n# Build the playground\nnpm run dev:build\n\n# Run tests\nnpm run test\n\n# Release new version\nnpm run release\n```\n\n## License\n\n[MIT License](./LICENSE)\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-stripe-payments/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/nuxt-stripe-payments\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-stripe-payments.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/nuxt-stripe-payments\n\n[license-src]: https://img.shields.io/npm/l/nuxt-stripe-payments.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/nuxt-stripe-payments\n\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%2Fpathwaysdigital%2Fnuxt-stripe-payments","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpathwaysdigital%2Fnuxt-stripe-payments","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpathwaysdigital%2Fnuxt-stripe-payments/lists"}