stripe-payment-element 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +170 -0
  3. package/package.json +47 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Rafael Bardini
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,170 @@
1
+ # `<stripe-payment-element>`
2
+
3
+ [![npm package version](https://img.shields.io/npm/v/stripe-payment-element)](https://www.npmjs.com/package/stripe-payment-element)
4
+ [![Build status](https://img.shields.io/github/actions/workflow/status/rbardini/stripe-payment-element/main.yml)](https://github.com/rbardini/stripe-payment-element/actions)
5
+
6
+ 💳 A web component to accept payments using Stripe's [Payment Element](https://docs.stripe.com/payments/payment-element).
7
+
8
+ ```html
9
+ <stripe-payment-element
10
+ publishable-key="your_publishable_key"
11
+ mode="payment"
12
+ amount="100"
13
+ currency="usd"
14
+ ></stripe-payment-element>
15
+ ```
16
+
17
+ > [!IMPORTANT]
18
+ > [Stripe.js](https://docs.stripe.com/js) is automatically loaded via [esm.sh](https://esm.sh/) if the global `Stripe` function is undefined, see [Options](#options).
19
+
20
+ [View demo →](https://stripe-payment-element.rbrd.in)
21
+
22
+ ## Installation
23
+
24
+ ### Via package manager
25
+
26
+ ```console
27
+ npm install stripe-payment-element
28
+ ```
29
+
30
+ ```js
31
+ import 'stripe-payment-element/register'
32
+ ```
33
+
34
+ ### Via `<script>` tag
35
+
36
+ Download the latest release from npm:
37
+
38
+ ```console
39
+ npm pack stripe-payment-element
40
+ ```
41
+
42
+ Then unpack it into your project and:
43
+
44
+ ```html
45
+ <!-- host yourself -->
46
+ <script type="module" src="register.js"></script>
47
+ ```
48
+
49
+ Or embed from a third-party CDN:
50
+
51
+ ```html
52
+ <!-- esm.sh CDN -->
53
+ <script type="module" src="https://esm.sh/stripe-payment-element/register"></script>
54
+ ```
55
+
56
+ ```html
57
+ <!-- UNPKG CDN -->
58
+ <script type="module" src="https://www.unpkg.com/stripe-payment-element/register"></script>
59
+ ```
60
+
61
+ > [!TIP]
62
+ > Specify a fully resolved package version number to avoid redirects.
63
+
64
+ ## Options
65
+
66
+ | Property | Attribute | Type | Required | Description |
67
+ | ----------------------------- | -------------------------------- | :------: | :------: | ------------------------------------------------------------ |
68
+ | `stripeJsVersion` | `stripe-js-version` | string | | Stripe.js version to load if not present. Defaults to `9`. |
69
+ | `advancedFraudSignals` | `advanced-fraud-signals` | boolean | | See [Advanced fraud detection][ref-advanced-fraud-signals] |
70
+ | `publishableKey` | `publishable-key` | string | ✓ | See [Stripe.js reference][ref-publishable-key] |
71
+ | `stripeAccount` | `stripe-account` | string | | See [Stripe.js reference][ref-stripe-account] |
72
+ | `apiVersion` | `api-version` | string | | See [Stripe.js reference][ref-api-version] |
73
+ | `locale` | `locale` | string | | See [Stripe.js reference][ref-locale] |
74
+ | `betas` | `betas` | string[] | | See [Stripe.js documentation][ref-betas] |
75
+ | `developerTools` | `developer-tools` | object | | See [Stripe.js reference][ref-developer-tools] |
76
+ | `fonts` | `fonts` | object[] | | See [Stripe.js reference][ref-fonts] |
77
+ | `loader` | `loader` | string | | See [Stripe.js reference][ref-loader] |
78
+ | `customerOptions` | `customer-options` | object | | See [Stripe.js documentation][ref-customer-options] |
79
+ | `customerSessionClientSecret` | `customer-session-client-secret` | string | | See [Stripe.js reference][ref-custom-session-client-secret] |
80
+ | `customPaymentMethods` | `custom-payment-methods` | object[] | | See [Stripe.js reference][ref-custom-payment-methods] |
81
+ | `syncAddressCheckbox` | `sync-address-checkbox` | string | | See [Stripe.js reference][ref-sync-address-checkbox] |
82
+ | `paymentMethodCreation` | `payment-method-creation` | string | | See [Stripe.js reference][ref-payment-method-creation] |
83
+ | `disableAnimations` | `disable-animations` | boolean | | See [Elements Appearance API][ref-disable-animations] |
84
+ | `theme` | `theme` | string | | See [Elements Appearance API][ref-theme] |
85
+ | `variables` | `variables` | object | | See [Elements Appearance API][ref-variables] |
86
+ | `rules` | `rules` | object | | See [Elements Appearance API][ref-rules] |
87
+ | `labels` | `labels` | string | | See [Elements Appearance API][ref-labels] |
88
+ | `inputs` | `inputs` | string | | See [Elements Appearance API][ref-inputs] |
89
+ | `mode` | `mode` | string | ✓\* | See [Stripe.js reference][ref-mode] |
90
+ | `amount` | `amount` | number | ✓\* | See [Stripe.js reference][ref-amount] |
91
+ | `currency` | `currency` | string | ✓\* | See [Stripe.js reference][ref-currency] |
92
+ | `setupFutureUsage` | `setup-future-usage` | string | | See [Stripe.js reference][ref-setup-future-usage] |
93
+ | `captureMethod` | `capture-method` | string | | See [Stripe.js reference][ref-capture-method] |
94
+ | `onBehalfOf` | `on-behalf-of` | string | | See [Stripe.js reference][ref-on-behalf-of] |
95
+ | `paymentMethodTypes` | `payment-method-types` | string[] | | See [Stripe.js reference][ref-payment-method-types] |
96
+ | `excludedPaymentMethodTypes` | `excluded-payment-method-types` | string[] | | See [Stripe.js reference][ref-excluded-payment-method-types] |
97
+ | `allowedPaymentMethodTypes` | `allowed-payment-method-types` | string[] | | See [Stripe.js reference][ref-allowed-payment-method-types] |
98
+ | `paymentMethodConfiguration` | `payment-method-configuration` | string | | See [Stripe.js reference][ref-payment-method-configuration] |
99
+ | `paymentMethodOptions` | `payment-method-options` | object | | See [Stripe.js reference][ref-payment-method-options] |
100
+ | `clientSecret` | `client-secret` | string | ✓\* | See [Stripe.js reference][ref-client-secret] |
101
+ | `externalPaymentMethodTypes` | `external-payment-method-types` | string[] | | See [Stripe.js reference][ref-external-payment-method-types] |
102
+ | `defaultValues` | `default-values` | object | | See [Stripe.js reference][ref-default-values] |
103
+ | `business` | `business` | object | | See [Stripe.js reference][ref-business] |
104
+ | `paymentMethodOrder` | `payment-method-order` | string[] | | See [Stripe.js reference][ref-payment-method-order] |
105
+ | `fields` | `fields` | object | | See [Stripe.js reference][ref-fields] |
106
+ | `readOnly` | `read-only` | boolean | | See [Stripe.js reference][ref-read-only] |
107
+ | `terms` | `terms` | object | | See [Stripe.js reference][ref-terms] |
108
+ | `wallets` | `wallets` | object | | See [Stripe.js reference][ref-wallets] |
109
+ | `layout` | `layout` | string | | See [Stripe.js reference][ref-layout] |
110
+ | `applePay` | `apple-pay` | object | | See [Stripe.js reference][ref-apple-pay] |
111
+
112
+ <sup>\* conditionally required</sup>
113
+
114
+ ## Events
115
+
116
+ | Event | Description |
117
+ | -------------------------- | ------------------------------------------------------------------------- |
118
+ | `change` | Fired when the element's value changes. |
119
+ | `ready` | Fired when the element is fully rendered. |
120
+ | `focus` | Fired when the element gains focus. |
121
+ | `blur` | Fired when the element loses focus. |
122
+ | `escape` | Fired when the <kbd>Esc</kbd> key is pressed within the element. |
123
+ | `loaderror` | Fired when the element fails to load. |
124
+ | `loaderstart` | Fired when the loader UI is mounted to the DOM and ready to be displayed. |
125
+ | `carddetailschange` | Fired when the details of a selected card payment method changes. |
126
+ | `savedpaymentmethodupdate` | Fired when a saved payment method is updated. |
127
+ | `savedpaymentmethodremove` | Fired when a saved payment method is removed. |
128
+
129
+ [ref-advanced-fraud-signals]: https://docs.stripe.com/disputes/prevention/advanced-fraud-detection#disabling-advanced-fraud-detection
130
+ [ref-publishable-key]: https://docs.stripe.com/js/initializing#init_stripe_js-publishableKey
131
+ [ref-stripe-account]: https://docs.stripe.com/js/initializing#init_stripe_js-options-stripeAccount
132
+ [ref-api-version]: https://docs.stripe.com/js/initializing#init_stripe_js-options-apiVersion
133
+ [ref-locale]: https://docs.stripe.com/js/initializing#init_stripe_js-options-locale
134
+ [ref-betas]: https://github.com/stripe/stripe-js/blob/v9.0.0/types/stripe-js/stripe.d.ts#L1443-L1449
135
+ [ref-developer-tools]: https://docs.stripe.com/js/initializing#init_stripe_js-options-developerTools
136
+ [ref-fonts]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements-options-fonts
137
+ [ref-loader]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements-options-loader
138
+ [ref-customer-options]: https://github.com/stripe/stripe-js/blob/v9.0.0/types/stripe-js/elements-group.d.ts#L693-L700
139
+ [ref-custom-session-client-secret]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements-options-customerSessionClientSecret
140
+ [ref-custom-payment-methods]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements-options-customPaymentMethods
141
+ [ref-sync-address-checkbox]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements-options-syncAddressCheckbox
142
+ [ref-payment-method-creation]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements-options-paymentMethodCreation
143
+ [ref-disable-animations]: https://docs.stripe.com/elements/appearance-api#others
144
+ [ref-theme]: https://docs.stripe.com/elements/appearance-api#theme
145
+ [ref-variables]: https://docs.stripe.com/elements/appearance-api#variables
146
+ [ref-rules]: https://docs.stripe.com/elements/appearance-api#rules
147
+ [ref-labels]: https://docs.stripe.com/elements/appearance-api#labels
148
+ [ref-inputs]: https://docs.stripe.com/elements/appearance-api#inputs
149
+ [ref-mode]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-mode
150
+ [ref-currency]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-currency
151
+ [ref-amount]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-amount
152
+ [ref-setup-future-usage]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-setupFutureUsage
153
+ [ref-capture-method]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-captureMethod
154
+ [ref-on-behalf-of]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-onBehalfOf
155
+ [ref-payment-method-types]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodTypes
156
+ [ref-excluded-payment-method-types]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-excludedPaymentMethodTypes
157
+ [ref-allowed-payment-method-types]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-allowedPaymentMethodTypes
158
+ [ref-payment-method-configuration]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodConfiguration
159
+ [ref-payment-method-options]: https://docs.stripe.com/js/elements_object/create_without_intent#stripe_elements_no_intent-options-paymentMethodOptions
160
+ [ref-client-secret]: https://docs.stripe.com/js/elements_object/create#stripe_elements-options-clientSecret
161
+ [ref-external-payment-method-types]: https://docs.stripe.com/js#stripe_elements-options-externalPaymentMethodTypes%20(deprecated)
162
+ [ref-default-values]: https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues
163
+ [ref-business]: https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-business
164
+ [ref-payment-method-order]: https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-paymentMethodOrder
165
+ [ref-fields]: https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-fields
166
+ [ref-read-only]: https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-readOnly
167
+ [ref-terms]: https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-terms
168
+ [ref-wallets]: https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-wallets
169
+ [ref-layout]: https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-layout
170
+ [ref-apple-pay]: https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-applePay
package/package.json ADDED
@@ -0,0 +1,47 @@
1
+ {
2
+ "name": "stripe-payment-element",
3
+ "version": "1.0.0",
4
+ "description": "A web component to accept payments using Stripe's Payment Element",
5
+ "keywords": [
6
+ "stripe",
7
+ "payment",
8
+ "checkout",
9
+ "web-component"
10
+ ],
11
+ "homepage": "https://github.com/rbardini/stripe-payment-element",
12
+ "bugs": {
13
+ "url": "https://github.com/rbardini/stripe-payment-element/issues"
14
+ },
15
+ "repository": {
16
+ "type": "git",
17
+ "url": "git+https://github.com/rbardini/stripe-payment-element.git"
18
+ },
19
+ "license": "MIT",
20
+ "author": {
21
+ "name": "Rafael Bardini",
22
+ "email": "rafael@rbardini.com",
23
+ "url": "https://rbardini.com/"
24
+ },
25
+ "type": "module",
26
+ "exports": {
27
+ ".": "./dist/index.js",
28
+ "./register": "./dist/register.js"
29
+ },
30
+ "files": [
31
+ "dist"
32
+ ],
33
+ "scripts": {
34
+ "build": "vite build",
35
+ "dev": "vite",
36
+ "format": "prettier ."
37
+ },
38
+ "devDependencies": {
39
+ "prettier": "3.8.1",
40
+ "prettier-plugin-organize-imports": "4.3.0",
41
+ "prettier-plugin-packagejson": "3.0.2",
42
+ "vite": "8.0.3"
43
+ },
44
+ "publishConfig": {
45
+ "access": "public"
46
+ }
47
+ }