You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
🚨 **CAUTION**: Do **NOT** use your Stripe secret key with this component (i.e. keys that begin with `sk_live_...` or `sk_test_...`). This would expose your secret key publicly and potentially give other people the ability to do Bad Things™. Should you accidentally expose your secret keys, strongly consider [rolling your API keys](https://stripe.com/docs/keys#keeping-your-keys-safe).
38
+
31
39
## Basic Usage
32
40
33
41
Within a Vue template:
@@ -53,6 +61,132 @@ Within a Vue template:
53
61
</script>
54
62
```
55
63
56
-
## Documentation
64
+
## Description
65
+
66
+
`VStripeInput` extends [Vuetify's `VTextField` component](https://vuetifyjs.com/en/components/text-fields). That means it inherits and shares the look and feel of all of Vuetify's other form inputs and controls. It supports all of the built-in themes, styles, and props you expect if using the Vuetify UI library.
67
+
68
+
## Props
69
+
70
+
| Name | Type | Default | Required? | Description |
|`apiKey`|`string`|`null`| yes | Your Stripe **public** API key. It should start with `pk_`. Do NOT use your secret key here. [See the Stripe docs for more info](https://stripe.com/docs/keys). |
73
+
|`create`|`string`|`token`| no | Determines whether the control will [create a token](https://stripe.com/docs/stripe-js/reference#stripe-create-token) (e.g. for single use) or [create a source](https://stripe.com/docs/stripe-js/reference#stripe-create-source) (e.g. for multiple uses). |
74
+
|`customStyle`|`object`|`{}`| no | Allows you to override the default styles. [Editable properties are described here](https://stripe.com/docs/stripe-js/reference#element-options). |
75
+
|`fontName`|`string`|`Roboto`| no | The name of the font you want the component to use, as it would appear in CSS, e.g. `Open Sans`. Any [font name available on Google fonts](https://fonts.google.com/) is acceptable. |
76
+
|`fontUrl`|`string`|`''`| no | This is only necessary if the URL from which the font should be retrieved is NOT the default you would get from Google fonts, e.g. if you wanted to use a heavier or lighter weight or if it was served from another domain. |
77
+
|`hideIcon`|`boolean`|`false`| no | If `true`, hides the credit card icon inside the input. |
78
+
|`hidePostalCode`|`boolean`|`false`| no | Hides the postal code entry segment of the input. Only set this to `true` if collecting the postal code separately and passing it to the input. |
79
+
|`iconStyle`| `default|solid` |`default`| no | Allows selecting one of the two icon styles provided by Stripe. |
80
+
|`options`|`object`|`{}`| no | Additional metadata that can be passed to `createToken()` or `createSource()` as described in the Stripe Elements documentation. See below for examples. |
81
+
|`zip`|`string`|`''`| no | If passing the postal (zip) code in from outside the input, i.e. from another input. |
82
+
83
+
## Slots
84
+
85
+
Supports all of the same slots available for [`VTextField`](https://vuetifyjs.com/en/components/text-fields#api)**_except the default slot_**. The default slot is overwritten by Stripe.
86
+
87
+
## Events
88
+
89
+
It _should_ support all of the same events as `VTextField`. Event support has not been thoroughly tested. [Bug reports are welcome](https://github.com/morphatic/v-stripe-elements/issues).
90
+
91
+
By default, the component listens for `change` events. When the user has entered enough information to be considered "complete," the component will make a request to Stripe and attempt to validate the card. If successful, the generated `token` or `source` object will be emitted by the `input` event. The typical way to intercept this is to set the `v-model` prop on the component, to which the `token` or `source` object will be automatically assigned.
92
+
93
+
## Loading Stripe
94
+
95
+
This component relies upon the [Stripe.js library](https://stripe.com/docs/stripe-js/reference) which is designed for use in browser clients or SPAs (single-page apps). As such, Stripe.js must be loaded into the browser before the component can be initialized. There are two ways this can be accomplished:
96
+
97
+
### Loading Stripe via `<script>` Element
98
+
99
+
The easiest and most reliable way to load Stripe is to add a `<script>` element to the `<head>` section of your page. In a typical Vue project, this would be in `public/index.html`. It would look something like:
<scriptsrc="https://js.stripe.com/v3/"></script><!-- <== Stripe loaded HERE -->
112
+
</head>
113
+
```
114
+
115
+
Also note that this is a good place to load any external fonts you'd like to include, but this is not strictly necessary.
116
+
117
+
### Loading Stripe Using `vue-plugin-load-script`
118
+
119
+
When the component is being mounted, it looks for the `Stripe` function in the global scope (i.e. `window.Stripe`). If not found, it will next check to see if [`vue-plugin-load-script`](https://www.npmjs.com/package/vue-plugin-load-script) is available in your project and attempt to load Stripe on the fly. To make the script loader available you should first install it in your project:
120
+
121
+
```bash
122
+
# npm
123
+
npm install --save-dev vue-plugin-load-script
124
+
125
+
# yarn
126
+
yarn add --dev vue-plugin-load-script
127
+
```
128
+
129
+
Then wherever you initialize Vue (usually `src/main.js` in Vue-CLI projects), import and register the script loader plugin:
130
+
131
+
```js
132
+
// src/main.js
133
+
importLoadScriptfrom'vue-plugin-load-script'
134
+
135
+
Vue.use(LoadScript)
136
+
```
137
+
138
+
The benefit of loading Stripe in this way is that if it is only needed rarely in your app, you avoid having to load Stripe on every page load as with the first method. It will be loaded on demand as needed.
139
+
140
+
## Usage in the Browser
141
+
142
+
While in general it is expected that this component will be used primarily in webpack-based projects, it is possible to use it directly in the browser. Just load the JS and CSS files along with Vue and Vuetify:
As it says in [the license](/LICENSE), "THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND." In other words, if you're collecting sensitive information from your users, you should know what you're doing.
187
+
188
+
## Questions, Comments, Bug Reports, etc.
189
+
190
+
Comments, questions, pull requests, and bug reports are very welcome. Please [submit an issue](https://github.com/morphatic/v-stripe-elements/issues) via the Issues tab above.
57
191
58
-
`VStripeInput` extends [Vuetify's basic `VInput` component](https://vuetifyjs.com/en/components/inputs). That means it inherits and shares the look and feel of all of Vuetify's other form inputs and controls. It supports all of the built-in themes, styles, and props you expect if using the Vuetify UI library.
0 commit comments