{"_id":"@dvlden/vue-stripe-js","_rev":"1-501c6f4e339cf3df97ee02249fe8ee0f","name":"@dvlden/vue-stripe-js","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@dvlden/vue-stripe-js","version":"1.0.0","description":"Vue 3 components for Stripe.js: Elements & Checkout","type":"module","main":"./dist/vue-stripe.umd.js","module":"./dist/vue-stripe.es.js","types":"./types/vue-stripe.d.ts","exports":{".":{"import":"./dist/vue-stripe.es.js","require":"./dist/vue-stripe.umd.js"}},"scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/dvlden/vue-stripe-js.git"},"author":{"name":"Nenad Novaković","email":"n.dvlden@gmail.com","url":"https://dvl.sh/"},"devDependencies":{"@babel/core":"^7.17.10","@babel/preset-env":"^7.16.0","@babel/preset-typescript":"^7.16.0","@stripe/stripe-js":"^1.21.1","@types/node":"^17.0.33","@types/stripe":"^8.0.417","@typescript-eslint/eslint-plugin":"^5.3.1","@typescript-eslint/parser":"^5.3.1","@vitejs/plugin-vue":"^2.3.3","@vue/compiler-sfc":"^3.0.5","@vuedx/typecheck":"^0.7.4","@vuedx/typescript-plugin-vue":"^0.7.4","eslint":"^8.2.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","jest":"^27.3.1","prettier":"^2.3.0","typescript":"^4.1.3","vite":"^2.6.14","vue":"^3.2.21"},"gitHead":"a7ca79841bb14f4f1c468f5d2cc1c47284defae8","bugs":{"url":"https://github.com/dvlden/vue-stripe-js/issues"},"homepage":"https://github.com/dvlden/vue-stripe-js#readme","_id":"@dvlden/vue-stripe-js@1.0.0","_nodeVersion":"19.2.0","_npmVersion":"9.2.0","dist":{"integrity":"sha512-2HOkVTYWs8DNdP5hbd0siiCVR22hezRomgWHu5s25+BURS/U4k8W0GEicY5EQLtVFl6ApDATp4C+qCyoReD94w==","shasum":"5c9ad60a2af1c3cb92a791572e9907a293ad020c","tarball":"https://registry.npmjs.org/@dvlden/vue-stripe-js/-/vue-stripe-js-1.0.0.tgz","fileCount":4,"unpackedSize":11662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5cy4VHHg4HpSvtZ3sCWyAWWtlKgFN2RQqFYh4zft7DQIgdUUiOZa1dS6MbgMuglRgTwfouEePvwYnWW0embhgZzw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjquSZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotoQ/+LOH/yrn8tKK5TrTOh7EQgYumxRSVv0O2ubeScxz+zvz2sRkW\r\nPgO9a/ylgwU4jYNAjnuZgGDW2FrRsg3Aab5rG5Kb/M2g3XQaPdFv4szFginR\r\nZOufJ9JXWjR088HxXRB1mFMHcpaQYTNMqJZkGzQEdWTMBo+EWLlNWZI3SNYJ\r\nbddffTXqvMmr2c5Qd1kdmtc21X/lNXJ+kgQYYCjSAydy5PRJ/FyWQkuR76Ji\r\naY2/dNa3QDlgRRDcQCZ2Cm3fR48mkruwRuSFn8dDZH541TNtD2IHH8ZhtcNa\r\nAAkXKSwcHfkIEf0zO+P2u+w8mi2A0ALXoA5FQdFvESfHvGKdHuqTx26mm4wK\r\nGpJO2gwGtRoYWZ2mJnwgl2c0c3VNinmz5JM+sA/HgUmakGp5HXgGnclDLK81\r\nETgHNf3OlEnhW3ZvJppURGAct7gK/O52zBSVgdXCjeATLmWmRqhbXxnE9yHr\r\nbzi8PTyOxtTRi1yVaeZ8XBuWC62MAKMihcqtDIAp49oIkJlDjH+XdTjGjkKg\r\nVpp4uAf6rTRZpp2fQkP0M2frX05xxuk630nlI4bmzYNo8FTz/9exS+02kdUf\r\ntHjalkRU0oFsvDFnv6Txu1VFTrW/xkP/aJZn/UDAmqHqH0X+HbJTE0xWgser\r\nVSFFsCuIRDU8AzGO8lbevPkmFlEOUd741sA=\r\n=1w+4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dvlden","email":"n.dvLden@gmail.com"},"directories":{},"maintainers":[{"name":"dvlden","email":"n.dvLden@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-stripe-js_1.0.0_1672144025268_0.08166519017255602"},"_hasShrinkwrap":false},"1.0.1":{"name":"@dvlden/vue-stripe-js","version":"1.0.1","description":"Vue 3 components for Stripe.js: Elements & Checkout","type":"module","main":"./dist/vue-stripe.umd.js","module":"./dist/vue-stripe.es.js","types":"./types/vue-stripe.d.ts","exports":{".":{"import":"./dist/vue-stripe.es.js","require":"./dist/vue-stripe.umd.js"}},"scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build","test":"jest"},"repository":{"type":"git","url":"git+https://github.com/dvlden/vue-stripe-js.git"},"author":{"name":"Nenad Novaković","email":"n.dvlden@gmail.com","url":"https://dvl.sh/"},"devDependencies":{"@babel/core":"^7.17.10","@babel/preset-env":"^7.16.0","@babel/preset-typescript":"^7.16.0","@stripe/stripe-js":"^1.21.1","@types/node":"^17.0.33","@types/stripe":"^8.0.417","@typescript-eslint/eslint-plugin":"^5.3.1","@typescript-eslint/parser":"^5.3.1","@vitejs/plugin-vue":"^2.3.3","@vue/compiler-sfc":"^3.0.5","@vuedx/typecheck":"^0.7.4","@vuedx/typescript-plugin-vue":"^0.7.4","eslint":"^8.2.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-vue":"^8.0.3","jest":"^27.3.1","prettier":"^2.3.0","typescript":"^4.1.3","vite":"^2.6.14","vue":"^3.2.21"},"gitHead":"a7ca79841bb14f4f1c468f5d2cc1c47284defae8","bugs":{"url":"https://github.com/dvlden/vue-stripe-js/issues"},"homepage":"https://github.com/dvlden/vue-stripe-js#readme","_id":"@dvlden/vue-stripe-js@1.0.1","_nodeVersion":"19.2.0","_npmVersion":"9.2.0","dist":{"integrity":"sha512-S+O7WtbpzFxAno+l8G+b9xbSFgJQWWVzEBJjVNfj42qny9o4W/DGAUz6maqjIKdbwjYLuGwuUvgyJmmCeIiN0Q==","shasum":"67c93a6ed7e8e001d0d2e00ac476dbace24a9a75","tarball":"https://registry.npmjs.org/@dvlden/vue-stripe-js/-/vue-stripe-js-1.0.1.tgz","fileCount":6,"unpackedSize":19759,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDB2ZdEv6ncqMDrD8PPEsHwj0BTC/bzkknTBb8DDNqmXwIhANVQQX4IW8vy8DTbiET0xlTiuh/H3jivKyrT74ga6uqq"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjquYjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/bg/+IZyI592vo2cmNX6lrsCTYecW6nnk4ip9DAdqn8rgrEDT5EW1\r\niSZkm4MdD/WMDGPGwt1MWvt4bhcrILZAF+HBJhAYbvzh7DQJpXrcDFri0+e9\r\nYDr2S9zqq5umq/0LRfJsJLRU9CWysfceVj7n2cCwdlXQen9G7Bx/lMPmUj9f\r\ndfGn0jYkb11fix6xdIZx/qkkF9ZzTJbpJVbZTo2wtbxyrRGg6FnsXosOAhgq\r\nbV4XONhydtnl4DIEjmKZTfkJv4Q7mr/wtNV1zuFkY4+bUTXlFvcW5R+fbLTe\r\nawqmIXxMuXyfu5NZMWAjcaEYd2yPDrfeJ+FPQC+JQnVXsAO4pkyLTdFVa+/o\r\nZCXyj1NLsvF4PFxbvlvoPBBmFxHTt2fW6NmKSnO2rD6caYCiM79HIBZeqZ1p\r\n52HJNaQHviL31VPeO+PfRRTHHgTHzxW1VZTk6ZGp3LPuKMmSmFE1N54Mzmu7\r\nlcYlWsWkjcolRJgHiLMs+R6OlyVGclB2uu6Zcb7yyuizatVBBlZOMU40JLBg\r\nU9f8x/9rAWS+m+IFGTaNZ2ObBJk3b2q2Iad2QXyhaheKpIt6tYhHS+iE1b0q\r\nmoOvjXb6P+40i4ELgesAzx4cgajCxkZ09Xw/P6B1ew/wCdWh/nYrzJPALf1E\r\nSd9QCCpLWWKVWdRrWzefkWEg6PDvpLaOpr8=\r\n=+KDe\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dvlden","email":"n.dvLden@gmail.com"},"directories":{},"maintainers":[{"name":"dvlden","email":"n.dvLden@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-stripe-js_1.0.1_1672144419743_0.404977395044841"},"_hasShrinkwrap":false}},"time":{"created":"2022-12-27T12:27:05.181Z","1.0.0":"2022-12-27T12:27:05.422Z","modified":"2022-12-27T12:33:39.978Z","1.0.1":"2022-12-27T12:33:39.897Z"},"maintainers":[{"name":"dvlden","email":"n.dvLden@gmail.com"}],"description":"Vue 3 components for Stripe.js: Elements & Checkout","homepage":"https://github.com/dvlden/vue-stripe-js#readme","repository":{"type":"git","url":"git+https://github.com/dvlden/vue-stripe-js.git"},"author":{"name":"Nenad Novaković","email":"n.dvlden@gmail.com","url":"https://dvl.sh/"},"bugs":{"url":"https://github.com/dvlden/vue-stripe-js/issues"},"readme":"[![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg)](https://vshymanskyy.github.io/StandWithUkraine)\n\n# Vue Stripe.js\n\nFlexible and powerful Vue 3 components for Stripe. It's a glue between [Stripe.js](https://stripe.com/docs/js) and Vue component lifecycle.\n\n- Vue 3: stable ✅\n- Vue 2: use [vue-stripe-elements](https://github.com/ectoflow/vue-stripe-elements)\n\n# Quickstart\n\n### 1. Install package:\n\n```bash\n# npm\nnpm i vue-stripe-js --save-dev\n\n# yarn\nyarn add vue-stripe-js --dev\n```\n\n### 2. Load Stripe.js library:\n\n```ts\nimport { loadStripe } from '@stripe/stripe-js'\nimport { defineComponent, ref, onBeforeMount } from 'vue'\n\nexport default defineComponent({\n  // ...\n  setup() {\n    onBeforeMount(() => {\n      const stripeLoaded = ref(false)\n      const stripePromise = loadStripe('your_key')\n      stripePromise.then(() => {\n        stripeLoaded.value = true\n      })\n    })\n  },\n})\n```\n\n> Alternatively, you can load Stripe library by including script tag. Just make sure it's ready before your stripe components mount.\n\n```\n<script src=\"https://js.stripe.com/v3/\"></script>\n```\n\n### 3. Use built-in components\n\nCreate card\n\n```vue\n<template>\n  <StripeElements\n    v-if=\"stripeLoaded\"\n    v-slot=\"{ elements, instance }\" // attention: important part!\n    ref=\"elms\"\n    :stripe-key=\"stripeKey\"\n    :instance-options=\"instanceOptions\"\n    :elements-options=\"elementsOptions\"\n  >\n    <StripeElement\n      ref=\"card\"\n      :elements=\"elements\"\n      :options=\"cardOptions\"\n    />\n  </StripeElements>\n  <button type=\"button\" @click=\"pay\">Pay</button>\n</template>\n\n<script lang=\"ts\">\nimport { StripeElements, StripeElement } from 'vue-stripe-js'\nimport { loadStripe } from '@stripe/stripe-js'\nimport { defineComponent, ref, onBeforeMount } from 'vue'\n\nexport default defineComponent({\n  name: 'CardOnly',\n\n  components: {\n    StripeElements,\n    StripeElement,\n  },\n\n  setup() {\n    const stripeKey = ref('pk_test_TYooMQauvdEDq54NiTphI7jx') // test key\n    const instanceOptions = ref({\n      // https://stripe.com/docs/js/initializing#init_stripe_js-options\n    })\n    const elementsOptions = ref({\n      // https://stripe.com/docs/js/elements_object/create#stripe_elements-options\n    })\n    const cardOptions = ref({\n      // https://stripe.com/docs/stripe.js#element-options\n      value: {\n        postalCode: '12345',\n      },\n    })\n    const stripeLoaded = ref(false)\n    const card = ref()\n    const elms = ref()\n\n    onBeforeMount(() => {\n      const stripePromise = loadStripe(stripeKey.value)\n      stripePromise.then(() => {\n        stripeLoaded.value = true\n      })\n    })\n\n    const pay = () => {\n      // Get stripe element\n      const cardElement = card.value.stripeElement\n\n      // Access instance methods, e.g. createToken()\n      elms.value.instance.createToken(cardElement).then((result: object) => {\n        // Handle result.error or result.token\n        console.log(result)\n      })\n    },\n\n    return {\n      stripeKey,\n      stripeLoaded,\n      instanceOptions,\n      elementsOptions,\n      cardOptions,\n      card,\n      elms,\n      pay\n    }\n  },\n})\n</script>\n\n```\n\n### 4. Get advanced\n\nCreate multiple elements\n\n```vue\n<StripeElements\n  v-slot=\"{ elements }\"\n  :stripe-key=\"stripeKey\"\n  :instance-options=\"instanceOptions\"\n  :elements-options=\"elementsOptions\"\n>\n  <StripeElement\n    type=\"cardNumber\"\n    :elements=\"elements\"\n    :options=\"cardNumberOptions\"\n  />\n  <StripeElement\n    type=\"postalCode\"\n    :elements=\"elements\"\n    :options=\"postalCodeOptions\"\n  />\n</StripeElements>\n```\n\n### 5. Get wild flexible\n\nYou can even create multiple groups, don't ask me why. It's possible.\n\n```vue\n<StripeElements\n  v-slot=\"{ elements }\"\n  :stripe-key=\"stripeKey1\"\n  :instance-options=\"instanceOptions1\"\n  :elements-options=\"elementsOptions1\"\n>\n  <StripeElement :elements=\"elements\" :options=\"cardOptions\" />\n</StripeElements>\n<StripeElements\n  v-slot=\"{ elements }\"\n  :stripe-key=\"stripeKey2\"\n  :instance-options=\"instanceOptions2\"\n  :elements-options=\"elementsOptions2\"\n>\n  <StripeElement type=\"iban\" :elements=\"elements\" :options=\"ibanOptions\" />\n</StripeElements>\n```\n\n# Types\n\n```ts\nimport types {\n  initStripe,\n  createElements,\n  createElement,\n  StripeElements,\n  StripeElement\n} from 'vue-stripe-js'\n```\n\n# API Reference\n\n## StripeElements.vue\n\nThink of it as of individual group of elements. It creates stripe instance and elements object.\n\n```js\nimport { StripeElements } from 'vue-stripe-js'\n```\n\n### props\n\n```js\n// https://stripe.com/docs/js/initializing#init_stripe_js-options\nstripeKey: {\n  type: String,\n  required: true,\n},\n// https://stripe.com/docs/js/elements_object/create#stripe_elements-options\ninstanceOptions: {\n  type: Object,\n  default: () => ({}),\n},\n// https://stripe.com/docs/stripe.js#element-options\nelementsOptions: {\n  type: Object,\n  default: () => ({}),\n},\n```\n\n### data\n\nYou can access `instance` and `elements` by adding ref to StripeElements component.\n\n```js\n// StripeElements.vue exposes\n{\n  elements,\n  instance,\n  elementsUsable,\n}\n```\n\n### default scoped slot\n\nElegant solution for props. Really handy because you can make stripe `instance` and `elements` objects available to all children without adding extra code.\n\n```vue\n<!-- Cool, isn't it? -->\n<StripeElements v-slot=\"{ elements, instance }\">\n  <StripeElement :elements=\"elements\" />\n  <CustomComponent :instance=\"instance\" />\n</StripeElements>\n```\n\n## StripeElement.vue\n\nUniversal and type agnostic component. Create any element supported by Stripe.\n\n```js\nimport { StripeElement } from 'vue-stripe-js'\n```\n\n### props\n\n```js\n{\n  // elements object\n  // https://stripe.com/docs/js/elements_object/create\n  elements: {\n    type: Object as () => StripeElementsWithoutOverload,\n    required: true,\n  },\n  // type of the element\n  // https://stripe.com/docs/js/elements_object/create_element?type=card\n  type: {\n    type: String as () => StripeElementType,\n    default: () => 'card',\n  },\n  // element options\n  // https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options\n  options: {\n    type: Object as () => StripeElementOptions,\n    default: () => ({}),\n  },\n},\n```\n\n### data\n\n```js\n{\n  stripeElement,\n  domElement,\n  mountPoint,\n}\n```\n\n### options\n\nElement options are reactive. Recommendation: don't use v-model on `StripeElement`, instead pass value via options.\n\n```js\nsetup() {\n  const elementOptions = ref({\n    value: {\n      postalCode: '12345'\n    }\n  })\n  return {\n    elementOptions,\n  }\n},\n\nmethods: {\n  changePostalCode() {\n    // will update stripe element automatically\n    this.elementOptions.value.postalCode = '54321'\n  }\n}\n```\n\n### events\n\nFollowing events are emitted on StripeElement\n\n- change\n- ready\n- focus\n- blur\n- click\n- escape\n\n```html\n<StripeElement :elements=\"elements\" @blur=\"doSomething\" />\n```\n\n# Styles\n\nNo base style included. Main reason: overriding it isn't fun. Style as you wish via element options: [see details](https://stripe.com/docs/js/appendix/style).\n","readmeFilename":"README.md"}