nuxt-stripe-module
    TypeScript icon, indicating that this package has built-in type declarations

    3.2.0 • Public • Published

    Nuxt Stripe Module

    npm (scoped with tag) npm js-standard-style

    A NuxtJS module to import the StripeJS client script.

    Table of Contents

    Requirements

    • npm
    • NuxtJS
    • NodeJS

    Install

    # npm
    $ npm install --save nuxt-stripe-module
    
    # yarn
    $ yarn add nuxt-stripe-module

    Getting Started

    Add 'nuxt-stripe-module' to the modules section of your nuxt.config.js file.

    Method 1 : Inline configuration entry

    {
      modules: [
        ['nuxt-stripe-module', {
          publishableKey: 'YOUR_STRIPE_PUBLISHABLE_KEY',
        }],
      ]
    }

    Method 2 : External configuration entry

    {
      modules: [
        'nuxt-stripe-module',
      ],
      stripe: {
        publishableKey: 'YOUR_STRIPE_PUBLISHABLE_KEY',
      },
    }

    Method 3 : Runtime config

    {
      modules: [
        'nuxt-stripe-module',
      ],
      publicRuntimeConfig: {
        stripe: {
          publishableKey: 'YOUR_STRIPE_PUBLISHABLE_KEY',
        }
      }
    }

    Options

    The following options can be configured in the module's configuration entry in your nuxt.config.js file.

    Publishable key - publishableKey

    • Required
    • Default: null

    Your publishable key.

    https://stripe.com/docs/js/initializing#init_stripe_js-publishableKey

    API version - apiVersion

    • Optional
    • Default: null

    Override your account's API version.

    https://stripe.com/docs/js/initializing#init_stripe_js-options-apiVersion

    Locale - locale

    • Optional
    • Default: 'en'

    A locale used to globally configure localization in Stripe. Setting the locale here will localize error strings for all Stripe.js methods. It will also configure the locale for Elements and Checkout. Default is auto (Stripe detects the locale of the browser).

    Stripe Account - stripeAccount

    • Optional
    • Default: ''

    Usage

    1. Inject the module in your nuxt.config.js file. See Getting Started.
    2. this.$stripe is now available in your components. Note that $stripe can be null if the script fails to load.
    {
      ...
      mounted() {
        if (this.$stripe) {
          const elements = this.$stripe.elements();
          const card = elements.create('card', {});
          // Add an instance of the card Element into the `card-element` <div>
          card.mount('#card-element');
        }
      },
      ...
    }

    For more details, please refer to the official Stripe documentation.

    TypeScript

    Add the types to your "types" array in tsconfig.json after the @nuxt/types (Nuxt 2.9.0+) or @nuxt/vue-app entry

    {
      "compilerOptions": {
        "types": [
          "@nuxt/types",
          "nuxt-stripe-module"
        ]
      }
    }
    

    Why?

    Because of the way Nuxt works the $stripe property on the context has to be merged into the Nuxt Context interface via declaration merging. Adding nuxt-stripe-module to your types will import the types from the package and make typescript aware of the additions to the Context interface.

    License

    MIT License

    Keywords

    none

    Install

    npm i nuxt-stripe-module

    DownloadsWeekly Downloads

    2,447

    Version

    3.2.0

    License

    MIT

    Unpacked Size

    9.09 kB

    Total Files

    7

    Last publish

    Collaborators

    • williamdasilva