diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..8d48c62 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,18 @@ +module.exports = { + // Globs of all the stories in your project + stories: ['../stories/*.stories.{js,mdx}', '../stories/frameworks/*.stories.{js,mdx}'], + + // Configuration for es-dev-server (start-storybook only) + esDevServer: { + nodeResolve: true, + open: true, + }, + + // Rollup build output directory (build-storybook only) + outputDir: '../storybook-static', + + // Configuration for rollup (build-storybook only) + rollup: config => { + return config; + }, +}; diff --git a/README.md b/README.md index 581c306..0e33886 100644 --- a/README.md +++ b/README.md @@ -67,12 +67,12 @@ Then you can add the element to your page. ``` See the demos for more comprehensive examples. - - Using `` with [plain HTML and JavaScript](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-plain-html-and-javascript). - - Using `` in a [LitElement](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-a-lit-element). - - Using `` in a [Vue Component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-a-vue-component). - - Using `` in an [Angular component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-an-angular-component). - - Using `` in a [React component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-a-react-component). - - Using `` in a [Preact component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-a-preact-component). + - Using `` with [plain HTML and JavaScript](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-html--stripe-elements). + - Using `` in a [LitElement](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-litelement--stripe-elements). + - Using `` in a [Vue Component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-vue--stripe-elements). + - Using `` in an [Angular component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-angular--stripe-elements). + - Using `` in a [React component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-react--stripe-elements). + - Using `` in a [Preact component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-preact--stripe-elements). ## Styling @@ -269,12 +269,12 @@ Then you can add the element to your page. ``` See the demos for more comprehensive examples. - - Using `` with [plain HTML and JavaScript](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-plain-html-and-javascript). - - Using `` in a [LitElement](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-a-lit-element). - - Using `` in a [Vue Component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-a-vue-component). - - Using `` in an [Angular component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-an-angular-component). - - Using `` in a [React component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-a-react-component). - - Using `` in a [Preact component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-a-preact-component). + - Using `` with [plain HTML and JavaScript](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-vanilla--stripe-payment-request). + - Using `` in a [LitElement](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-litelement--stripe-payment-request). + - Using `` in a [Vue Component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-vue--stripe-payment-request). + - Using `` in an [Angular component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-angular--stripe-payment-request). + - Using `` in a [React component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-react--stripe-payment-request). + - Using `` in a [Preact component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-preact--stripe-payment-request). **Mixins:** ReadOnlyPropertiesMixin, LitNotify @@ -287,7 +287,7 @@ See the demos for more comprehensive examples. | `billingDetails` | | | `stripe.BillingDetails` | {} | billing_details object sent to create the payment representation. (optional) | | `buttonTheme` | `button-theme` | | `'dark'\|'light'\|'light-outline'` | "dark" | | | `buttonType` | `button-type` | | `'default'\|'book'\|'buy'\|'donate'` | "default" | | -| `canMakePayment` | `can-make-payment` | | `object` | null | Whether or not the device can make the payment request. | +| `canMakePayment` | `can-make-payment` | readonly | `object` | null | Whether or not the device can make the payment request. | | `clientSecret` | `client-secret` | | `String` | | The `client_secret` part of a Stripe `PaymentIntent` | | `country` | `country` | | `string` | | The two-letter country code of your Stripe account (e.g., `US`) | | `currency` | `currency` | | `string` | | Three character currency code (e.g., `usd`) | @@ -357,8 +357,9 @@ See the demos for more comprehensive examples. #### CSS Custom Properties -| Property | Description | -|-----------------------------------------|--------------------------------------------------| -| `'--stripe-payment-request-element` | padding' padding property of the container element. Default `8px 12px` | -| `'--stripe-payment-request-element-min` | width' min-width property of the container element. Default `300px` | +| Property | Description | +|-----------------------------------------------|--------------------------------------------------| +| `--stripe-payment-request-element-background` | background property of the container element. Default `white` | +| `--stripe-payment-request-element-min-width` | min-width property of the container element. Default `300px` | +| `--stripe-payment-request-element-padding` | padding property of the container element. Default `8px 12px` | diff --git a/custom-elements.json b/custom-elements.json index 71e59b6..6a9bc5e 100644 --- a/custom-elements.json +++ b/custom-elements.json @@ -3,7 +3,7 @@ "tags": [ { "name": "stripe-elements", - "description": "[Stripe.js v3 Card Elements](https://stripe.com/docs/elements), but it's a Web Component!\nSupports Shadow DOM.\n\nšŸ‘Øā€šŸŽØ [Live Demo](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--enter-a-stripe-publishable-key) šŸ‘€\n\n### šŸ§™ā€ā™‚ļø Usage\nIf you prebuilt with Snowpack, load the module from your `web_modules` directory\n\n```html\n\n```\n\nAlternatively, load the module from the unpkg CDN\n```html\n\n```\n\nThen you can add the element to your page.\n\n```html\n\n```\n\nSee the demos for more comprehensive examples.\n - Using `` with [plain HTML and JavaScript](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-plain-html-and-javascript).\n - Using `` in a [LitElement](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-a-lit-element).\n - Using `` in a [Vue Component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-a-vue-component).\n - Using `` in an [Angular component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-an-angular-component).\n - Using `` in a [React component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-a-react-component).\n - Using `` in a [Preact component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-a-preact-component).\n\n## Styling\n\nStripe v3's 'Stripe Elements' are not custom elements, but rather forms\nhosted by stripe and injected into your page via an iFrame. When we refer to the\n'Stripe Element' in this document, we are referring to the hosted Stripe form,\nnot the `` custom element. But when I mention the 'element', I mean the custom element.\n\nWhen you apply CSS to the custom properties available, they're parsed and sent to Stripe, who should apply them to the Stripe Element they return in the iFrame.\n\n- `base` styles are inherited by all other variants.\n- `complete` styles are applied when the Stripe Element has valid input.\n- `empty` styles are applied when the Stripe Element has no user input.\n- `invalid` styles are applied when the Stripe Element has invalid input.\n\nThere are 11 properties for each state that you can set which will be read into the Stripe Element iFrame:\n\n- `color`\n- `font-family`\n- `font-size`\n- `font-smoothing`\n- `font-variant`\n- `icon-color`\n- `line-height`\n- `letter-spacing`\n- `text-decoration`\n- `text-shadow`\n- `text-transform`", + "description": "[Stripe.js v3 Card Elements](https://stripe.com/docs/elements), but it's a Web Component!\nSupports Shadow DOM.\n\nšŸ‘Øā€šŸŽØ [Live Demo](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--enter-a-stripe-publishable-key) šŸ‘€\n\n### šŸ§™ā€ā™‚ļø Usage\nIf you prebuilt with Snowpack, load the module from your `web_modules` directory\n\n```html\n\n```\n\nAlternatively, load the module from the unpkg CDN\n```html\n\n```\n\nThen you can add the element to your page.\n\n```html\n\n```\n\nSee the demos for more comprehensive examples.\n - Using `` with [plain HTML and JavaScript](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-html--stripe-elements).\n - Using `` in a [LitElement](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-litelement--stripe-elements).\n - Using `` in a [Vue Component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-vue--stripe-elements).\n - Using `` in an [Angular component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-angular--stripe-elements).\n - Using `` in a [React component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-react--stripe-elements).\n - Using `` in a [Preact component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-preact--stripe-elements).\n\n## Styling\n\nStripe v3's 'Stripe Elements' are not custom elements, but rather forms\nhosted by stripe and injected into your page via an iFrame. When we refer to the\n'Stripe Element' in this document, we are referring to the hosted Stripe form,\nnot the `` custom element. But when I mention the 'element', I mean the custom element.\n\nWhen you apply CSS to the custom properties available, they're parsed and sent to Stripe, who should apply them to the Stripe Element they return in the iFrame.\n\n- `base` styles are inherited by all other variants.\n- `complete` styles are applied when the Stripe Element has valid input.\n- `empty` styles are applied when the Stripe Element has no user input.\n- `invalid` styles are applied when the Stripe Element has invalid input.\n\nThere are 11 properties for each state that you can set which will be read into the Stripe Element iFrame:\n\n- `color`\n- `font-family`\n- `font-size`\n- `font-smoothing`\n- `font-variant`\n- `icon-color`\n- `line-height`\n- `letter-spacing`\n- `text-decoration`\n- `text-shadow`\n- `text-transform`", "attributes": [ { "name": "hide-icon", @@ -631,7 +631,7 @@ }, { "name": "stripe-payment-request", - "description": "Custom element wrapper for Stripe.js v3 Payment Request Buttons.\n\nšŸ‘Øā€šŸŽØ [Live Demo](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--enter-a-stripe-publishable-key) šŸ‘€\n\n### šŸ§™ā€ā™‚ļø Usage\nIf you prebuilt with Snowpack, load the module from your `web_modules` directory\n\n```html\n\n```\n\nAlternatively, load the module from the unpkg CDN\n```html\n\n```\n\nThen you can add the element to your page.\n\n```html\n\n\n```\n\nSee the demos for more comprehensive examples.\n - Using `` with [plain HTML and JavaScript](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-plain-html-and-javascript).\n - Using `` in a [LitElement](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-a-lit-element).\n - Using `` in a [Vue Component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-a-vue-component).\n - Using `` in an [Angular component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-an-angular-component).\n - Using `` in a [React component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-a-react-component).\n - Using `` in a [Preact component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-a-preact-component).", + "description": "Custom element wrapper for Stripe.js v3 Payment Request Buttons.\n\nšŸ‘Øā€šŸŽØ [Live Demo](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--enter-a-stripe-publishable-key) šŸ‘€\n\n### šŸ§™ā€ā™‚ļø Usage\nIf you prebuilt with Snowpack, load the module from your `web_modules` directory\n\n```html\n\n```\n\nAlternatively, load the module from the unpkg CDN\n```html\n\n```\n\nThen you can add the element to your page.\n\n```html\n\n\n```\n\nSee the demos for more comprehensive examples.\n - Using `` with [plain HTML and JavaScript](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-vanilla--stripe-payment-request).\n - Using `` in a [LitElement](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-litelement--stripe-payment-request).\n - Using `` in a [Vue Component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-vue--stripe-payment-request).\n - Using `` in an [Angular component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-angular--stripe-payment-request).\n - Using `` in a [React component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-react--stripe-payment-request).\n - Using `` in a [Preact component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-preact--stripe-payment-request).", "attributes": [ { "name": "amount", @@ -1099,12 +1099,16 @@ ], "cssProperties": [ { - "name": "'--stripe-payment-request-element-min", - "description": "width' min-width property of the container element. Default `300px`" + "name": "--stripe-payment-request-element-min-width", + "description": "min-width property of the container element. Default `300px`" }, { - "name": "'--stripe-payment-request-element", - "description": "padding' padding property of the container element. Default `8px 12px`" + "name": "--stripe-payment-request-element-padding", + "description": "padding property of the container element. Default `8px 12px`" + }, + { + "name": "--stripe-payment-request-element-background", + "description": "background property of the container element. Default `white`" } ], "cssParts": [ diff --git a/package-lock.json b/package-lock.json index 014c800..a0f4d0b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3758,9 +3758,9 @@ } }, "@open-wc/demoing-storybook": { - "version": "1.8.3", - "resolved": "https://registry.npmjs.org/@open-wc/demoing-storybook/-/demoing-storybook-1.8.3.tgz", - "integrity": "sha512-9hNP89Wl0OJkXytIaNtKdrWrF+SlX2xg69UteGQU4KzqpZmQs3SiAkzl97pSArmFuV/iBWyUUBu4c6/cLMoOlQ==", + "version": "1.8.5", + "resolved": "https://registry.npmjs.org/@open-wc/demoing-storybook/-/demoing-storybook-1.8.5.tgz", + "integrity": "sha512-9yL4zaN1iT+xPLgejzlVJ/FX+3DaXC8maq5OxcvEr40VIzb6F4yeC6qsmkWDOhYdmUl07WPSkXhLPH8zlbV2uA==", "dev": true, "requires": { "@babel/core": "^7.7.2", @@ -3822,14 +3822,14 @@ } }, "@open-wc/lit-helpers": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/@open-wc/lit-helpers/-/lit-helpers-0.2.5.tgz", - "integrity": "sha512-YkBOaQLQnJPKwJlLB15ehNSeYQB+u+jlpJmvhgVwI+9s/bgpfNtd/L/pDui7gDbxFiu7hukQgFtVk9FTklIN2Q==" + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/@open-wc/lit-helpers/-/lit-helpers-0.2.6.tgz", + "integrity": "sha512-RJlxvkjpFPwuMhPvuOUHVmDEwEFC4OdD1cjKrnQDg7qTsA065UPRjWP8eqxdTNr0WKwUF9kZE7NYg0VavD2ZJA==" }, "@open-wc/semantic-dom-diff": { - "version": "0.15.5", - "resolved": "https://registry.npmjs.org/@open-wc/semantic-dom-diff/-/semantic-dom-diff-0.15.5.tgz", - "integrity": "sha512-cODcMLSKRuyAQVa1I+NNjj5A+j5o2qhTW00ztcoEg+bkeutvFqWsB8YG0HS/NhP+wJKe/nOcmt4i2T6KwCTNLw==", + "version": "0.15.6", + "resolved": "https://registry.npmjs.org/@open-wc/semantic-dom-diff/-/semantic-dom-diff-0.15.6.tgz", + "integrity": "sha512-dxDjgksHW1wWMs6FSl0GA24n6cB5cj7Ug2w53ztjdOefwg2P/I/zjII9Qvyms4LNvjgXD1asfoy3jye3ADQG3w==", "dev": true }, "@open-wc/storybook-prebuilt": { @@ -3839,14 +3839,14 @@ "dev": true }, "@open-wc/testing": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/@open-wc/testing/-/testing-2.5.0.tgz", - "integrity": "sha512-giqTHQgQ3eQmX7AUsrC71IzZAtOsnki2OxYgrUQoqtL1bJ3fvsQqL6RxuB16C6nCMJgzQhEIJWr2AMjylUBZxw==", + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@open-wc/testing/-/testing-2.5.1.tgz", + "integrity": "sha512-nH4/xW7iWjgBm+68mJPeG5daBjj122LpbCgYbRa5hED+nPqEkxqaHRGNd8P26VDhIpZnwZymzuq6SiXHhIh7Mg==", "dev": true, "requires": { "@open-wc/chai-dom-equals": "^0.12.36", - "@open-wc/semantic-dom-diff": "^0.15.5", - "@open-wc/testing-helpers": "^1.5.0", + "@open-wc/semantic-dom-diff": "^0.15.6", + "@open-wc/testing-helpers": "^1.5.1", "@types/chai": "^4.1.7", "@types/chai-dom": "^0.0.8", "@types/mocha": "^5.0.0", @@ -3859,9 +3859,9 @@ } }, "@open-wc/testing-helpers": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/@open-wc/testing-helpers/-/testing-helpers-1.5.0.tgz", - "integrity": "sha512-ykm6vk46YqKHdhOhrGuMVayClImU7EnisoQAzCmu2jClU/8FnNHA/ZPBzLssZy/w1ykcrGhB+8QCz7x9kHBHdQ==", + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@open-wc/testing-helpers/-/testing-helpers-1.5.1.tgz", + "integrity": "sha512-CGLonS+dwcydBCQF3cQflGvQCaCinEXVqLm1smQuf/FOZ51Ou7Sr5aV/RB3XTCu4VaL8YniKeOc8Xr3RnL/3IQ==", "dev": true }, "@open-wc/testing-karma": { @@ -4345,9 +4345,9 @@ "dev": true }, "@types/estree": { - "version": "0.0.41", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.41.tgz", - "integrity": "sha512-rIAmXyJlqw4KEBO7+u9gxZZSQHaCNnIzYrnNmYVpgfJhxTqO0brCX0SYpqUTkVI5mwwUwzmtspLBGBKroMeynA==", + "version": "0.0.42", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.42.tgz", + "integrity": "sha512-K1DPVvnBCPxzD+G51/cxVIoc2X8uUVl1zpJeE6iKcgHMj4+tbat5Xu4TjV7v2QSDbIeAfLi2hIk+u2+s0MlpUQ==", "dev": true }, "@types/history": { @@ -4369,9 +4369,9 @@ "dev": true }, "@types/istanbul-lib-report": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz", - "integrity": "sha512-3BUTyMzbZa2DtDI2BkERNC6jJw2Mr2Y0oGI7mRxYNBPxppbtEK1F66u3bKwU2g+wxwWI7PAoRpJnOY1grJqzHg==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz", + "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==", "dev": true, "requires": { "@types/istanbul-lib-coverage": "*" @@ -4439,9 +4439,9 @@ } }, "@types/react": { - "version": "16.9.17", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.17.tgz", - "integrity": "sha512-UP27In4fp4sWF5JgyV6pwVPAQM83Fj76JOcg02X5BZcpSu5Wx+fP9RMqc2v0ssBoQIFvD5JdKY41gjJJKmw6Bg==", + "version": "16.9.19", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.19.tgz", + "integrity": "sha512-LJV97//H+zqKWMms0kvxaKYJDG05U2TtQB3chRLF8MPNs+MQh/H1aGlyDUxjaHvu08EAGerdX2z4LTBc7ns77A==", "dev": true, "requires": { "@types/prop-types": "*", @@ -4510,9 +4510,9 @@ "dev": true }, "@types/yargs": { - "version": "13.0.5", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.5.tgz", - "integrity": "sha512-CF/+sxTO7FOwbIRL4wMv0ZYLCRfMid2HQpzDRyViH7kSpfoAFiMdGqKIxb1PxWfjtQXQhnQuD33lvRHNwr809Q==", + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.6.tgz", + "integrity": "sha512-IkltIncDQWv6fcAvnHtJ6KtkmY/vtR3bViOaCzpj/A3yNhlfZAgxNe6AEQD1cQrkYD+YsKVo08DSxvNKEsD7BA==", "dev": true, "requires": { "@types/yargs-parser": "*" @@ -5812,9 +5812,9 @@ } }, "comma-separated-tokens": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.7.tgz", - "integrity": "sha512-Jrx3xsP4pPv4AwJUDWY9wOXGtwPXARej6Xd99h4TUGotmf8APuquKMpK+dnD3UgyxK7OEWaisjZz+3b5jtL6xQ==", + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz", + "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==", "dev": true }, "command-line-args": { @@ -7424,12 +7424,12 @@ } }, "fault": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.3.tgz", - "integrity": "sha512-sfFuP4X0hzrbGKjAUNXYvNqsZ5F6ohx/dZ9I0KQud/aiZNwg263r5L9yGB0clvXHCkzXh5W3t7RSHchggYIFmA==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz", + "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==", "dev": true, "requires": { - "format": "^0.2.2" + "format": "^0.2.0" } }, "fb-watchman": { @@ -7575,6 +7575,15 @@ "locate-path": "^3.0.0" } }, + "find-versions": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.2.0.tgz", + "integrity": "sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==", + "dev": true, + "requires": { + "semver-regex": "^2.0.0" + } + }, "find-yarn-workspace-root": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-1.2.1.tgz", @@ -7636,9 +7645,9 @@ "dev": true }, "flow-parser": { - "version": "0.116.1", - "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.116.1.tgz", - "integrity": "sha512-uMbaTjiMhBKa/il1esHyWyVVWfrWdG/eLmG62MQulZ59Yghpa30H1tmukFZLptsBafZ8ddiPyf7I+SiA+euZ6A==", + "version": "0.117.0", + "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.117.0.tgz", + "integrity": "sha512-B9wlFfFtE9R9+lvhfShHIuE1eGLfTmMDUxIBU3NfbVynVzB2LNT38A5xBUURW5AYlkJveIlCcEsouOsro/DNWg==", "dev": true }, "focus-lock": { @@ -8149,9 +8158,9 @@ "dev": true }, "hoist-non-react-statics": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", - "integrity": "sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw==", + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", "dev": true, "requires": { "react-is": "^16.7.0" @@ -8191,9 +8200,9 @@ "dev": true }, "html-void-elements": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.4.tgz", - "integrity": "sha512-yMk3naGPLrfvUV9TdDbuYXngh/TpHbA6TrOw3HL9kS8yhwx7i309BReNg7CbAJXGE+UMJ6je5OqJ7lC63o6YuQ==", + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.5.tgz", + "integrity": "sha512-uE/TxKuyNIcx44cIWnjr/rfIATDH7ZaOMmstu0CwhFG1Dunhlp4OC6/NMbhiwoq5BpW0ubi303qnEk/PZj614w==", "dev": true }, "htmlparser2": { @@ -8264,14 +8273,16 @@ } }, "husky": { - "version": "4.0.10", - "resolved": "https://registry.npmjs.org/husky/-/husky-4.0.10.tgz", - "integrity": "sha512-Ptm4k2DqOwxeK/kzu5RaJmNRoGvESrgDXObFcZ8aJZcyXyMBHhM2FqZj6zYKdetadmP3wCwxEHCBuB9xGlRp8A==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/husky/-/husky-4.2.1.tgz", + "integrity": "sha512-Qa0lRreeIf4Tl92sSs42ER6qc3hzoyQPPorzOrFWfPEVbdi6LuvJEqWKPk905fOWIR76iBpp7ECZNIwk+a8xuQ==", "dev": true, "requires": { "chalk": "^3.0.0", "ci-info": "^2.0.0", + "compare-versions": "^3.5.1", "cosmiconfig": "^6.0.0", + "find-versions": "^3.2.0", "opencollective-postinstall": "^2.0.2", "pkg-dir": "^4.2.0", "please-upgrade-node": "^3.2.0", @@ -8814,9 +8825,9 @@ } }, "is-plain-obj": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.0.0.tgz", - "integrity": "sha512-EYisGhpgSCwspmIuRHGjROWTon2Xp8Z7U03Wubk/bTL5TTRC5R1rGVgyjzBrk9+ULdH6cRD06KRcw/xfqhVYKQ==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz", + "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==", "dev": true }, "is-plain-object": { @@ -11949,9 +11960,9 @@ } }, "popper.js": { - "version": "1.16.0", - "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.0.tgz", - "integrity": "sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw==", + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", "dev": true }, "portfinder": { @@ -12060,12 +12071,12 @@ } }, "property-information": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.3.0.tgz", - "integrity": "sha512-IslotQn1hBCZDY7SaJ3zmCjVea219VTwmOk6Pu3z9haU9m4+T8GwaDubur+6NMHEU+Fjs/6/p66z6QULPkcL1w==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.4.0.tgz", + "integrity": "sha512-nmMWAm/3vKFGmmOWOcdLjgq/Hlxa+hsuR/px1Lp/UGEyc5A22A6l78Shc2C0E71sPmAqglni+HrS7L7VJ7AUCA==", "dev": true, "requires": { - "xtend": "^4.0.1" + "xtend": "^4.0.0" } }, "pseudomap": { @@ -12337,9 +12348,9 @@ } }, "react-element-to-jsx-string": { - "version": "14.3.0", - "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.0.tgz", - "integrity": "sha512-7FiMiLf9Cir7k1m1pzFxYWGvb/FpCKHLQBQZVL7T00mZr/VrVDXu+StH4EnZwXk8CI7MapPAZybTAW5ia71uzQ==", + "version": "14.3.1", + "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.1.tgz", + "integrity": "sha512-LRdQWRB+xcVPOL4PU4RYuTg6dUJ/FNmaQ8ls6w38YbzkbV6Yr5tFNESroub9GiSghtnMq8dQg2LcNN5aMIDzVg==", "dev": true, "requires": { "@base2/pretty-print-object": "1.0.0", @@ -12565,9 +12576,9 @@ "dev": true }, "refractor": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.10.0.tgz", - "integrity": "sha512-maW2ClIkm9IYruuFYGTqKzj+m31heq92wlheW4h7bOstP+gf8bocmMec+j7ljLcaB1CAID85LMB3moye31jH1g==", + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.10.1.tgz", + "integrity": "sha512-Xh9o7hQiQlDbxo5/XkOX6H+x/q8rmlmZKr97Ie1Q8ZM32IRRd3B/UxuA/yXDW79DBSXGWxm2yRTbcTVmAciJRw==", "dev": true, "requires": { "hastscript": "^5.0.0", @@ -13144,9 +13155,9 @@ } }, "rollup": { - "version": "1.29.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.29.0.tgz", - "integrity": "sha512-V63Iz0dSdI5qPPN5HmCN6OBRzBFhMqNWcvwgq863JtSCTU6Vdvqq6S2fYle/dSCyoPrBkIP3EIr1RVs3HTRqqg==", + "version": "1.29.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.29.1.tgz", + "integrity": "sha512-dGQ+b9d1FOX/gluiggTAVnTvzQZUEkCi/TwZcax7ujugVRHs0nkYJlV9U4hsifGEMojnO+jvEML2CJQ6qXgbHA==", "dev": true, "requires": { "@types/estree": "*", @@ -13357,6 +13368,12 @@ "semver": "^5.0.3" } }, + "semver-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz", + "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==", + "dev": true + }, "send": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/send/-/send-0.1.0.tgz", @@ -13508,9 +13525,9 @@ } }, "sinon": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/sinon/-/sinon-8.1.0.tgz", - "integrity": "sha512-6/05TR+8QhEgTbyMWaConm8iPL609Eno7SqToPq63wC/jS/6NMEI4NxqtzlLkk3r/KcZT9xPXQodH0oJ917Hbg==", + "version": "8.1.1", + "resolved": "https://registry.npmjs.org/sinon/-/sinon-8.1.1.tgz", + "integrity": "sha512-E+tWr3acRdoe1nXbHMu86SSqA1WGM7Yw3jZRLvlCMnXwTHP8lgFFVn5BnKnF26uc5SfZ3D7pA9sN7S3Y2jG4Ew==", "dev": true, "requires": { "@sinonjs/commons": "^1.7.0", @@ -13868,9 +13885,9 @@ "dev": true }, "space-separated-tokens": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.4.tgz", - "integrity": "sha512-UyhMSmeIqZrQn2UdjYpxEkwY9JUrn8pP+7L4f91zRzOQuI8MF1FGLfYU9DKCYeLdo7LXMxwrX5zKFy7eeeVHuA==", + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz", + "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==", "dev": true }, "spdx-correct": { @@ -14501,9 +14518,9 @@ "dev": true }, "trim-lines": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-1.1.2.tgz", - "integrity": "sha512-3GOuyNeTqk3FAqc3jOJtw7FTjYl94XBR5aD9QnDbK/T4CA9sW/J0l9RoaRPE9wyPP7NF331qnHnvJFBJ+IDkmQ==", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-1.1.3.tgz", + "integrity": "sha512-E0ZosSWYK2mkSu+KEtQ9/KqarVjA9HztOSX+9FDdNacRAq29RRV6ZQNgob3iuW8Htar9vAfEa6yyt5qBAHZDBA==", "dev": true }, "trim-trailing-lines": { @@ -14519,9 +14536,9 @@ "dev": true }, "ts-dedent": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-1.1.0.tgz", - "integrity": "sha512-CVCvDwMBWZKjDxpN3mU/Dx1v3k+sJgE8nrhXcC9vRopRfoa7vVzilNvHEAUi5jQnmFHpnxDx5jZdI1TpG8ny2g==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-1.1.1.tgz", + "integrity": "sha512-UGTRZu1evMw4uTPyYF66/KFd22XiU+jMaIuHrkIHQ2GivAXVlLV0v/vHrpOuTRf9BmpNHi/SO7Vd0rLu0y57jg==", "dev": true }, "ts-map": { @@ -15046,9 +15063,9 @@ }, "dependencies": { "es-abstract": { - "version": "1.17.2", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.2.tgz", - "integrity": "sha512-YoKuru3Lyoy7yVTBSH2j7UxTqe/je3dWAruC0sHvZX1GNd5zX8SSLvQqEgO9b3Ex8IW+goFI9arEEsFIbulhOw==", + "version": "1.17.4", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.4.tgz", + "integrity": "sha512-Ae3um/gb8F0mui/jPL+QiqmglkUsaQf7FwBEHYIFkztkneosu9imhqHpBzQ3h1vit8t5iQ74t6PEVvphBZiuiQ==", "dev": true, "requires": { "es-to-primitive": "^1.2.1", @@ -15225,9 +15242,9 @@ "dev": true }, "vue-docgen-api": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.6.0.tgz", - "integrity": "sha512-Aa61+Xk5u4BGOkLLu3PwVy0u+68ftFHdFhQVkrrTGgEOS6RwPvsEqRyI6O3mWIy4nIRYBhGBsphNh/Wt4vZm8A==", + "version": "4.7.6", + "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.7.6.tgz", + "integrity": "sha512-eB4cVAVliiQVQIwvbhWs0t6RAFIdVabyGlDAxjtq3ghgtOQdUiVKMQsJPi+YxbMlWS99nrWLp+kC8TdMIuh6+g==", "dev": true, "requires": { "@babel/parser": "^7.6.0", @@ -15452,9 +15469,9 @@ } }, "web-namespaces": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.3.tgz", - "integrity": "sha512-r8sAtNmgR0WKOKOxzuSgk09JsHlpKlB+uHi937qypOu3PZ17UxPrierFKDye/uNHjNTTEshu5PId8rojIPj/tA==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-1.1.4.tgz", + "integrity": "sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==", "dev": true }, "webidl-conversions": { @@ -16033,9 +16050,9 @@ "dev": true }, "zwitch": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.4.tgz", - "integrity": "sha512-YO803/X+13GNaZB7fVopjvHH0uWQKgJkgKnU1YCjxShjKGVuN9PPHHW8g+uFDpkHpSTNi3rCMKMewIcbC1BAYg==", + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz", + "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==", "dev": true } } diff --git a/package.json b/package.json index ad28013..dba8218 100644 --- a/package.json +++ b/package.json @@ -66,8 +66,8 @@ "@babel/preset-env": "^7.8.2", "@material/mwc-button": "^0.12.0", "@material/mwc-textfield": "^0.12.0", - "@open-wc/demoing-storybook": "^1.6.4", - "@open-wc/testing": "^2.5.0", + "@open-wc/demoing-storybook": "^1.8.5", + "@open-wc/testing": "^2.5.1", "@open-wc/testing-karma": "^3.2.30", "@power-elements/codesandbox-button": "0.0.2", "@power-elements/json-viewer": "^1.0.1", @@ -87,17 +87,17 @@ "eslint-plugin-json": "^2.0.1", "eslint-plugin-no-loops": "^0.3.0", "eslint-plugin-no-only-tests": "^2.4.0", - "husky": "^4.0.10", + "husky": "^4.2.1", "karma-helpful-reporter": "^0.3.4", "karma-osx-reporter": "^0.2.1", "karma-tape-reporter": "^1.0.3", "luhn-js": "^1.1.2", "npm-run-all": "^4.1.5", "patch-package": "^6.2.0", - "rollup": "^1.29.0", + "rollup": "^1.29.1", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-lit-css": "^2.0.0", - "sinon": "^8.0.4", + "sinon": "^8.1.1", "sinon-chai": "^3.4.0", "stylelint-config-standard": "^19.0.0", "typescript": "^3.7.4", @@ -109,7 +109,7 @@ "@lavadrop/kebab-case": "^3.0.0", "@lavadrop/pick": "^0.8.0", "@morbidick/lit-element-notify": "^1.0.2", - "@open-wc/lit-helpers": "^0.2.5", + "@open-wc/lit-helpers": "^0.2.6", "@pacote/memoize": "^1.1.1", "@typed/curry": "^1.0.1", "karma-tap-reporter": "0.0.6", diff --git a/src/StripeBase.js b/src/StripeBase.js index 8e2ddf4..feafc9c 100644 --- a/src/StripeBase.js +++ b/src/StripeBase.js @@ -6,7 +6,7 @@ import bound from 'bound-decorator'; import { ReadOnlyPropertiesMixin } from './lib/read-only-properties'; import { appendTemplate, remove } from './lib/dom'; -import { dash, generateRandomMountElementId, isString } from './lib/strings'; +import { dash, generateRandomMountElementId } from './lib/strings'; import { isRepresentation } from './lib/predicates'; import { throwBadResponse } from './lib/fetch'; diff --git a/src/StripeElements.js b/src/StripeElements.js index bcf5cb9..b04a4de 100644 --- a/src/StripeElements.js +++ b/src/StripeElements.js @@ -52,12 +52,12 @@ const allowedStyles = [ * ``` * * See the demos for more comprehensive examples. - * - Using `` with [plain HTML and JavaScript](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-plain-html-and-javascript). - * - Using `` in a [LitElement](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-a-lit-element). - * - Using `` in a [Vue Component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-a-vue-component). - * - Using `` in an [Angular component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-an-angular-component). - * - Using `` in a [React component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-a-react-component). - * - Using `` in a [Preact component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--in-a-preact-component). + * - Using `` with [plain HTML and JavaScript](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-html--stripe-elements). + * - Using `` in a [LitElement](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-litelement--stripe-elements). + * - Using `` in a [Vue Component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-vue--stripe-elements). + * - Using `` in an [Angular component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-angular--stripe-elements). + * - Using `` in a [React component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-react--stripe-elements). + * - Using `` in a [Preact component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-preact--stripe-elements). * * ## Styling * diff --git a/src/StripePaymentRequest.js b/src/StripePaymentRequest.js index e97b1f4..6a83378 100644 --- a/src/StripePaymentRequest.js +++ b/src/StripePaymentRequest.js @@ -49,16 +49,16 @@ const parseDataset = mapDataset(parseAmount); * ``` * * See the demos for more comprehensive examples. - * - Using `` with [plain HTML and JavaScript](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-plain-html-and-javascript). - * - Using `` in a [LitElement](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-a-lit-element). - * - Using `` in a [Vue Component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-a-vue-component). - * - Using `` in an [Angular component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-an-angular-component). - * - Using `` in a [React component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-a-react-component). - * - Using `` in a [Preact component](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--in-a-preact-component). + * - Using `` with [plain HTML and JavaScript](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-vanilla--stripe-payment-request). + * - Using `` in a [LitElement](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-litelement--stripe-payment-request). + * - Using `` in a [Vue Component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-vue--stripe-payment-request). + * - Using `` in an [Angular component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-angular--stripe-payment-request). + * - Using `` in a [React component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-react--stripe-payment-request). + * - Using `` in a [Preact component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-preact--stripe-payment-request). * - * @cssprop '--stripe-payment-request-element-min-width' min-width property of the container element. Default `300px` - * @cssprop '--stripe-payment-request-element-padding' padding property of the container element. Default `8px 12px` - * @cssprop '--stripe-payment-request-element-background' background property of the container element. Default `white` + * @cssprop [--stripe-payment-request-element-min-width] - min-width property of the container element. Default `300px` + * @cssprop [--stripe-payment-request-element-padding] - padding property of the container element. Default `8px 12px` + * @cssprop [--stripe-payment-request-element-background] - background property of the container element. Default `white` * * @element stripe-payment-request * @extends StripeBase @@ -85,6 +85,7 @@ export class StripePaymentRequest extends StripeBase { /** * Whether or not the device can make the payment request. * @type {object} + * @readonly */ @property({ type: Boolean, diff --git a/stories/frameworks/angular.stories.mdx b/stories/frameworks/angular.stories.mdx new file mode 100644 index 0000000..4400626 --- /dev/null +++ b/stories/frameworks/angular.stories.mdx @@ -0,0 +1,86 @@ +import '@power-elements/codesandbox-button'; + +import { html, Meta, Story } from '@open-wc/demoing-storybook'; + + + +# `` + + + {html` `} + + + +```ts +import { Component } from "@angular/core"; +import { PUBLISHABLE_KEY } from './config'; + +const template = ` + + + Get Token + + +`; + +const styleUrls = ["./app.component.css"]; + +@Component({ selector: "app-root", template, styleUrls }) +export class AppComponent { + publishableKey: string = PUBLISHABLE_KEY; + disabled = true; + token?: stripe.Token = null; + error?: Error | stripe.Error = null; + createToken(stripeElements: any) { + stripeElements.createToken(); + } +} +``` + +# `` + + + {html` `} + + + +```ts +import { Component } from "@angular/core"; +import { PUBLISHABLE_KEY } from './config'; + +const template = ` + + + +`; + +const styleUrls = ["./app.component.css"]; + +@Component({ selector: "app-root", template, styleUrls }) +export class AppComponent { + publishableKey: string = PUBLISHABLE_KEY; + paymentMethod?: stripe.paymentMethod.PaymentMethod = null; + error?: Error | stripe.Error = null; +} +``` diff --git a/stories/frameworks/lit.stories.mdx b/stories/frameworks/lit.stories.mdx new file mode 100644 index 0000000..031d8d6 --- /dev/null +++ b/stories/frameworks/lit.stories.mdx @@ -0,0 +1,122 @@ +import '@power-elements/codesandbox-button'; + +import { html, Meta, Story } from '@open-wc/demoing-storybook'; + + + +# `` + + + {html``} + + +```js +import '@power-elements/stripe-elements'; +import '@power-elements/json-viewer'; +import { LitElement, html } from 'lit-element'; +import { PUBLISHABLE_KEY } from './config.js'; + +class PaymentForm extends LitElement { + static get properties() { + return { + error: { type: Object }, + source: { type: Object }, + } + } + + render() { + return html` + + Submit + + + + + + `; + } + + onChange({ target: { complete, hasError } }) { + this.submitDisabled = !(complete && !hasError); + } + + onClick() { + this.shadowRoot.querySelector("stripe-elements").createSource(); + } + + onSource({ detail: source }) { + this.source = source; + } + + onError({ target: { error } }) { + this.error = error; + } +} +``` + +# `` + + + {html``} + + +```js +import { LitElement, html } from 'lit-element'; +import { PUBLISHABLE_KEY } from './config.js'; + +const displayItems = [ + { amount: '125', label: 'Double Double' }, + { amount: '199', label: 'Box of 10 Timbits' }, +] + +const shippingOptions = [ + { id: 'pick-up', amount: 0, label: 'Pick Up', detail: "Pick Up at Your Local Timmy's" }, + { id: 'delivery', amount: 200, label: 'Delivery', detail: 'Timbits to Your Door' } +] + +class PaymentForm extends LitElement { + static get properties() { + return { + paymentMethod: { type: Object }, + }; + } + + render() { + return html` + + + + + `; + } + + onPaymentMethod({ detail: paymentMethod }) { + this.paymentMethod = paymentMethod; + } + + onError({ target: { error } }) { + this.error = error; + } +} +``` diff --git a/stories/frameworks/preact.stories.mdx b/stories/frameworks/preact.stories.mdx new file mode 100644 index 0000000..6536df1 --- /dev/null +++ b/stories/frameworks/preact.stories.mdx @@ -0,0 +1,113 @@ +import '@power-elements/codesandbox-button'; + +import { html, Meta, Story } from '@open-wc/demoing-storybook'; + + + +# `` + + + {html` `} + + +```jsx +import { loadScripts } from "./loadScripts"; +import { render } from "preact"; +import { useState, useRef } from "preact/hooks"; +import { getPropOr, compose } from "crocks"; +import { PUBLISHABLE_KEY } from './config'; +import "./style"; + +const isDisabled = ({ complete, empty }) => !complete || empty; +const getTarget = getPropOr({}, "target"); +const getDetail = getPropOr(null, "detail"); +const getToken = getPropOr(null, "token"); + +export default function App() { + const stripeRef = useRef(null); + const [disabled, setDisabled] = useState(true); + const [token, setToken] = useState(null); + const [error, setError] = useState(null); + + const onChange = compose(setDisabled, isDisabled, getTarget); + const onError = compose(setError, getDetail); + const onToken = compose(setToken, getToken); + + const onClick = async () => + stripeRef.current.createToken() + .then(getToken) + .then(setToken); + + return ( +
+ + Submit + {(error || token) && } +
+ ); +} + +if (typeof window !== "undefined") { + render(, document.getElementById("root")); +} +``` + +# `` + + + {html` `} + + +```jsx +import { loadScripts } from "./loadScripts"; +import { render } from "preact"; +import { useState, useRef } from "preact/hooks"; +import { getPropOr, compose } from "crocks"; +import { PUBLISHABLE_KEY } from './config'; +import "./style"; + +const getDetail = getPropOr(null, "detail"); +const getPaymentMethod = getPropOr(null, "paymentMethod"); + +export default function App() { + const stripeRef = useRef(null); + const [paymentMethod, setPaymentMethod] = useState(null); + const [error, setError] = useState(null); + + const onError = compose(setError, getDetail); + const onPaymentMethod = compose(setPaymentMethod, getPaymentMethod); + + return ( +
+ + {(error || paymentMethod) && } +
+ ); +} + +if (typeof window !== "undefined") { + render(, document.getElementById("root")); +} +``` diff --git a/stories/frameworks/react.stories.mdx b/stories/frameworks/react.stories.mdx new file mode 100644 index 0000000..05bfbb7 --- /dev/null +++ b/stories/frameworks/react.stories.mdx @@ -0,0 +1,118 @@ +import '@power-elements/codesandbox-button'; + +import { html, Meta, Story } from '@open-wc/demoing-storybook'; + + + +# `` + + + {html` `} + + + +```jsx +import React, { useState, useRef, useEffect } from "react"; +import ReactDOM from "react-dom"; +import { getPropOr, compose } from "crocks"; +import { PUBLISHABLE_KEY } from './config'; +import "./styles.css"; + +const isDisabled = ({ complete, empty }) => !complete || empty; +const getTarget = getPropOr({}, "target"); +const getDetail = getPropOr(null, "detail"); +const getToken = getPropOr(null, "token"); + +function App() { + const stripeRef = useRef(null); + const viewerRef = useRef(null); + const inputRef = useRef(null); + const buttonRef = useRef(null); + const [disabled, setDisabled] = useState(true); + const [token, setToken] = useState(null); + const [error, setError] = useState(null); + + const onChange = compose(setDisabled, isDisabled, getTarget); + const onError = compose(setError, getDetail); + const onToken = compose(setToken, getToken); + + const onClick = async () => + stripeRef.current.createToken() + .then(getToken); + .then(setToken); + + useEffect(() => { + stripeRef.current.addEventListener("change", onChange); + stripeRef.current.addEventListener("error", onError); + stripeRef.current.addEventListener("token", onToken); + buttonRef.current.addEventListener("click", onClick); + buttonRef.current.disabled = disabled; + if (token || error) viewerRef.current.object = token; + }); + + return ( +
+ + Submit + +
+ ); +} + +ReactDOM.render(, document.getElementById("root")); +``` + +# `` + + + {html` `} + + + +```jsx +import React, { useState, useRef, useEffect } from "react"; +import ReactDOM from "react-dom"; +import { getPropOr, compose } from "crocks"; +import { PUBLISHABLE_KEY } from './config'; +import "./styles.css"; + +const getDetail = getPropOr(null, "detail"); +const getPaymentMethod = getPropOr(null, "paymentMethod"); + +function App() { + const stripeRef = useRef(null); + const viewerRef = useRef(null); + const [paymentMethod, setPaymentMethod] = useState(null); + const [error, setError] = useState(null); + + const onError = compose(setError, getDetail); + const onPaymentMethod = compose(setPaymentMethod, getPaymentMethod); + + useEffect(() => { + stripeRef.current.addEventListener("error", onError); + stripeRef.current.addEventListener("payment-method", onPaymentMethod); + if (paymentMethod || error) viewerRef.current.object = paymentMethod; + }); + + return ( +
+ + +
+ ); +} + +ReactDOM.render(, document.getElementById("root")); +``` diff --git a/stories/frameworks/vanilla.stories.mdx b/stories/frameworks/vanilla.stories.mdx new file mode 100644 index 0000000..419940e --- /dev/null +++ b/stories/frameworks/vanilla.stories.mdx @@ -0,0 +1,106 @@ +import '@power-elements/codesandbox-button'; + +import { html, Meta, Story } from '@open-wc/demoing-storybook'; + + + +# `` + + + {html` `} + + + +```html + + + + + + +Submit + + + + +``` + +# `` + + + {html` `} + + +```html + + + + + + + + + + +``` diff --git a/stories/frameworks/vue.stories.mdx b/stories/frameworks/vue.stories.mdx new file mode 100644 index 0000000..dd19ad5 --- /dev/null +++ b/stories/frameworks/vue.stories.mdx @@ -0,0 +1,122 @@ +import '@power-elements/codesandbox-button'; + +import { html, Meta, Story } from '@open-wc/demoing-storybook'; + + + +# `` + + + {html` `} + + + +```html + + + +``` + +# `` + + + {html` `} + + + +```html + + + +``` diff --git a/stories/storybook-helpers.js b/stories/storybook-helpers.js index 1c86d6b..d791acd 100644 --- a/stories/storybook-helpers.js +++ b/stories/storybook-helpers.js @@ -1,8 +1,12 @@ import { LitElement, css, html } from 'lit-element'; +import { camel } from '../src/lib/strings'; + export const $ = x => document.querySelector(x); export const $$ = x => [...document.querySelectorAll(x)]; +const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args))); + const LS_KEYS = Object.freeze({ publishableKey: '__STRIPE_PUBLISHABLE_KEY__', clientSecret: '__STRIPE_CLIENT_SECRET__', @@ -11,19 +15,21 @@ const LS_KEYS = Object.freeze({ export const publishableKey = localStorage.getItem(LS_KEYS.publishableKey) || 'pk_test_XXXXXXXXXXXXXXXXXXXXXXXX'; -export const clientSecret = - localStorage.getItem(LS_KEYS.clientSecret) || undefined; - const setProp = (prop, value) => el => (el[prop] = value); +const storePublishableKey = publishableKey => { + localStorage.setItem(LS_KEYS.publishableKey, publishableKey); + return publishableKey; +}; + const setProps = propName => selector => ({ target: { value } }) => { - localStorage.setItem(LS_KEYS[propName], value); - return $$(selector) - .forEach(setProp(propName, value)); + $$(selector).forEach(setProp(propName, value)); + return value; }; -export const setKeys = setProps('publishableKey'); +export const setKeys = x => compose(storePublishableKey, setProps('publishableKey')(x)); + export const setClientSecrets = setProps('clientSecret'); export const displayObject = ({ target, detail }) => { @@ -85,8 +91,8 @@ class DemoBase extends LitElement { } removeStripeListeners() { - this.stripe.addEventListener('success', this.display); - this.stripe.addEventListener('fail', this.display); + this.stripe.removeEventListener('success', this.display); + this.stripe.removeEventListener('fail', this.display); } connectedCallback() { @@ -102,7 +108,7 @@ class DemoBase extends LitElement { } display({ target }) { - const val = target[target.generate]; + const val = target[camel(target.generate)]; this.output = val; } } @@ -148,7 +154,7 @@ customElements.define('elements-demo', class ElementsDemo extends DemoBase { removeStripeListeners() { super.removeStripeListeners(); - this.stripe.remoteventListener('change', this.onChange); + this.stripe.removeEventListener('change', this.onChange); } validate() { diff --git a/stories/stripe-elements.stories.mdx b/stories/stripe-elements.stories.mdx index dd439ba..03c21df 100644 --- a/stories/stripe-elements.stories.mdx +++ b/stories/stripe-elements.stories.mdx @@ -4,26 +4,19 @@ import { Preview, Props, Story, - withKnobs, withWebComponentsKnobs + withKnobs, + withWebComponentsKnobs } from '@open-wc/demoing-storybook'; import '../stripe-elements.js'; import '@material/mwc-button'; import '@material/mwc-textfield'; -import '@power-elements/codesandbox-button'; import '@power-elements/json-viewer'; import { $, $$, publishableKey, setKeys } from './storybook-helpers.js'; - + # Stripe Elements Web Component @@ -41,7 +34,7 @@ Once you've set the `publishable-key` attribute (or the `publishableKey` DOM pro Enter your publishable key here (use the test key, not the production key) to run the examples against your Stripe account. **Note**: This demo will store the publishable key in localstorage for your convenience. - + {html` - -# Using `` Across Frameworks - -Since `` is a custom-element, you can easily use it across frameworks. - -## Using with Plain HTML and JavaScript - - - {html` `} - - - -```html - - - - - - -Submit - - - - -``` - -## In a `LitElement` - - - {html``} - - -```js -import '@power-elements/stripe-elements'; -import '@power-elements/json-viewer'; -import { LitElement, html } from 'lit-element'; -import { PUBLISHABLE_KEY } from './config.js'; - -class PaymentForm extends LitElement { - render() { - return html` - - Submit - - - - - - `; - } - - onChange({ target: { complete, hasError } }) { - this.submitDisabled = !(complete && !hasError); - } - - onClick() { - this.shadowRoot.querySelector("stripe-elements").createSource(); - } - - onSource({ detail: source }) { - this.source = source; - } -} -``` - -### In a Vue Component - - - {html` `} - - - -```html - - - -``` - -### In an Angular Component - - - {html` `} - - - -```ts -import { Component } from "@angular/core"; -import { PUBLISHABLE_KEY } from './config'; - -const template = ` - - - Get Token - - - -`; - -const styleUrls = ["./app.component.css"]; - -@Component({ selector: "app-root", template, styleUrls }) -export class AppComponent { - publishableKey: string = PUBLISHABLE_KEY; - disabled = true; - token?: stripe.Token = null; - error?: Error | stripe.Error = null; - createToken(stripeElements: any) { - stripeElements.createToken(); - } -} -``` - -### In a React Component - - - {html` `} - - - -```jsx -import React, { useState, useRef, useEffect } from "react"; -import ReactDOM from "react-dom"; -import { getPropOr, compose } from "crocks"; -import { PUBLISHABLE_KEY } from './config'; -import "./styles.css"; - -const isDisabled = ({ complete, empty }) => !complete || empty; -const getTarget = getPropOr({}, "target"); -const getDetail = getPropOr(null, "detail"); -const getToken = getPropOr(null, "token"); - -function App() { - const stripeRef = useRef(null); - const viewerRef = useRef(null); - const inputRef = useRef(null); - const buttonRef = useRef(null); - const [disabled, setDisabled] = useState(true); - const [token, setToken] = useState(null); - const [error, setError] = useState(null); - - const onChange = compose(setDisabled, isDisabled, getTarget); - const onError = compose(setError, getDetail); - const onToken = compose(setToken, getToken); - - const onClick = async () => - stripeRef.current.createToken() - .then(getToken); - .then(setToken); - - useEffect(() => { - stripeRef.current.addEventListener("change", onChange); - stripeRef.current.addEventListener("error", onError); - stripeRef.current.addEventListener("token", onToken); - buttonRef.current.addEventListener("click", onClick); - buttonRef.current.disabled = disabled; - if (token || error) viewerRef.current.object = token; - }); - - return ( -
- - Submit - -
- ); -} - -ReactDOM.render(, document.getElementById("root")); -``` - -### In a Preact Component - - - {html` `} - - -```jsx -import { loadScripts } from "./loadScripts"; -import { render } from "preact"; -import { useState, useRef } from "preact/hooks"; -import { getPropOr, compose } from "crocks"; -import { PUBLISHABLE_KEY } from './config'; -import "./style"; - -const isDisabled = ({ complete, empty }) => !complete || empty; -const getTarget = getPropOr({}, "target"); -const getDetail = getPropOr(null, "detail"); -const getToken = getPropOr(null, "token"); - -export default function App() { - const stripeRef = useRef(null); - const [disabled, setDisabled] = useState(true); - const [token, setToken] = useState(null); - const [error, setError] = useState(null); - - const onChange = compose(setDisabled, isDisabled, getTarget); - const onError = compose(setError, getDetail); - const onToken = compose(setToken, getToken); - - const onClick = async () => - stripeRef.current.createToken() - .then(getToken) - .then(setToken); - - return ( -
- - Submit - {(error || token) && } -
- ); -} - -if (typeof window !== "undefined") { - render(, document.getElementById("root")); -} -``` diff --git a/stories/stripe-payment-request.stories.mdx b/stories/stripe-payment-request.stories.mdx index f6c1e3e..d360ebd 100644 --- a/stories/stripe-payment-request.stories.mdx +++ b/stories/stripe-payment-request.stories.mdx @@ -4,6 +4,8 @@ import { Preview, Props, Story, + withKnobs, + withWebComponentsKnobs, } from '@open-wc/demoing-storybook'; import { ifDefined } from 'lit-html/directives/if-defined'; @@ -13,15 +15,9 @@ import '../stripe-payment-request.js'; import '@power-elements/json-viewer'; import '@material/mwc-textfield'; -import { $$, clientSecret, publishableKey, setClientSecrets, setKeys } from './storybook-helpers.js'; +import { $$, publishableKey, setClientSecrets, setKeys } from './storybook-helpers.js'; - + # Stripe Payment Request Web Component @@ -31,7 +27,7 @@ To get started, add the element to your page with the `publishable-key` attribut Enter your publishable key here (use the test key, not the production key) to run the examples against your Stripe account. -{html` +{html` ` } @@ -128,19 +124,21 @@ Stripe provides a PaymentIntent API which is both more secure and more compatibl To take advantage of those features, generate a `PaymentIntent` object on your server and pass it's `client_secret` property to the `` element. -Enter your client secret to run the examples. **Note**: This demo will store the client secret in localstorage for your convenience. +You can generate one quickly using the stripe cli: + +```bash +stripe payment_intents create --amount=326 --currency=cad | jq -r '.client_secret' +``` + +Enter your client secret to run the examples. {html` - - ` + ` } + { html` @@ -148,7 +146,7 @@ Enter your client secret to run the examples. **Note**: This demo will store the - -# Using `` Across Frameworks - -Since `` is a custom-element, you can easily use it across frameworks. - -## Using with Plain HTML and JavaScript - - - {html` `} - - -```html - - - - - - - - - - -``` - -## In a `LitElement` - - - {html``} - - -```js -import { LitElement, html } from 'lit-element'; -import { PUBLISHABLE_KEY } from './config.js'; - -const displayItems = [ - { amount: '125', label: 'Double Double' }, - { amount: '199', label: 'Box of 10 Timbits' }, -] - -const shippingOptions = [ - { id: 'pick-up', amount: 0, label: 'Pick Up', detail: "Pick Up at Your Local Timmy's" }, - { id: 'delivery', amount: 200, label: 'Delivery', detail: 'Timbits to Your Door' } -] - -class PaymentForm extends LitElement { - static get properties() { - return { - paymentMethod: { type: Object }, - }; - } - - render() { - return html` - - - - - `; - } - - onPaymentMethod({ detail: paymentMethod }) { - this.paymentMethod = paymentMethod; - } -} -``` - -### In a Vue Component - - - {html` `} - - - -```html - - - -``` - -### In an Angular Component - - - {html` `} - - - -```ts -import { Component } from "@angular/core"; -import { PUBLISHABLE_KEY } from './config'; - -const template = ` - - - -`; - -const styleUrls = ["./app.component.css"]; - -@Component({ selector: "app-root", template, styleUrls }) -export class AppComponent { - publishableKey: string = PUBLISHABLE_KEY; - paymentMethod?: stripe.paymentMethod.PaymentMethod = null; - error?: Error | stripe.Error = null; -} -``` - -### In a React Component - - - {html` `} - - - -```jsx -import React, { useState, useRef, useEffect } from "react"; -import ReactDOM from "react-dom"; -import { getPropOr, compose } from "crocks"; -import { PUBLISHABLE_KEY } from './config'; -import "./styles.css"; - -const getDetail = getPropOr(null, "detail"); -const getPaymentMethod = getPropOr(null, "paymentMethod"); - -function App() { - const stripeRef = useRef(null); - const viewerRef = useRef(null); - const [paymentMethod, setPaymentMethod] = useState(null); - const [error, setError] = useState(null); - - const onError = compose(setError, getDetail); - const onPaymentMethod = compose(setPaymentMethod, getPaymentMethod); - - useEffect(() => { - stripeRef.current.addEventListener("error", onError); - stripeRef.current.addEventListener("payment-method", onPaymentMethod); - if (paymentMethod || error) viewerRef.current.object = paymentMethod; - }); - - return ( -
- - -
- ); -} - -ReactDOM.render(, document.getElementById("root")); -``` - -### In a Preact Component - - - {html` `} - - -```jsx -import { loadScripts } from "./loadScripts"; -import { render } from "preact"; -import { useState, useRef } from "preact/hooks"; -import { getPropOr, compose } from "crocks"; -import { PUBLISHABLE_KEY } from './config'; -import "./style"; - -const getDetail = getPropOr(null, "detail"); -const getPaymentMethod = getPropOr(null, "paymentMethod"); - -export default function App() { - const stripeRef = useRef(null); - const [paymentMethod, setPaymentMethod] = useState(null); - const [error, setError] = useState(null); - - const onError = compose(setError, getDetail); - const onPaymentMethod = compose(setPaymentMethod, getPaymentMethod); - - return ( -
- - {(error || paymentMethod) && } -
- ); -} - -if (typeof window !== "undefined") { - render(, document.getElementById("root")); -} -``` diff --git a/test/test-helpers.js b/test/test-helpers.js index a7ada35..3ba815d 100644 --- a/test/test-helpers.js +++ b/test/test-helpers.js @@ -263,7 +263,6 @@ export function spyCardClear() { } export function spyStripeElementBlur() { - console.log('element.element.blur', element.element.blur); spy(element.element, 'blur'); } @@ -272,7 +271,6 @@ export function restoreStripeElementBlur() { } export function spyStripeElementFocus() { - console.log('element.element.focus', element.element.focus); spy(element.element, 'focus'); }