{"_id":"@primer-io/checkout-vue","_rev":"39-506c16d654239347a3978252f4894aaf","name":"@primer-io/checkout-vue","dist-tags":{"latest":"1.2.2","next":"1.3.0-beta.11"},"versions":{"1.1.1-beta.8":{"name":"@primer-io/checkout-vue","version":"1.1.1-beta.8","keywords":["vue","sfc","component"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.1.1-beta.8","maintainers":[{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"primer-developers","email":"developers@primerapi.com"}],"dist":{"shasum":"a25f565df0883a175f9445020f0fd173a296bf42","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.1.1-beta.8.tgz","fileCount":11,"integrity":"sha512-EEO5ea66zycH4K0cu/17QxsL+eBjbeOlBE7T1tNuJPrWQbWvhGyvSZBiA038OVxONKLv1kDEuMghSZWtScvAig==","signatures":[{"sig":"MEUCIQDb/itB9+aGeSSzY1SoPaJvS7xmmPjoHkLX04sbhO6Y1AIgYqEYWs6YhzufcOewTGg0dH0cJh8FSzou+yAHlAexMew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrowFCRA9TVsSAnZWagAA8mQP+gO8kdb05J4AeQp6+XYc\n/dra17HqV298T5F3Vv7O1M0BHjGw7OZGWOsmwtToSqS6ZvyJs4hvEyV4WMN9\nEUTcqRzCi0+7u5nRwt/QJusv4BqL0OTH3FeCZ+kjEp7UqMTK3qSU18zyOZnc\n372L2Md9Ju3wwzHvwKsYSP6ziDUqxgeM41zzeHCp0ml3MtHCIzedQlKOOxT4\noga9hoghFJJLzDtvvqs5490gAJYAl+umDhYVNNz7EYFyyS55Y4A9c5dqZeMU\nUQ5qDZC4cNvyeFFaLkaDwwu3eEpc2f51lN62EFMENin4+Iz1rFkC5+MhC602\nudbM9CTaKP7cs5dg9Nftb9wbGxnswFe/mTqn321EpiP3pI5KOcOdLAwiiWKp\nZIInd2pJQLYN+WbPRmE/HOmUME7RHuh+MF2sq0J7EvFpTgl60rQaxsh7symv\nt+VU8Tl+5uYVvUHg6nSBLGnTGNHYw3ysOM+KE0Fe1u6Sooo+kh4RRmuzKSKy\nRR0hohuCKIKTFZ9ZL0HqkVio0FU1eWAEA1nMtzTi4EwKG4nT03n0swsO6GsQ\n0/XeWixCgqJIAJepBGOb2LFk7wiiQHADnQ1yJghM9/tLpe+yfDmWi6CRR1FI\nxItJP4DWeepVcI0UqAkkEk9xTLRnkCxXsjJiCRVjGjimdgh5jdCbHXnBkDmB\nVHkg\r\n=EbG9\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"unpkg":"dist/primer-sdk-vue.min.js","module":"dist/primer-sdk-vue.esm.js","browser":{"./sfc":"src/primer-sdk-vue.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"npm run build:unpkg & npm run build:es & npm run build:umd & npm run doc","stdver":"standard-version -m '[skip ci] chore(release): v%s'","release":"gren release --override","build:es":"rollup --config build/rollup.config.js --format es --file dist/primer-sdk-vue.esm.js","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/primer-sdk-vue.umd.js","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/primer-sdk-vue.min.js"},"_npmUser":{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"https://github.com/primer-io/primer-sdk-vue.git","type":"git"},"description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","dependencies":{"@primer-io/checkout-web":"^1.1.1-beta.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^24.8.0","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^1.9.0","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","stylelint":"^9.10.0","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.1","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^4.7.2","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.5.16","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","stylelint-config-standard":"^18.2.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.1.1-beta.8_1605274629023_0.7429054564092874","host":"s3://npm-registry-packages"}},"1.2.0-beta.1":{"name":"@primer-io/checkout-vue","version":"1.2.0-beta.1","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.2.0-beta.1","maintainers":[{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"primer-developers","email":"developers@primerapi.com"}],"dist":{"shasum":"b7bdd2516833a3423d6949550b6afba2568a6a48","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.2.0-beta.1.tgz","fileCount":6,"integrity":"sha512-oAbn8Y/D3kI0+Y5XzMXO1fNzWxSG0NQ4w5kIsXES1Ye7Alko3p12C3ozT09l8Nu5S3vte6kQGqoGdDbD5QF5DQ==","signatures":[{"sig":"MEUCIQC2nbbiv+pf0psaV5EMVYZdhfaJr4KMUeKkrbVcpKpotwIgPIBxIN3ZltZic/hbwWAlSAuFJ9f8X+NduRDdJUmJoGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25394,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfslbYCRA9TVsSAnZWagAA0VQP/0rFoTUh2FRREkT7sRY9\nsSRSiiqipMCjoHops3xBFTGcGFcxLQNpSfJr/oeTsbbfZcucrGvKxOnpl9XM\nn89Tc/ozcgOs/qwRGXDxp18/FWFcAXKLHcpXA3ryPMvB5ESCZFAZreBVhGKY\nqbzGORUO6RtD10eiKJAsR98Gn10I6xUVpRAQV13a2gvSq1V4IryFsFK5z1Ye\nR4uBWAOuu0yWTKPXolnUtSwHOIemQ13RdYQ5PcwzkXm0/XD67a2Qx7+R2Skn\npYBCm5ZvQc6uXPVAFHLj+xMs5/ayOOxNbPxPUBWAKep6icnlGiQgK2ANGraK\nFa+VyIB9/MVw4CPUuV+igoP5PZyIQw++/GP82/RLOofJXftrszOaXuHPIlOv\nigvcWAdihsWmRvD8lRbu1iSF22mPGdDwIll51c+OUPBNP8xCPdjQsJl9DT4K\nEgbtDAC3leTyxopN3a/KZochiac89UlW6ld8PZRrtqTOa4EF4AmM0Wdn2TyW\n7ezCHpP6xWWqDsDM1Fi0yelijZmeubITUSvydoEPTp3mCXYjZZvkLJTgocJs\nePy/3l14wO3f0g2uM2UYlzn3UUhBI0E+wrpFUR74FOEKAbArblH9X/0KomE6\n0ORv21gA4adVWIKlI/N7djn7QDWN5fDRhZMkzbbl7y5sZf04Tw4nPEuOKTTG\nycuu\r\n=sdke\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"unpkg":"dist/primer-sdk-vue.min.js","module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's Universal Checkout using the configuration provided as props.\n\n## Example\n\n```vue\n<template>\n  <div>\n    <primer-checkout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the token data. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is `true`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next()` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess(error?)`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(error?)` with `error` being `undefined` to resolve the Promise, or with `error` being of type `Error` to reject the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n# API Reference\n\n## Props\n\n| Props                     | Type                                         | Required | Description                                                                                |\n| ------------------------- | -------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                                     | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                                     | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                                     | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                                     | `false`  |                                                                                            |\n| `countryCode`             | `String`                                     | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`                               | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions`                  | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                                       | `false`  |                                                                                            |\n| `paypal`                  | `Object`                                     | `false`  |                                                                                            |\n| `googlePay`               | `Object`                                     | `false`  |                                                                                            |\n| `applePay`                | `Object`                                     | `false`  |                                                                                            |\n| `directDebit`             | `Object`                                     | `false`  |                                                                                            |\n| `transitions`             | `Transitions`                                | `false`  | Control the transition duration when switching between views in the checkout component     |\n| `submitButton`            | `Object`                                     | `false`  |                                                                                            |\n| `tokenizeSuccess`         | `(token: PaymentMethodToken): Promise<void>` | `false`  | Function props used for `onTokenizeSuccess`                                                |\n| `tokenizeSuccessStatus`   | `Boolean | Error`                            | `false`  | Status of `onTokenizeSuccess`                                                              |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype Transitions {\n  // a number of milliseconds or specify different durations for 'enter' and 'exit'\n  duration?: number | { enter: number, exit: number };\n  // Callbacks for when a view is transitioning in or out\n  onEntering?: (node: Node) => void;\n  onEntered?: (node: Node) => void;\n  onExiting?: (node: Node) => void;\n  onExited?: (node: Node) => void;\n};\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n| `transition-enter`               |                                                 | See `options.transitions.onEnter`                                                                                                                                                                                             |\n| `transition-entering`            |                                                 | See `options.transitions.onEntering`                                                                                                                                                                                          |\n| `transition-entered`             |                                                 | See `options.transitions.onEntered`                                                                                                                                                                                           |\n| `transition-exit`                |                                                 | See `options.transitions.onExit`                                                                                                                                                                                              |\n| `transition-exiting`             |                                                 | See `options.transitions.onExiting`                                                                                                                                                                                           |\n| `transition-exited`              |                                                 | See `options.transitions.onExited`                                                                                                                                                                                            |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/primer-sdk-vue.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"efaed10e798b4d3ff08d809e5b549acfe7b96fa7","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"npm run build:unpkg & npm run build:es & npm run build:umd & npm run doc","stdver":"standard-version -m '[skip ci] chore(release): v%s'","release":"gren release --override","build:es":"rollup --config build/rollup.config.js --format es --file dist/primer-sdk-vue.esm.js","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/primer-sdk-vue.umd.js","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/primer-sdk-vue.min.js"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"lerna/3.22.1/node@v12.19.0+x64 (linux)","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.19.0","dependencies":{"@primer-io/checkout-web":"^1.1.1-beta.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^24.8.0","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^1.9.0","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","stylelint":"^9.10.0","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.1","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^4.7.2","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.5.16","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","stylelint-config-standard":"^18.2.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.2.0-beta.1_1605523159859_0.22131067180081176","host":"s3://npm-registry-packages"}},"1.0.0-develop.1":{"name":"@primer-io/checkout-vue","version":"1.0.0-develop.1","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.0.0-develop.1","maintainers":[{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"primer-developers","email":"developers@primerapi.com"}],"dist":{"shasum":"4773dda22c90171f68737cd3ed32833315698cd2","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.0.0-develop.1.tgz","fileCount":5,"integrity":"sha512-mfbFa5+pTxSUJ2e9di1GOO1QUQvzGAAF0nlk44KwFqjcyCS5C35ZeZWHn3PREqQ0m+qVNpSGbgxvWm1nR2flZA==","signatures":[{"sig":"MEUCIEhoJCTqGCyZOmO6EX2Z/7Pxn1JX0oow2K5/RErfjw9SAiEAxik39cbkGr+yfLC+AAgBKr3wCn1VQd10C5DpyFrceFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssqsCRA9TVsSAnZWagAAnRkP/2Ok+gb0jsqp9nnhoaMZ\n1YCMo9IEABWd+M0crFqZ9vb50UdP7GFOjLLat/AJffa95QNdfEjc41NBur9i\nFzyY3P1XfeHf8Fe2PGleBFp2aThga99NJ2zzTxVel8iv0pmUrJS8N/V8gb3r\np/3zJFvHknIVbG7uFmRWx18tyVnUBsUfnrwhZqjU8BwCct3S4nmvyp/cAKsn\n6OdKlNB/N5iwVFFSiTim+tOO543/qy4ZdMEfpVe8SvZhW4LTYK8ij6wdg9jm\nnJgtWtfUuh7auG+kSciKJklJLRDFPM4mdHlz8sfvgS7fS1JCH6bRonjcBNMs\nLBQ9bSthNggEBc67GdMIJL6oP5XpaN7wTHynCoIsfbAFIXLInbByb7gFAQ5B\nchO5ZORa0wcF1WwaWpzE3B6647Gben7SYG0GE3TfSYqD+/GK4zdg+vwVeQBi\nul+nevLdedhL/3XKlI0Uo2MmrgEixpQAdWeuAPN23SpDwh7xBZ8F3ggVAtsF\n/5q8sVuqYE2qc4woC2gX7pnz/iJPRvN4hHZ5Y+Xu5rP2HKZfunrzoWgPAWID\nb/vaeYBcodSXrJK9oJjVgqFur9FHnxqj6OjClr2qJ00PIgttBH2+iw5QO0hM\nF0mQTrAYkM+WN85FLYjzVcMfcGkMp3rfbLozMUfmy1KsdVENYZc2cKJiuN8h\nc4pC\r\n=AJhD\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"unpkg":"dist/primer-sdk-vue.min.js","module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's Universal Checkout using the configuration provided as props.\n\n## Example\n\n```vue\n<template>\n  <div>\n    <primer-checkout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the token data. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is `true`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next()` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess(error?)`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(error?)` with `error` being `undefined` to resolve the Promise, or with `error` being of type `Error` to reject the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n# API Reference\n\n## Props\n\n| Props                     | Type                                         | Required | Description                                                                                |\n| ------------------------- | -------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                                     | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                                     | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                                     | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                                     | `false`  |                                                                                            |\n| `countryCode`             | `String`                                     | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`                               | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions`                  | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                                       | `false`  |                                                                                            |\n| `paypal`                  | `Object`                                     | `false`  |                                                                                            |\n| `googlePay`               | `Object`                                     | `false`  |                                                                                            |\n| `applePay`                | `Object`                                     | `false`  |                                                                                            |\n| `directDebit`             | `Object`                                     | `false`  |                                                                                            |\n| `transitions`             | `Transitions`                                | `false`  | Control the transition duration when switching between views in the checkout component     |\n| `submitButton`            | `Object`                                     | `false`  |                                                                                            |\n| `tokenizeSuccess`         | `(token: PaymentMethodToken): Promise<void>` | `false`  | Function props used for `onTokenizeSuccess`                                                |\n| `tokenizeSuccessStatus`   | `Boolean | Error`                            | `false`  | Status of `onTokenizeSuccess`                                                              |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype Transitions {\n  // a number of milliseconds or specify different durations for 'enter' and 'exit'\n  duration?: number | { enter: number, exit: number };\n  // Callbacks for when a view is transitioning in or out\n  onEntering?: (node: Node) => void;\n  onEntered?: (node: Node) => void;\n  onExiting?: (node: Node) => void;\n  onExited?: (node: Node) => void;\n};\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n| `transition-enter`               |                                                 | See `options.transitions.onEnter`                                                                                                                                                                                             |\n| `transition-entering`            |                                                 | See `options.transitions.onEntering`                                                                                                                                                                                          |\n| `transition-entered`             |                                                 | See `options.transitions.onEntered`                                                                                                                                                                                           |\n| `transition-exit`                |                                                 | See `options.transitions.onExit`                                                                                                                                                                                              |\n| `transition-exiting`             |                                                 | See `options.transitions.onExiting`                                                                                                                                                                                           |\n| `transition-exited`              |                                                 | See `options.transitions.onExited`                                                                                                                                                                                            |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/primer-sdk-vue.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"60be61adfdff69030d29b0a950cd40ab93c53525","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"npm run build:unpkg & npm run build:es & npm run build:umd & npm run doc","stdver":"standard-version -m '[skip ci] chore(release): v%s'","release":"gren release --override","build:es":"rollup --config build/rollup.config.js --format es --file dist/primer-sdk-vue.esm.js","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/primer-sdk-vue.umd.js","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/primer-sdk-vue.min.js"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.19.0","dependencies":{"@primer-io/checkout-web":"^1.1.1-beta.8"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^24.8.0","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^1.9.0","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","stylelint":"^9.10.0","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.1","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^4.7.2","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.5.16","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","stylelint-config-standard":"^18.2.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.0.0-develop.1_1605552812287_0.29371720349993513","host":"s3://npm-registry-packages"}},"1.2.2":{"name":"@primer-io/checkout-vue","version":"1.2.2","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.2.2","maintainers":[{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"primer-developers","email":"developers@primerapi.com"}],"dist":{"shasum":"ec3bd87dc51738d520e68788381a7cff38895371","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.2.2.tgz","fileCount":5,"integrity":"sha512-Km/qhYNDnLjY5wok7Apr0aONlGktSSyOM5LQjUquCQg/yzD2GGU3vvJBTgxDMYIBYcpd9eG1hr8FI9wc3wVePQ==","signatures":[{"sig":"MEYCIQClDWhoY7i00gzcQOm1BouA7tZdq23/5a2TaWNGDejb4AIhAMIZitKnGtZzRkIlNG5AG5ElWtYPSPTKNQNpRjULx1XG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs4/8CRA9TVsSAnZWagAASdkP/178p1OnMODB9Cdjk5RY\nREqgxPfb5meY6xE9627/LHpRP/bWPO1hlulkO5kg0xNiu7/QaMdfnTFSHFHB\nxJPKFd9cs55DYNx38jS8ddVqUs1zdmd8U5zHTM6F79Imf+xHkmXI5ayGBAfS\n9Mt1RApPCUXRp+K6H7MXFJBaqrEFHw0Fjuk0XA6YvYpkk+jU7qPJ5rz0BPQE\nFlrS6yRIC65Mf5uatITNES29AygDP/ZT87aHf+Vdm5aKF1ha6OjCWhx4dH90\nUTIkecUZXkIT4ihqFCdOxKVteDDol7NlUUZ91HZDayk37SuvdmzTgIQRLG9K\nT/2TReLYVGoxL3ctObgy6IVH/m4sA9GHHGOBpiuJnUSnEtU1D5T/e/5qC2RG\nkvoVU9VlYgwq6Pv08i8kZD+haVQcOonJXZAXxisvNXz0yVfEJXa4t2P5rOxj\nxm17wP1yWX/KtY6SmZFTrzCR4BpgsM/E6T9JWPEoZJm3RyF2d8D1T3wQc/2f\nhfmUqgtSlboYArICyqyWpn0ik1j2HeWcwIXwu2wsbtaCbXNBqvuPWDUsOL+9\n5GWnvQbhlWqH/sot3Uk9Wx/IlM0yk1XgB5k3IFKMk95GvPdHURRYgpbu2KIX\nIt3vIzWBzzjp/1REHTmuLin/XBjUpC/yvkSZYpf/uTTRhpUI8mojZrvjr/Gu\nzz9o\r\n=k4fP\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"unpkg":"dist/primer-sdk-vue.min.js","module":"dist/primer-sdk-vue.esm.js","browser":{"./sfc":"src/primer-sdk-vue.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"21c3d60afb22e3fde56405a54dcb20e3546a87f1","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"npm run build:unpkg & npm run build:es & npm run build:umd & npm run doc","stdver":"standard-version -m '[skip ci] chore(release): v%s'","release":"gren release --override","build:es":"rollup --config build/rollup.config.js --format es --file dist/primer-sdk-vue.esm.js","build:umd":"rollup --config build/rollup.config.js --format umd --file dist/primer-sdk-vue.umd.js","build:unpkg":"rollup --config build/rollup.config.js --format iife --file dist/primer-sdk-vue.min.js"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.19.1","dependencies":{"@primer-io/checkout-web":"1.2.0-beta.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^24.8.0","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^1.9.0","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","stylelint":"^9.10.0","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.1","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^4.7.2","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.5.16","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","stylelint-config-standard":"^18.2.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.2.2_1605603324210_0.30821481114869087","host":"s3://npm-registry-packages"}},"1.2.3-beta.1":{"name":"@primer-io/checkout-vue","version":"1.2.3-beta.1","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.2.3-beta.1","maintainers":[{"name":"primer-developers","email":"developers@primerapi.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"}],"dist":{"shasum":"d9b17a76d0186355cf40146f6ad003e9543016cc","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.2.3-beta.1.tgz","fileCount":7,"integrity":"sha512-OmFSWi1MUH77SxDUrxw6xU4RXfj/Ia6StPUsTn6kqweEzQHRfDqnr+iPg1F/BweIZIMp2gv8aglkYuY2kMCdsg==","signatures":[{"sig":"MEQCICUHif+GlPfWM9W3ZfbVzercpJQY2NgGDUpJb4DfuMg/AiBJur3vGCbjAljsSVxUBNhjJglXbCUwteiH7wX4JTtNpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":24484,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEnFUCRA9TVsSAnZWagAAv4IP/0x0394oBLNRJu3JUZFD\nVGEZKnwjMKimXIGeimFrLGSJ+WXGiZpV6N7C5dpPVabw9aOgrbAyprSetEfz\nN3p1KTnnrWw10H7mQE519zmbP83RbyTKEOdKKMyA6eJa0exZBmN0zFMiZ/Vb\nO8SMwDRNc5eOPmmLjQm3FjNy2v3kh11aSsKCRwiw9Qnhq7Qwn80pF4RhwyB7\nc9f3vv+obiiWd8RJ8VGCe8HFar0q49HygeeI9c0K+d8CLXRNQNtKuB4Y3eCE\nI7Zp7q93vlPczxFtXZmgDotEYDe8oZLu7ShZIDGDK/SCvJ8MfX0+rfKbaBMK\nq37p+HZdrfUZ3Wdh/5sv3T3+BTwAfEO940zmOX4P/WuWDgUcTtp+zNRJXoFd\nN+DnFkR0t9VqDPDJjehb870n3qviKexn2FzyORZW76GNHhtUn68RXNzxUmM6\nr3JsrCUYMq3x9g7DUUffTwMSl7zWFpZZ7tozlTB4rX5Z6bAen3mn42JyBX46\n93+zxxVSwKj57uwwIRFWkq1luvwt8JqHsX2QKBbUO6HcCrlJbFTz//cdNtb6\nyqZzEBcYrYOtGIqYgIWJ452+YiigExJ7u/V0GluwicyH7yfJ8ec9MPTJURAU\nqfdOIyqwCnZlP4EtSWRd5jzK2AvaXdyUVBlFsjWMiFnZuWCR5u1jzgLxVzLX\nJlFr\r\n=puzE\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"unpkg":"dist/primer-sdk-vue.min.js","module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\nThis wrapper is based on [`@primer-io/checkout-web@1.2.0-beta.0`](https://www.npmjs.com/package/@primer-io/checkout-web/v/1.2.0-beta.0).\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's [Universal Checkout](https://primer.io/docs/guides/checkout/#universal-checkout) using the configuration provided as props.\n\n## Example\n\n```vue\n<template>\n  <div>\n    <primer-checkout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the token data. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is `true`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next()` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess(error?)`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(error?)` with `error` being `undefined` to resolve the Promise, or with `error` being of type `Error` to reject the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n# API Reference\n\n## Props\n\n| Props                     | Type                                         | Required | Description                                                                                |\n| ------------------------- | -------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                                     | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                                     | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                                     | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                                     | `false`  |                                                                                            |\n| `countryCode`             | `String`                                     | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`                               | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions`                  | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                                       | `false`  |                                                                                            |\n| `paypal`                  | `Object`                                     | `false`  |                                                                                            |\n| `googlePay`               | `Object`                                     | `false`  |                                                                                            |\n| `applePay`                | `Object`                                     | `false`  |                                                                                            |\n| `directDebit`             | `Object`                                     | `false`  |                                                                                            |\n| `transitions`             | `Transitions`                                | `false`  | Control the transition duration when switching between views in the checkout component     |\n| `submitButton`            | `Object`                                     | `false`  |                                                                                            |\n| `tokenizeSuccess`         | `(token: PaymentMethodToken): Promise<void>` | `false`  | Function props used for `onTokenizeSuccess`                                                |\n| `tokenizeSuccessStatus`   | `Boolean | Error`                            | `false`  | Status of `onTokenizeSuccess`                                                              |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype Transitions {\n  // a number of milliseconds or specify different durations for 'enter' and 'exit'\n  duration?: number | { enter: number, exit: number };\n  // Callbacks for when a view is transitioning in or out\n  onEntering?: (node: Node) => void;\n  onEntered?: (node: Node) => void;\n  onExiting?: (node: Node) => void;\n  onExited?: (node: Node) => void;\n};\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n| `transition-enter`               |                                                 | See `options.transitions.onEnter`                                                                                                                                                                                             |\n| `transition-entering`            |                                                 | See `options.transitions.onEntering`                                                                                                                                                                                          |\n| `transition-entered`             |                                                 | See `options.transitions.onEntered`                                                                                                                                                                                           |\n| `transition-exit`                |                                                 | See `options.transitions.onExit`                                                                                                                                                                                              |\n| `transition-exiting`             |                                                 | See `options.transitions.onExiting`                                                                                                                                                                                           |\n| `transition-exited`              |                                                 | See `options.transitions.onExited`                                                                                                                                                                                            |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/primer-sdk-vue.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"a6d7dc0b52a5a650861423fc1a7790dfdf1048b1","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"rollup -c","stdver":"standard-version -m '[skip ci] chore(release): v%s'","release":"gren release --override"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.20.1","dependencies":{"@primer-io/checkout-web":"1.2.0-beta.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^24.8.0","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^2.38.0","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","stylelint":"^9.10.0","typescript":"^4.1.3","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.1","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","@vue/compiler-sfc":"^3.0.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","vue-class-component":"^7.2.6","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.6.12","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-css-only":"^3.1.0","vue-property-decorator":"^9.1.2","@rollup/plugin-commonjs":"^17.0.0","rollup-plugin-typescript2":"^0.29.0","stylelint-config-standard":"^18.2.0","@rollup/plugin-node-resolve":"^11.1.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.2.3-beta.1_1611821396001_0.5710978759887488","host":"s3://npm-registry-packages"}},"1.2.3-beta.2":{"name":"@primer-io/checkout-vue","version":"1.2.3-beta.2","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.2.3-beta.2","maintainers":[{"name":"primer-developers","email":"developers@primerapi.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"}],"dist":{"shasum":"f69b4718aa2078d5f9c9af76b346ab75fbb60892","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.2.3-beta.2.tgz","fileCount":7,"integrity":"sha512-SKjYmMlT4eZJzZcckNTG+Vmt4lioCoV87WOyEmjEseD5vq4Un77z0kvyzUZB6RXDNJMjDXOBqiJDFOdHjMMztw==","signatures":[{"sig":"MEQCIEsySf2sVplsEk5AtKwSjopcf2RcuED5bkENDtIirOd8AiB/ZfkF61SpdyIsJ7Y+eoxT05rEJrQrTPyJ8XgWIoj+2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEoD2CRA9TVsSAnZWagAAV3UP+wW9CkU21JoRl7RliPXh\nO9smXa+17tqTq7cK0B/uzhw6qOOV+88MvjFTLth4w7T2jVgC76yaaGBWNK7m\nMy0W8kmzv0lJU9fd10QGUu1iiymMUd4+8Ckj+0/LItq9015rEJdA1oCNAair\nnZJBp2k7XYVHbYKejs32eWMuC9O4f7m9EDX1mgd3abtT6WiiRefLxCBrTa22\nzX5ngkgDF65HsgUkkc5qXAHfEfYWIXhMXbAEvbowV17JbeKKorBxikc8k337\npl/T+TXct6nYCkAhGRJ5cL2H9+9yGcWkXn7ua1MrKEEQN80vCKa/5Si0ytsA\n/y0r/2Z9adbdw1kB1mQat2iIkhjzfcMESNkbtarY8JfgZqmCFZvp9p8cCTtJ\nkJkMg1DZ6pjoRx2tKZbKUCbCql0C1+ifocgffTsg7h8uo+DC+an7SRri7cNb\ntaUOBaInYSuWo/Tq1vcQuzCzceg+erUcZqtILeEks8XkBSIDp6fEe3iiBpNG\nlx2jw8HQWN1FnfUG7hf+wwH1kUZxhZny5kxg84X/rSe9se0ymmkgP9ezN1il\noJCUZtGojlX4HU1dOvYqtlwNs9VbPAIIttqdfyssNIgLbR2UwkIqsTrUKsmw\nIp4CIf6jJ8Ina3z7A/6WPoe1TuKG4viAz5dB6Qox+fcUQIkVy9+oob18xRbf\nlRF7\r\n=wbN4\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\nThis wrapper is based on [`@primer-io/checkout-web@1.2.0-beta.0`](https://www.npmjs.com/package/@primer-io/checkout-web/v/1.2.0-beta.0).\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's [Universal Checkout](https://primer.io/docs/guides/checkout/#universal-checkout) using the configuration provided as props.\n\n## Example\n\n```vue\n<template>\n  <div>\n    <primer-checkout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the token data. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is `true`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next()` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess(error?)`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(error?)` with `error` being `undefined` to resolve the Promise, or with `error` being of type `Error` to reject the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n# API Reference\n\n## Props\n\n| Props                     | Type                                         | Required | Description                                                                                |\n| ------------------------- | -------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                                     | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                                     | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                                     | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                                     | `false`  |                                                                                            |\n| `countryCode`             | `String`                                     | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`                               | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions`                  | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                                       | `false`  |                                                                                            |\n| `paypal`                  | `Object`                                     | `false`  |                                                                                            |\n| `googlePay`               | `Object`                                     | `false`  |                                                                                            |\n| `applePay`                | `Object`                                     | `false`  |                                                                                            |\n| `directDebit`             | `Object`                                     | `false`  |                                                                                            |\n| `transitions`             | `Transitions`                                | `false`  | Control the transition duration when switching between views in the checkout component     |\n| `submitButton`            | `Object`                                     | `false`  |                                                                                            |\n| `tokenizeSuccess`         | `(token: PaymentMethodToken): Promise<void>` | `false`  | Function props used for `onTokenizeSuccess`                                                |\n| `tokenizeSuccessStatus`   | `Boolean | Error`                            | `false`  | Status of `onTokenizeSuccess`                                                              |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype Transitions {\n  // a number of milliseconds or specify different durations for 'enter' and 'exit'\n  duration?: number | { enter: number, exit: number };\n  // Callbacks for when a view is transitioning in or out\n  onEntering?: (node: Node) => void;\n  onEntered?: (node: Node) => void;\n  onExiting?: (node: Node) => void;\n  onExited?: (node: Node) => void;\n};\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n| `transition-enter`               |                                                 | See `options.transitions.onEnter`                                                                                                                                                                                             |\n| `transition-entering`            |                                                 | See `options.transitions.onEntering`                                                                                                                                                                                          |\n| `transition-entered`             |                                                 | See `options.transitions.onEntered`                                                                                                                                                                                           |\n| `transition-exit`                |                                                 | See `options.transitions.onExit`                                                                                                                                                                                              |\n| `transition-exiting`             |                                                 | See `options.transitions.onExiting`                                                                                                                                                                                           |\n| `transition-exited`              |                                                 | See `options.transitions.onExited`                                                                                                                                                                                            |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/checkout.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"44a56436756990a8794b9d35c3f81e323751e8b8","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"rollup -c","stdver":"standard-version -m '[skip ci] chore(release): v%s'","release":"gren release --override"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.20.1","dependencies":{"@primer-io/checkout-web":"1.2.0-beta.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^24.8.0","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^2.38.0","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","stylelint":"^9.10.0","typescript":"^4.1.3","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.1","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","@vue/compiler-sfc":"^3.0.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","vue-class-component":"^7.2.6","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.6.12","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-css-only":"^3.1.0","vue-property-decorator":"^9.1.2","@rollup/plugin-commonjs":"^17.0.0","rollup-plugin-typescript2":"^0.29.0","stylelint-config-standard":"^18.2.0","@rollup/plugin-node-resolve":"^11.1.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.2.3-beta.2_1611825397830_0.527579903544023","host":"s3://npm-registry-packages"}},"1.2.3-beta.3":{"name":"@primer-io/checkout-vue","version":"1.2.3-beta.3","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.2.3-beta.3","maintainers":[{"name":"primer-developers","email":"developers@primerapi.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"}],"dist":{"shasum":"6fb106af94370e856f15e041206b955f82e76339","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.2.3-beta.3.tgz","fileCount":13,"integrity":"sha512-mJ7FdDNeqopaA0RM9VOYoia9lRJUOptyAKL8BqzX/xWxNzdLPwWuzxtcgdqL8jH1UkLmXNPWmWIIlY8TJcJPyQ==","signatures":[{"sig":"MEUCIC0Y5matEbMO4BYh11fdVMcog8DuNFcdSel3XmFo5OmKAiEA3RiTUsr2ry30ImSl0Z7CdHJxnV7dzWP/M6NKT7sAjXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5617067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEoUsCRA9TVsSAnZWagAANYoP/A9fXZjeHN5bpox7gwUF\n0kFwiLMWhu6TgXO5ER+lhWkbpwEkvVZRmQu3oZXk/3PdikRlNMd+5WEJ+So3\nqQDeA19FXMvbKEzZUcdwzNdi8Q8LY/nsv4mC48faRvVj9Bc6SOIymBLJaXqg\nE5y3a3jMVM5dgxnePAXwY1NmqibL+3kgFfkGMnp0bS5mh9xpo8YvWNStVUSd\nUU+XQVp9i1HBfzywPHOkLEmS8z0E9IM75LJJyHYICFSy37McAKSBCZ0RnI1a\n1BwnBsJKeDMHm1C2J3i+ASHYHYar2QideTmhekDeMEay9x4STsULrQ41+G+B\n19szjbHyDcEJZGMz6RS2PX12BHXmsFGHt/AQtjKbZdjK7+uwCdowpUXWi9Yq\nL5eAQhO9nCK7Aev54yhJpFjg3So8c35hkiHcejtADEkKdKRP5Krj8HIV8nAh\n9sTXeRldRxp47uxtNrz91SFd7euByRvIFj86yf//WApDpRqq+7lG7xJ0cyRz\nNLVd5S3FSadmETjCUNRRTC0NSZ5Z3LaLhdBAfQ4Rhz/QaLZWT2GuSGj25DIp\ndh4NR0Vy0tVEL0Fw8iYd4UA38140bU4e2yY+SSspAYORznQDcztQWdh8yOH1\n1qecpKF6O/b6KizT2wsL9aTSEbzrBhU1OSnA5Gwr6aQJcQjdI2m1UHi93cym\nNuoB\r\n=krCA\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\nThis wrapper is based on [`@primer-io/checkout-web@1.2.0-beta.0`](https://www.npmjs.com/package/@primer-io/checkout-web/v/1.2.0-beta.0).\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's [Universal Checkout](https://primer.io/docs/guides/checkout/#universal-checkout) using the configuration provided as props.\n\n## Example\n\n```vue\n<template>\n  <div>\n    <primer-checkout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the token data. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is `true`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next()` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess(error?)`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(error?)` with `error` being `undefined` to resolve the Promise, or with `error` being of type `Error` to reject the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n# API Reference\n\n## Props\n\n| Props                     | Type                                         | Required | Description                                                                                |\n| ------------------------- | -------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                                     | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                                     | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                                     | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                                     | `false`  |                                                                                            |\n| `countryCode`             | `String`                                     | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`                               | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions`                  | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                                       | `false`  |                                                                                            |\n| `paypal`                  | `Object`                                     | `false`  |                                                                                            |\n| `googlePay`               | `Object`                                     | `false`  |                                                                                            |\n| `applePay`                | `Object`                                     | `false`  |                                                                                            |\n| `directDebit`             | `Object`                                     | `false`  |                                                                                            |\n| `transitions`             | `Transitions`                                | `false`  | Control the transition duration when switching between views in the checkout component     |\n| `submitButton`            | `Object`                                     | `false`  |                                                                                            |\n| `tokenizeSuccess`         | `(token: PaymentMethodToken): Promise<void>` | `false`  | Function props used for `onTokenizeSuccess`                                                |\n| `tokenizeSuccessStatus`   | `Boolean | Error`                            | `false`  | Status of `onTokenizeSuccess`                                                              |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype Transitions {\n  // a number of milliseconds or specify different durations for 'enter' and 'exit'\n  duration?: number | { enter: number, exit: number };\n  // Callbacks for when a view is transitioning in or out\n  onEntering?: (node: Node) => void;\n  onEntered?: (node: Node) => void;\n  onExiting?: (node: Node) => void;\n  onExited?: (node: Node) => void;\n};\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n| `transition-enter`               |                                                 | See `options.transitions.onEnter`                                                                                                                                                                                             |\n| `transition-entering`            |                                                 | See `options.transitions.onEntering`                                                                                                                                                                                          |\n| `transition-entered`             |                                                 | See `options.transitions.onEntered`                                                                                                                                                                                           |\n| `transition-exit`                |                                                 | See `options.transitions.onExit`                                                                                                                                                                                              |\n| `transition-exiting`             |                                                 | See `options.transitions.onExiting`                                                                                                                                                                                           |\n| `transition-exited`              |                                                 | See `options.transitions.onExited`                                                                                                                                                                                            |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/checkout.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"32dda593c21b671bddea11068138a67c966f9011","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"rollup -c","stdver":"standard-version -m '[skip ci] chore(release): v%s'","prepare":"yarn build","release":"gren release --override"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.20.1","dependencies":{"@primer-io/checkout-web":"1.2.0-beta.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^24.8.0","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^2.38.0","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","stylelint":"^9.10.0","typescript":"^4.1.3","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.1","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","@vue/compiler-sfc":"^3.0.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","vue-class-component":"^7.2.6","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.6.12","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-css-only":"^3.1.0","vue-property-decorator":"^9.1.2","@rollup/plugin-commonjs":"^17.0.0","rollup-plugin-typescript2":"^0.29.0","stylelint-config-standard":"^18.2.0","@rollup/plugin-node-resolve":"^11.1.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.2.3-beta.3_1611826476004_0.645520150784165","host":"s3://npm-registry-packages"}},"1.3.0-beta.1":{"name":"@primer-io/checkout-vue","version":"1.3.0-beta.1","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.3.0-beta.1","maintainers":[{"name":"primer-developers","email":"developers@primerapi.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"}],"dist":{"shasum":"289a1bd533ef842be132738d02f7a66645081e17","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.3.0-beta.1.tgz","fileCount":12,"integrity":"sha512-v1cO80t/zMopOUAgjxL9qFYxBSSxDsDOWORqT7mXh28z+4m+Jf2BzLJc2wYyMr+JM6BzqECra083GDDIgGS3Ig==","signatures":[{"sig":"MEYCIQCvSWvT2NfFGlMn5hoTQJR9Ohk7SeNX4l/MQEcud8QhnQIhAMQH+a9uiglEzLuuEq3A0eovGIuL5F3aG9831T+nNcCd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8482446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEp81CRA9TVsSAnZWagAA/+oQAKDsLj9Fboo9bn03/i9P\nXMqG9S6kcePB3OSE0IpTJcMJzclHbjUVtKWQrNHZFLERdJvYoAF4es9LdWhe\n0/7sik4Fk1AheNGYxafDwPlxzmSxrtwB347dCdmp3pFc39CGhkFcO3JQdmAo\npAEAnZAGsDnInfAr/ZbkMxgpzLpKfKfAYkX9HM/e7YUSNHcukhCx6F0je+Rc\nFcYL0n7jLV0rYgzP+VuCIX1+U7mZjVzxJFwiXoCSXbZ7+ADho23JEuvHv7h6\nALCF3Foh5k/qbRx8YKkccxjT1sVZM4JgsJMxggbjLrHxS+4S4+R9S/pWsRUE\nf/X2f4SWAtt/moXqCyzMEeIFltR6Wl2EOI/LNZKyyVbHmZF+aUsTzjZas8J+\nby2jeJJgpBJJBaobsKiLpCehAevmKtaSoCW922js/kgwS5mPrkn2weE2hri4\nq2sgFjT/YD+lSTiGu4EeJA1lsQyeuo9AFlCglCXpupm9GmHsts3/blvkkcxf\nDqy4GYvU/lvrRlOblRUHClu4jRGD1VTmP1pEsEG3aX5S9dtXXyGw4fHnnguy\n2bpsqbVJOCgmQupGjg24havUIHvJ/9WqwsAtb+mSpEW17I77i0sji8acTnZv\n5f8hjwnwTcTdqDK/H0TUVVS/Ub/27d5SbUiXcYfUZS/kIbSj5NP/5vPThD1a\nMOLc\r\n=pkBT\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"types":"dist/index.d.ts","module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\nThis wrapper is based on [`@primer-io/checkout-web@1.2.0`](https://www.npmjs.com/package/@primer-io/checkout-web/v/1.2.0).\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's [Universal Checkout](https://primer.io/docs/guides/checkout/#universal-checkout) using the configuration provided as props.\n\n## Example\n\n```vue\n<template>\n  <div>\n    <primer-checkout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the token data. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is `true`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next()` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess(error?)`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(error?)` with `error` being `undefined` to resolve the Promise, or with `error` being of type `Error` to reject the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n# API Reference\n\n## Props\n\n| Props                     | Type                                         | Required | Description                                                                                |\n| ------------------------- | -------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                                     | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                                     | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                                     | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                                     | `false`  |                                                                                            |\n| `countryCode`             | `String`                                     | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`                               | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions`                  | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                                       | `false`  |                                                                                            |\n| `paypal`                  | `Object`                                     | `false`  |                                                                                            |\n| `googlePay`               | `Object`                                     | `false`  |                                                                                            |\n| `applePay`                | `Object`                                     | `false`  |                                                                                            |\n| `directDebit`             | `Object`                                     | `false`  |                                                                                            |\n| `submitButton`            | `Object`                                     | `false`  |                                                                                            |\n| `tokenizeSuccess`         | `(token: PaymentMethodToken): Promise<void>` | `false`  | Function props used for `onTokenizeSuccess`                                                |\n| `tokenizeSuccessStatus`   | `Boolean | Error`                            | `false`  | Status of `onTokenizeSuccess`                                                              |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype Transitions {\n  // a number of milliseconds or specify different durations for 'enter' and 'exit'\n  duration?: number | { enter: number, exit: number };\n  // Callbacks for when a view is transitioning in or out\n  onEntering?: (node: Node) => void;\n  onEntered?: (node: Node) => void;\n  onExiting?: (node: Node) => void;\n  onExited?: (node: Node) => void;\n};\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/checkout.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"bf0bf4a73fecf297b2fc97d3b30e45e968e04ecb","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"rollup -c","stdver":"standard-version -m '[skip ci] chore(release): v%s'","prepare":"yarn build","release":"gren release --override"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.20.1","dependencies":{"@primer-io/checkout-web":"1.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^24.8.0","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^2.38.0","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","stylelint":"^9.10.0","typescript":"^4.1.3","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.1","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","@vue/compiler-sfc":"^3.0.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","vue-class-component":"^7.2.6","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.6.12","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-css-only":"^3.1.0","vue-property-decorator":"^9.1.2","@rollup/plugin-commonjs":"^17.0.0","rollup-plugin-typescript2":"^0.29.0","stylelint-config-standard":"^18.2.0","@rollup/plugin-node-resolve":"^11.1.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.3.0-beta.1_1611833141049_0.1649560941962891","host":"s3://npm-registry-packages"}},"1.3.0-beta.2":{"name":"@primer-io/checkout-vue","version":"1.3.0-beta.2","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.3.0-beta.2","maintainers":[{"name":"primer-developers","email":"developers@primerapi.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"}],"dist":{"shasum":"ba5c22fa28b78986a878329cd896eb4d1def58bb","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.3.0-beta.2.tgz","fileCount":13,"integrity":"sha512-tPr8VnIYF9HpjudDFsTrb6/i0lTgDV85M0lboalfIedFWMymWpKrU1yNqdzEYF2uPSTzGFkicoLtY8nl7TzJZw==","signatures":[{"sig":"MEUCIQDsXieZ0zidDTZPgRdzmi6YxMpdwRt637Iby4Th7xIocQIgCuhqJLfLU12sy53adYhQA7tExhetivMm+L4Ej+daN3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8506149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEqLVCRA9TVsSAnZWagAAqlYP/23T8TWjcHsJHXJfoOgN\noWCA2KOOfgNe3s6fWrLNngQPHc4AwOr1Cc7IAkImaBHkOK66wNToEuBX2mV8\nl2DLNZt3UKRPTjIOzNY/P8aHMk+n27MJgor5xLOC0d8USUQ0Mxfm/hzKbWi0\nFHyEdgfKsLDeA0Hg5x0xBYS+BNpLFH7Og1WKpcbwOSnGWX3VVs+5DA6MpCTl\nr9ev336RMmSdKcxJciJS5Z8DbNQP+JFPfA1df/ZrpleXCQ9zEhe6Dtu+xq/p\n5yIBevRD6mSDgzust54mRNUdfcNY/MQ9osLmMO04tewzw4aEtVxQh6Q3CF1v\npxNImJioxYVua7dIsdvLrO/A7m50ve2WmMGmLY+0/P/JMxWNokJlLTuZez4p\nzfCdQm8AZMdwug/y5j8QyN0KKuXfJGpCqOXk6yPGSQjsLfUTYI3YalI0Dbjv\nZp3uB2T8Ei/eyZrMgL+xCOEITpoiaXeEfAshGZO3Dn7ZPFpXuTYKJmlvHAbi\noytVUEIIDCnG3MZZlsM0ee98TRvTT3BzxNMslAu5WWKTO7Wr5NX1qq58mC1w\nCrD6RO9T6VKfNMIEDHPml0QJ9qLpeLxyM1f/KWtO11QuBkUWCQuCDks8z90b\npNYPIBh80xRNKSNYg7DfN8ukJxWdciV2NP5+0LH8qXqDdx18z4enmDF89F+s\nB48p\r\n=w5El\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"types":"dist/index.d.ts","module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\nThis wrapper is based on [`@primer-io/checkout-web@1.2.0`](https://www.npmjs.com/package/@primer-io/checkout-web/v/1.2.0).\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's [Universal Checkout](https://primer.io/docs/guides/checkout/#universal-checkout) using the configuration provided as props.\n\n## Installation\n\nWith npm:\n\n```\nnpm i -s @primer-io/checkout-vue\n```\n\nWith yarn:\n\n```\nyarn add @primer-io/checkout-vue\n```\n\n## Example\n\n```vue\n<template>\n  <div>\n    <PrimerCheckout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerCheckout} from '@primer-io/checkout-vue'\n\nexport default {\n  name: 'App',\n  components: {PrimerCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the token data. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is `true`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next()` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess(error?)`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(error?)` with `error` being `undefined` to resolve the Promise, or with `error` being of type `Error` to reject the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n# API Reference\n\n## Props\n\n| Props                     | Type                                         | Required | Description                                                                                |\n| ------------------------- | -------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                                     | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                                     | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                                     | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                                     | `false`  |                                                                                            |\n| `countryCode`             | `String`                                     | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`                               | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions`                  | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                                       | `false`  |                                                                                            |\n| `paypal`                  | `Object`                                     | `false`  |                                                                                            |\n| `googlePay`               | `Object`                                     | `false`  |                                                                                            |\n| `applePay`                | `Object`                                     | `false`  |                                                                                            |\n| `directDebit`             | `Object`                                     | `false`  |                                                                                            |\n| `submitButton`            | `Object`                                     | `false`  |                                                                                            |\n| `tokenizeSuccess`         | `(token: PaymentMethodToken): Promise<void>` | `false`  | Function props used for `onTokenizeSuccess`                                                |\n| `tokenizeSuccessStatus`   | `Boolean | Error`                            | `false`  | Status of `onTokenizeSuccess`                                                              |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype Transitions {\n  // a number of milliseconds or specify different durations for 'enter' and 'exit'\n  duration?: number | { enter: number, exit: number };\n  // Callbacks for when a view is transitioning in or out\n  onEntering?: (node: Node) => void;\n  onEntered?: (node: Node) => void;\n  onExiting?: (node: Node) => void;\n  onExited?: (node: Node) => void;\n};\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/checkout.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"cd4cf1a70255cbc84b0d519a32da88dc5a6ee2ed","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"rollup -c","stdver":"standard-version -m '[skip ci] chore(release): v%s'","prepare":"yarn build","release":"gren release --override"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.20.1","dependencies":{"@primer-io/checkout-web":"1.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^24.8.0","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^2.38.0","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","stylelint":"^9.10.0","typescript":"^4.1.3","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.1","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","@vue/compiler-sfc":"^3.0.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","vue-class-component":"^7.2.6","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.6.12","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-css-only":"^3.1.0","vue-property-decorator":"^9.1.2","@rollup/plugin-commonjs":"^17.0.0","rollup-plugin-typescript2":"^0.29.0","stylelint-config-standard":"^18.2.0","@rollup/plugin-node-resolve":"^11.1.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.3.0-beta.2_1611834069352_0.5818072542635633","host":"s3://npm-registry-packages"}},"1.3.0-beta.3":{"name":"@primer-io/checkout-vue","version":"1.3.0-beta.3","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.3.0-beta.3","maintainers":[{"name":"primer-developers","email":"developers@primerapi.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"}],"dist":{"shasum":"afb837171d3312d149bf070ef6d6187870451304","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.3.0-beta.3.tgz","fileCount":13,"integrity":"sha512-Vg8J58bEs7O8AMO3hhrmuCIzs9jbxJeG5wWSMRtSNFDzkPUZ6DLrj7kssGJqZNlJbI8gHo/IMJzxAbTSe1chrQ==","signatures":[{"sig":"MEQCIGoV0LMrXXUWxc3OAalU0JMu+3vyLsLmp52YyQ+pHPqWAiBwwZjDJm3S2hYtra5amNHlp6eACpwkeeYgMwt7w7kX+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8690115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgE9gVCRA9TVsSAnZWagAAj/0P/RND5TzeRLE9m+CibKIb\nn6Z6hBb7K3OETk62mJeXwrpEGaSYmEu513Zj5oCoU9I+lcWWybLCJZMBZErw\n6t1zvkH8diUjVGoV4vo9Jnjx7XJwVh6JEPjdHT9P4eo4Il5+E8PCzMnqDHL8\nNIhNaotc6zMBKPa0dVxUb81kgf8tNfmGCaB/Ap2vuBPTIhi3aGSC4URKZRi5\nIiOCtN/7jGATnYotC4K3iVu6fvq7Pu2LHSNoB4maFcsSg8B+5OlaxFH4FjVD\nep0qnbaXwhe0qXl339yAYowK3licK2wWlArOUPQYv8Il6sj+OhQzk8iDKl0D\nU7YumLMx7MkKnMi7w9Hv4Kl0aKB65GUM7srxj2n/mxunl2mIzacAF5dza+1Y\nvHGECscJOMvCneDKzkAo/ACdf3YWLg2Icf32d4DBkVevhpz6N4k0lL+JN/pm\n5TLOkFDLiWGNDU62KFOsbOa1LsAVz7j2kkb38N/WShm3xllOykkj6KpnvDHr\n4GZ0z6JOW9IOb7EHs24bBEWgzAcgKaashYPfMMjSN6IoO0xiFFi1Ulq8aFz1\nqm5d4ePXEwzq76dW76rn/xpth+gvtYs4zzEOegEX1/veipEzCSqrR4mX25Jn\nLbYyZdtT5y9dphd55QADndKzUhgJDPzqHs7xkOqlW4HEI/PrrZVkOcrus/U+\nu9U4\r\n=zf4h\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"types":"dist/index.d.ts","module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\nThis wrapper is based on [`@primer-io/checkout-web@1.2.0-beta.36`](https://www.npmjs.com/package/@primer-io/checkout-web/v/1.2.0-beta.36).\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's [Universal Checkout](https://primer.io/docs/guides/checkout/#universal-checkout) using the configuration provided as props.\n\n## Installation\n\nWith npm:\n\n```\nnpm i -s @primer-io/checkout-vue\n```\n\nWith yarn:\n\n```\nyarn add @primer-io/checkout-vue\n```\n\n## Example\n\n```vue\n<template>\n  <div>\n    <PrimerCheckout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerCheckout} from '@primer-io/checkout-vue'\n\nexport default {\n  name: 'App',\n  components: {PrimerCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the token data. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is `true`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next()` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess(error?)`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(error?)` with `error` being `undefined` to resolve the Promise, or with `error` being of type `Error` to reject the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n# API Reference\n\n## Props\n\n| Props                     | Type                                         | Required | Description                                                                                |\n| ------------------------- | -------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                                     | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                                     | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                                     | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                                     | `false`  |                                                                                            |\n| `countryCode`             | `String`                                     | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`                               | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions`                  | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                                       | `false`  |                                                                                            |\n| `paypal`                  | `Object`                                     | `false`  |                                                                                            |\n| `googlePay`               | `Object`                                     | `false`  |                                                                                            |\n| `applePay`                | `Object`                                     | `false`  |                                                                                            |\n| `directDebit`             | `Object`                                     | `false`  |                                                                                            |\n| `submitButton`            | `Object`                                     | `false`  |                                                                                            |\n| `tokenizeSuccess`         | `(token: PaymentMethodToken): Promise<void>` | `false`  | Function props used for `onTokenizeSuccess`                                                |\n| `tokenizeSuccessStatus`   | `Boolean | Error`                            | `false`  | Status of `onTokenizeSuccess`                                                              |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype Transitions {\n  // a number of milliseconds or specify different durations for 'enter' and 'exit'\n  duration?: number | { enter: number, exit: number };\n  // Callbacks for when a view is transitioning in or out\n  onEntering?: (node: Node) => void;\n  onEntered?: (node: Node) => void;\n  onExiting?: (node: Node) => void;\n  onExited?: (node: Node) => void;\n};\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/checkout.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"1eabd82c2ff88b40c54e9ac6fffb884b1496806a","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"rollup -c","stdver":"standard-version -m '[skip ci] chore(release): v%s'","prepare":"yarn build","release":"gren release --override"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.20.1","dependencies":{"@primer-io/checkout-web":"1.2.0-beta.36"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^24.8.0","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^2.38.0","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","stylelint":"^9.10.0","typescript":"^4.1.3","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.1","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","@vue/compiler-sfc":"^3.0.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","vue-class-component":"^7.2.6","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.6.12","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-css-only":"^3.1.0","vue-property-decorator":"^9.1.2","@rollup/plugin-commonjs":"^17.0.0","rollup-plugin-typescript2":"^0.29.0","stylelint-config-standard":"^18.2.0","@rollup/plugin-node-resolve":"^11.1.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.3.0-beta.3_1611913236594_0.601963162020011","host":"s3://npm-registry-packages"}},"1.3.0-beta.4":{"name":"@primer-io/checkout-vue","version":"1.3.0-beta.4","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.3.0-beta.4","maintainers":[{"name":"primer-developers","email":"developers@primerapi.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"}],"dist":{"shasum":"e8ad395c48c7bedb6b84a85aab9373ac854c600d","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.3.0-beta.4.tgz","fileCount":15,"integrity":"sha512-0zblwZUTM832A7YHXH3sCsPgbOup3tNWAUMBk/VxbP5r7jaAYCOhQb0+QJuf9bXd4S/BXX2rm4o63Le20iC71g==","signatures":[{"sig":"MEUCIEE9jU8tubULx/SWp+2Mp2LLonhKcwjQqBwFUlGmntLZAiEAuJaNUzFTKT+mNDANEUj1zA4Mtm4uciy04DyPe3VwRCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":8789468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFBYICRA9TVsSAnZWagAANXcP/3FOu+iZU6RVza+wIDpp\nC6Zfm0eqBnUyzw451z/1TU9frFbCoyrdRItIS80mlkEt+cLamU9bjUcEvsB7\n0EzHoL+NbIYPJdUllE+wpyw8V9UJNNlEglM9+ba8R6rQUgmPao7KKrpLr4E7\nJRJPlIIp+ti4DTAT/LpHFBzyKyadeg4P3HQ63C6A7IdjogxxIN6ZPIXNGilo\nKICo2tG7Onu5nfOeTZH5oO81VsOeNLjTbw3HGhhsLHwTZd8WVka/opqriTUp\nNZH6IWgkOOUcwmBmK6R1Nd07nlvCwN5sT2of4mPcwvOFNd50I23Dr/OxNyXz\ntbwSq8oTreMT2n9T+aj6/2vXHZ9woucaocL7+0RLXekkf5HTg9z5R6/lxONT\nKz6tszo878RPjptAVU6ZngyTIZTFRcTfIZcqBqw5R2XRX0tTxyI3Qxh4IygM\nV2r63u/ichcNcyv/dcAVOdss8qCzGFJ6FElk5vt2zAAEYC4iO+33qGxghgRZ\n7zKBQOV4EzWE4RE6lwWLqM8LUZ6vJrwBhI+KpSaDSDRNNBpF3wORHyBCjTlR\nxI/8r8GDM3cOpMnv4Nm5eIvhXaYMCaQRadVOMgh3X2RwiK9SVbz2bBpIcoyL\nM53sZE/5tYby2jPIu2L+5hJ/clveB8dm1MwF7vLFl0HC1OBKcDTRWj9HjVTG\nkKUk\r\n=rG8P\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"types":"dist/index.d.ts","module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\nThis wrapper is based on [`@primer-io/checkout-web@1.2.0-beta.36`](https://www.npmjs.com/package/@primer-io/checkout-web/v/1.2.0-beta.36).\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's [Universal Checkout](https://primer.io/docs/guides/checkout/#universal-checkout) using the configuration provided as props.\n\n## Installation\n\nWith npm:\n\n```\nnpm i -s @primer-io/checkout-vue\n```\n\nWith yarn:\n\n```\nyarn add @primer-io/checkout-vue\n```\n\n## Example\n\n```vue\n<template>\n  <div>\n    <PrimerCheckout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerCheckout} from '@primer-io/checkout-vue'\nimport '@primer-io/checkout-vue/Checkout.css'\n\nexport default {\n  name: 'App',\n  components: {PrimerCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the token data. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is `true`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next()` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess(error?)`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(error?)` with `error` being `undefined` to resolve the Promise, or with `error` being of type `Error` to reject the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n# API Reference\n\n## Props\n\n| Props                     | Type                        | Required | Description                                                                                |\n| ------------------------- | --------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                    | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                    | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                    | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                    | `false`  |                                                                                            |\n| `countryCode`             | `String`                    | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`              | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions` | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                      | `false`  |                                                                                            |\n| `paypal`                  | `Object`                    | `false`  |                                                                                            |\n| `googlePay`               | `Object`                    | `false`  |                                                                                            |\n| `applePay`                | `Object`                    | `false`  |                                                                                            |\n| `directDebit`             | `Object`                    | `false`  |                                                                                            |\n| `submitButton`            | `Object`                    | `false`  |                                                                                            |\n| `style`                   | `Object`                    | `false`  |                                                                                            |\n\n| `tokenizeSuccess` | `(token: PaymentMethodToken): Promise<void>` | `false` | Function props used for `onTokenizeSuccess` |\n| `tokenizeSuccessStatus` | `Boolean | Error` | `false` | Status of `onTokenizeSuccess` |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype Transitions {\n  // a number of milliseconds or specify different durations for 'enter' and 'exit'\n  duration?: number | { enter: number, exit: number };\n  // Callbacks for when a view is transitioning in or out\n  onEntering?: (node: Node) => void;\n  onEntered?: (node: Node) => void;\n  onExiting?: (node: Node) => void;\n  onExited?: (node: Node) => void;\n};\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/checkout.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"115fd0cafeb5f244ededee025c5e66a08d9aae52","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"rollup -c","stdver":"standard-version -m '[skip ci] chore(release): v%s'","prepare":"yarn build","release":"gren release --override"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.20.1","dependencies":{"@primer-io/checkout-web":"1.2.0-beta.36"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^26.6.3","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^2.38.0","ts-jest":"^26.4.4","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","vue-jest":"^3.0.7","stylelint":"^9.10.0","babel-jest":"^26.6.3","typescript":"^4.1.3","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.2","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","@vue/compiler-sfc":"^3.0.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","vue-class-component":"^7.2.6","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.6.12","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-css-only":"^3.1.0","vue-property-decorator":"^9.1.2","@rollup/plugin-commonjs":"^17.0.0","rollup-plugin-typescript2":"^0.29.0","stylelint-config-standard":"^18.2.0","@rollup/plugin-node-resolve":"^11.1.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.3.0-beta.4_1611929095927_0.3197023782962827","host":"s3://npm-registry-packages"}},"1.3.0-beta.5":{"name":"@primer-io/checkout-vue","version":"1.3.0-beta.5","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.3.0-beta.5","maintainers":[{"name":"primer-developers","email":"developers@primerapi.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"}],"dist":{"shasum":"5243031a0e62f978d823f8a1399d137709ab1d61","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.3.0-beta.5.tgz","fileCount":15,"integrity":"sha512-MRK8szsUE9WoVokChkjhN5LQuCtrU5Bq1VbeWJYYd/GMCIX/s9n/H+sF36UkCoSfyAPulLX4b3umHpqqahQ9Ow==","signatures":[{"sig":"MEQCIExiOGZ35N4nLUhlH4xNRHDNzPWoo45HABzeW+CwI95JAiAJao08yaIip+BVMj5SXXUtkKy8sUf73I5tKkUrVZRu2A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9066755,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGs7SCRA9TVsSAnZWagAA3/8P/R0U7vHMWDq0+mMkebSJ\nPlBrEtretuDnhfdHlM/8FInubqiXexzLYjKVvuLgTvbUId/Ukeh6U/XHlyFF\nIPMIv0/NkqkaoWQTENa7FVRCoFThmMP+cQgDldMYUTD6bT3kdVwEUrNyRMfq\nVf/Fc8tN54oi4VXy7dnFB79xVrejKRbH1zN/YeGO6L5vDGBaET0XzuFKlVUE\nrJcpNu3I72zfF4TVpQIXkyPpnDG95o4A1kstvVlWUzCFnx5Pdg68k9xzFVcJ\nqeb+N8YxO99MeZrK1qEo+aVArmzPbWik8QekJQRYU8QHzGgqAkF/Z3P4BPEi\nL2sRLy7GPEkBrE3JFoc8ni2PeSFkeevGeXxz/GbZkmPyz/WQPs5zOAeMF3Pj\nENonQYU94i5mbE+2NNkhEn6ruNr9r5fXx/OFfq34ELgtkkunY2GEfKDZBlle\n1Ha+gZKKWAQ4YxRTg6UEg9mcuvn61CD4+XzTWQfnPu3spOHA+4kKWOCXOFSF\nWu4TIXX3EMOXJjNbj40b1bpEN33bdMyFG2RwImEnm1ePnxJ+HI36BI6EuCMT\nUAvqDjk06ufupGYeda6CWY5iArX5/nebkV93GfXIbC13FeLJedYCF0F03AMP\nZXsO1i6xavVeflKiApld0AFm/ZBC7K3yjpD2tk811qYw/dPwFpeL/vXkh4DS\nirn1\r\n=Q2wP\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"types":"dist/index.d.ts","module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\nThis wrapper is based on [`@primer-io/checkout-web@1.2.0-beta.36`](https://www.npmjs.com/package/@primer-io/checkout-web/v/1.2.0-beta.36).\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's [Universal Checkout](https://primer.io/docs/guides/checkout/#universal-checkout) using the configuration provided as props.\n\n## Installation\n\nWith npm:\n\n```\nnpm i -s @primer-io/checkout-vue\n```\n\nWith yarn:\n\n```\nyarn add @primer-io/checkout-vue\n```\n\n## Example\n\n```vue\n<template>\n  <div>\n    <PrimerCheckout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerCheckout} from '@primer-io/checkout-vue'\nimport '@primer-io/checkout-vue/Checkout.css'\n\nexport default {\n  name: 'App',\n  components: {PrimerCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the token data. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is `true`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next()` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess(error?)`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(error?)` with `error` being `undefined` to resolve the Promise, or with `error` being of type `Error` to reject the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n# API Reference\n\n## Props\n\n| Props                     | Type                                         | Required | Description                                                                                |\n| ------------------------- | -------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                                     | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                                     | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                                     | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                                     | `false`  |                                                                                            |\n| `countryCode`             | `String`                                     | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`                               | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions`                  | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                                       | `false`  |                                                                                            |\n| `paypal`                  | `Object`                                     | `false`  |                                                                                            |\n| `googlePay`               | `Object`                                     | `false`  |                                                                                            |\n| `applePay`                | `Object`                                     | `false`  |                                                                                            |\n| `directDebit`             | `Object`                                     | `false`  |                                                                                            |\n| `submitButton`            | `Object`                                     | `false`  |                                                                                            |\n| `checkoutStyle`           | `Object`                                     | `false`  | The style of the checkout                                                                  |\n| `options`                 | `Object`                                     | `false`  | You can set multiple props at once using this object.                                      |\n| `tokenizeSuccess`         | `(token: PaymentMethodToken): Promise<void>` | `false`  | Function props used for `onTokenizeSuccess`                                                |\n| `tokenizeSuccessStatus`   | `Boolean | Error`                            | `false`  | Status of `onTokenizeSuccess`                                                              |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype Transitions {\n  // a number of milliseconds or specify different durations for 'enter' and 'exit'\n  duration?: number | { enter: number, exit: number };\n  // Callbacks for when a view is transitioning in or out\n  onEntering?: (node: Node) => void;\n  onEntered?: (node: Node) => void;\n  onExiting?: (node: Node) => void;\n  onExited?: (node: Node) => void;\n};\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/checkout.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"31d36e333c85a4994b422fc3c7dcfc323bd10d9a","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"rollup -c","stdver":"standard-version -m '[skip ci] chore(release): v%s'","prepare":"yarn build","release":"gren release --override"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.20.1","dependencies":{"deepmerge":"^4.2.2","@primer-io/checkout-web":"1.3.0-beta.7"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^26.6.3","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^2.38.0","ts-jest":"^26.4.4","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","vue-jest":"^3.0.7","stylelint":"^9.10.0","babel-jest":"^26.6.3","typescript":"^4.1.3","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.2","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","@vue/compiler-sfc":"^3.0.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","vue-class-component":"^7.2.6","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.6.12","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-css-only":"^3.1.0","vue-property-decorator":"^9.1.2","@rollup/plugin-commonjs":"^17.0.0","rollup-plugin-typescript2":"^0.29.0","stylelint-config-standard":"^18.2.0","@rollup/plugin-node-resolve":"^11.1.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.3.0-beta.5_1612369618043_0.09286364056820595","host":"s3://npm-registry-packages"}},"1.3.0-beta.6":{"name":"@primer-io/checkout-vue","version":"1.3.0-beta.6","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.3.0-beta.6","maintainers":[{"name":"primer-developers","email":"developers@primerapi.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"}],"dist":{"shasum":"061b9c761f1196a1cf19b7f891a378165f7d3c73","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.3.0-beta.6.tgz","fileCount":15,"integrity":"sha512-LIxnuQpwziNCHxODFvi36zfJ7N9HtnI+E+YXpvXLMgb8MXq1uJjledkDQVVpDD5UmtZBlvX1GubwZaybt7BJUQ==","signatures":[{"sig":"MEUCIQDtx+zBvzY573N1HI/eGAyHtmGLzhYZniF/KH3cmftJ6AIgaXKSDuyp8wk70u6jAA7Ah35reUz5VUv5m+mFHZiioSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1638440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgI7oZCRA9TVsSAnZWagAAONkP/1hrNwov2Iyg9sqW6BqG\nawf6xXPU0Zb1+4b76jlhn/Xgr9VsYhK2pF4RIbBdhc1xNk9q0YNCWnDRCpHn\nz5okvtv6OfvbxaYgH7WnZRdNj/52bSLRxRLOBs2EGt/xiYQr4vcmHaLg6Kys\nluYlG+jcgW4FAQRfU8yebh9QD8VLRRJ8Y2QpEPLa6AvdIgQGoRnfloi7sX1k\nSKsiUCaQ2AWK8cNO+qhyvUNsyI/sUY/67Y/JrUBKRq5hmR9/jzfQyUSPoJHO\nQ2xOEfrt5VMu9N7IUhOBw6eAhFQjYhhQgCYcmV9OGDA/tWofOmbHfXdsiyuY\nYqYDZp9ynWVYbn/seYrc5d7kfcJepmxmygLanQlFNHjNdVlWwsCDlrYJ9ECM\nDkpKIcg5XcjzfbVamN3TAbw3YF71ECl7smcRF60Ru3PAuaLWlF5tP/Y7QMxm\nWXJvc86ndhomJT1tNOLLM4ua4G+yXAZKLSDMzzO9DThkDr3HbnqeX49hzME2\nyUvpCB7t0bT3aWWPpUdkdNZG5UNgPcMtCyf1U4bYfTWjL59diGQBRFAGhStz\nmMyXdU3HcVfv5A9XgxeRbD0eRdNKIcjWNeiAmpeH4U39CkxFUyhq7ccZOC9p\nCreALrKsSuwCk9IKXpviTr9HZcJMaBS15riJx6iyynr3fSLrioXYxCWyzCYp\nkMhS\r\n=wUH6\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"types":"dist/index.d.ts","module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\nThis wrapper is based on [`@primer-io/checkout-web@1.2.0-beta.36`](https://www.npmjs.com/package/@primer-io/checkout-web/v/1.2.0-beta.36).\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's [Universal Checkout](https://primer.io/docs/guides/checkout/#universal-checkout) using the configuration provided as props.\n\n## Installation\n\nWith npm:\n\n```\nnpm i -s @primer-io/checkout-vue\n```\n\nWith yarn:\n\n```\nyarn add @primer-io/checkout-vue\n```\n\n## Example\n\n```vue\n<template>\n  <div>\n    <PrimerCheckout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerCheckout} from '@primer-io/checkout-vue'\nimport '@primer-io/checkout-vue/dist/Checkout.css'\n\nexport default {\n  name: 'App',\n  components: {PrimerCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the token data. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is `true`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next()` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess(error?)`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(error?)` with `error` being `undefined` to resolve the Promise, or with `error` being of type `Error` to reject the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n# API Reference\n\n## Props\n\n| Props                     | Type                                         | Required | Description                                                                                |\n| ------------------------- | -------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                                     | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                                     | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                                     | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                                     | `false`  |                                                                                            |\n| `countryCode`             | `String`                                     | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`                               | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions`                  | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                                       | `false`  |                                                                                            |\n| `paypal`                  | `Object`                                     | `false`  |                                                                                            |\n| `googlePay`               | `Object`                                     | `false`  |                                                                                            |\n| `applePay`                | `Object`                                     | `false`  |                                                                                            |\n| `directDebit`             | `Object`                                     | `false`  |                                                                                            |\n| `submitButton`            | `Object`                                     | `false`  |                                                                                            |\n| `checkoutStyle`           | `Object`                                     | `false`  | The style of the checkout                                                                  |\n| `options`                 | `Object`                                     | `false`  | You can set multiple props at once using this object.                                      |\n| `tokenizeSuccess`         | `(token: PaymentMethodToken): Promise<void>` | `false`  | Function props used for `onTokenizeSuccess`                                                |\n| `tokenizeSuccessStatus`   | `Boolean | Error`                            | `false`  | Status of `onTokenizeSuccess`                                                              |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype Transitions {\n  // a number of milliseconds or specify different durations for 'enter' and 'exit'\n  duration?: number | { enter: number, exit: number };\n  // Callbacks for when a view is transitioning in or out\n  onEntering?: (node: Node) => void;\n  onEntered?: (node: Node) => void;\n  onExiting?: (node: Node) => void;\n  onExited?: (node: Node) => void;\n};\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/checkout.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"fd1bcf9d8bf9ce201b5dbf3a3064ba434ec43fe9","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"rollup -c","stdver":"standard-version -m '[skip ci] chore(release): v%s'","prepare":"yarn build","release":"gren release --override"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.20.1","dependencies":{"deepmerge":"^4.2.2","@primer-io/checkout-web":"1.3.0-beta.20"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^26.6.3","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^2.38.0","ts-jest":"^26.4.4","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","vue-jest":"^3.0.7","stylelint":"^9.10.0","babel-jest":"^26.6.3","typescript":"^4.1.3","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.2","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","@vue/compiler-sfc":"^3.0.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","vue-class-component":"^7.2.6","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.6.12","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-css-only":"^3.1.0","vue-property-decorator":"^9.1.2","@rollup/plugin-commonjs":"^17.0.0","rollup-plugin-typescript2":"^0.29.0","stylelint-config-standard":"^18.2.0","@rollup/plugin-node-resolve":"^11.1.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.3.0-beta.6_1612954137372_0.2585285581734571","host":"s3://npm-registry-packages"}},"1.3.0-beta.7":{"name":"@primer-io/checkout-vue","version":"1.3.0-beta.7","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.3.0-beta.7","maintainers":[{"name":"primer-developers","email":"developers@primerapi.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"}],"dist":{"shasum":"fa98bfbff4cdc6727580222542ccf31c72e8a318","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.3.0-beta.7.tgz","fileCount":17,"integrity":"sha512-zgdf9xWTrN0vlKy95+a4mz+/r1s/qFQeVR26PTGrqHjhWmoOQ8xkNuW9RwYIzrfrSS7hEI3NIAsQNINx13y+Zg==","signatures":[{"sig":"MEUCIQDeAnZW+2viMOrICsIxHuZ2Pn+cx6BNnb1a8k2Q17c1jQIgBMcSV1zxP49gnANRt12fauU9+TIJHLOHLj7B+gsZ2Lo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1705584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgI8CQCRA9TVsSAnZWagAAy28P/jBk3fJ7A29likE6glcm\n99AF4p3aF2EU8mQcccNtlpapYoPcilXpjpC4mZjhiMQdMNA6Kqlf6m2Zs2TH\nNLzrOEZfobbb4NJZi5PVsWal1y2xbQnZjiasYXyEBspSxvmAOfjgpo5VRnA2\nvqtm0EXHQ6ggz7h+pksGMox45UB3uGRIOK963lffiULIyks3/cqchjre3otS\nAx4OdV5BnrpnRtqrP0T/sIDX5+2hNelwULuG3y0jbQaN95D+T/mNMIZ1m3bF\nS6QQBvJb/lW0jP7Aa9hH2LtuYeVwmeBQaGcIfMSK4zKfx9lLVLzYrhcl7h+r\nYhB8RD7MwU8rEXheH0VMIpYt/lSsGJJqHtrEzs8hDwQpg+3IGYHAeX/3d7mw\nSR4bDJ4sJ72ALFZHQ57g5kbUpMlj3ceQ7NCmNXelcmYA4gg2iVeNYCkX+F2C\nmVChER8oUsa5pgqUXK+Zeo3ICytmhuOJqVuzwQr7ZLlojjPrqY7zrkztFOSA\n1kY7KfcAVW4/fAS5KaQPnuRyeMGEJ2DRXRMbYsBGqRgW1WieK1gmY/Vlf1Q/\nnclSRAfgOxlN/N7dkfP/Chpe/AaSLEhrXcrS51yUk3F57fLtRWUbx30C3Us0\nk31zMMUyrzRTckQ5kauA2KirevJNR7v/OZYlf9BbG7YwgQpsO+p0Ruy6x4Ff\nmhCR\r\n=eb6b\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"types":"dist/index.d.ts","module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\nThis wrapper is based on [`@primer-io/checkout-web@1.3.0-beta.20`](https://www.npmjs.com/package/@primer-io/checkout-web/v/1.3.0-beta.20).\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's [Universal Checkout](https://primer.io/docs/guides/checkout/#universal-checkout) using the configuration provided as props.\n\n## Installation\n\nWith npm:\n\n```\nnpm i -s @primer-io/checkout-vue\n```\n\nWith yarn:\n\n```\nyarn add @primer-io/checkout-vue\n```\n\n## Example\n\n### Display all payment methods\n\n```vue\n<template>\n  <div>\n    <PrimerCheckout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerCheckout} from '@primer-io/checkout-vue'\nimport '@primer-io/checkout-vue/dist/Checkout.css'\n\nexport default {\n  name: 'App',\n  components: {PrimerCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n### Display a single payment method\n\nThis only works for GoCardless\n\n```vue\n<template>\n  <div>\n    <PrimerSinglePaymentMethodCheckout\n      v-if=\"clientToken\"\n      paymentMethod=\"GOCARDLESS\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerSinglePaymentMethodCheckout} from '@primer-io/checkout-vue'\nimport '@primer-io/checkout-vue/dist/Checkout.css'\n\nexport default {\n  name: 'App',\n  components: {PrimerSinglePaymentMethodCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the token data. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is `true`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next()` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess(error?)`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(error?)` with `error` being `undefined` to resolve the Promise, or with `error` being of type `Error` to reject the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n# API Reference\n\n## Props\n\n| Props                     | Type                                         | Required | Description                                                                                |\n| ------------------------- | -------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                                     | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                                     | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                                     | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                                     | `false`  |                                                                                            |\n| `countryCode`             | `String`                                     | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`                               | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions`                  | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                                       | `false`  |                                                                                            |\n| `paypal`                  | `Object`                                     | `false`  |                                                                                            |\n| `googlePay`               | `Object`                                     | `false`  |                                                                                            |\n| `applePay`                | `Object`                                     | `false`  |                                                                                            |\n| `directDebit`             | `Object`                                     | `false`  |                                                                                            |\n| `submitButton`            | `Object`                                     | `false`  |                                                                                            |\n| `checkoutStyle`           | `Object`                                     | `false`  | The style of the checkout                                                                  |\n| `options`                 | `Object`                                     | `false`  | You can set multiple props at once using this object.                                      |\n| `tokenizeSuccess`         | `(token: PaymentMethodToken): Promise<void>` | `false`  | Function props used for `onTokenizeSuccess`                                                |\n| `tokenizeSuccessStatus`   | `Boolean | Error`                            | `false`  | Status of `onTokenizeSuccess`                                                              |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype Transitions {\n  // a number of milliseconds or specify different durations for 'enter' and 'exit'\n  duration?: number | { enter: number, exit: number };\n  // Callbacks for when a view is transitioning in or out\n  onEntering?: (node: Node) => void;\n  onEntered?: (node: Node) => void;\n  onExiting?: (node: Node) => void;\n  onExited?: (node: Node) => void;\n};\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/checkout.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"de02eca0ed19cd7c622dd42284c4dd7351874859","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"rollup -c","stdver":"standard-version -m '[skip ci] chore(release): v%s'","prepare":"yarn build","release":"gren release --override"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.20.1","dependencies":{"deepmerge":"^4.2.2","@primer-io/checkout-web":"1.3.0-beta.20"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^26.6.3","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^2.38.0","ts-jest":"^26.4.4","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","vue-jest":"^3.0.7","stylelint":"^9.10.0","babel-jest":"^26.6.3","typescript":"^4.1.3","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.2","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","@vue/compiler-sfc":"^3.0.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","vue-class-component":"^7.2.6","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.6.12","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-css-only":"^3.1.0","vue-property-decorator":"^9.1.2","@rollup/plugin-commonjs":"^17.0.0","rollup-plugin-typescript2":"^0.29.0","stylelint-config-standard":"^18.2.0","@rollup/plugin-node-resolve":"^11.1.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.3.0-beta.7_1612955792353_0.48139358349993056","host":"s3://npm-registry-packages"}},"1.3.0-beta.8":{"name":"@primer-io/checkout-vue","version":"1.3.0-beta.8","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.3.0-beta.8","maintainers":[{"name":"primer-developers","email":"developers@primerapi.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"}],"dist":{"shasum":"6e4e06707760af397cd443c75b40ae696db2cc45","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.3.0-beta.8.tgz","fileCount":17,"integrity":"sha512-vGMYus8/u29nQk9cyz+qXnuha6eSRktkCLyrptgwMd/GYuwJl/W54IMXj8dvFBZyFtRBk2JEj3BnL22uwFPAeA==","signatures":[{"sig":"MEUCIQDEmK5xz8JT5Q+ML8FBXa1XBkr62yeztv/ZDIR7gnTAxgIgGeuQBmcW6L8IzqtjkvQ0tzUzPyoBWRNkr9YqMRAMYg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1706969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNU/aCRA9TVsSAnZWagAAXqYP/0/zJ/FFzWSvRMBGs/G1\nBUCAvL/FySyH1Fsi98L+7ahZefpZeU4dfupSsF3kPCom8arzTcUcYC/rj4Hq\nGqYiMq6X3qT27ct7RIZ7a5CDRDfF18omZw7qihxahsNO51U5A+ZPcwz5jum8\n0gaFsuSHb87Be+8Z0Gd6O190sYChM1SvI0VGcxBXfuiqeca1QSvglO8jjwuF\njVAc72YkJ8sgfxituALJU4qLZKfS260NOUKTFvUZQM3P4FkFAaiCVFCHErI5\nQQollOVajR4zHWengJtOLJcaz3AIErOsVHuFXGZGTmOH2eat3gH7lgaQO6hv\nkzzqSWBeHN6JeKoBS+Ft8cEeSfkViTBex+nJ2zT22ex80Kq7Pu6cL2dCGuOT\n7Q9Yptv504AKIb3RnvjY906tQW5Zhs8J0rm+qTiKEzcLJX2wgrl1aL/QKEGy\nZqhuG49feU/kQEJ3vXK84ayAzd2OAfYxPPVTRakrVNXsNng9h6OSkXY9CtYA\nPzGriLrKkS+6fY+v1gNyWjKFuI0fV1lrXclqld/KQoGP1PC1xGjrzIBV7s3X\naM6IgXWpwEkdm4ww08lOGI48axhfzqd55ZGnJVe97J0eeEE9S2edXQKrOJ/b\nSH0QwcToAvqudSR2WNOw2XdkqRM/rxnp1+kTKolVbZh4X7JE74wQ/BmHCA3N\ncCaU\r\n=j+2W\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"types":"dist/index.d.ts","module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\nThis wrapper is based on [`@primer-io/checkout-web@1.5.0-beta.3`](https://www.npmjs.com/package/@primer-io/checkout-web/v/1.5.0-beta.3).\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's [Universal Checkout](https://primer.io/docs/guides/checkout/#universal-checkout) using the configuration provided as props.\n\n## Installation\n\nWith npm:\n\n```\nnpm i -s @primer-io/checkout-vue\n```\n\nWith yarn:\n\n```\nyarn add @primer-io/checkout-vue\n```\n\n## Example\n\n### Display all payment methods\n\n```vue\n<template>\n  <div>\n    <PrimerCheckout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerCheckout} from '@primer-io/checkout-vue'\nimport '@primer-io/checkout-vue/dist/Checkout.css'\n\nexport default {\n  name: 'App',\n  components: {PrimerCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n### Display a single payment method\n\nThis only works for GoCardless\n\n```vue\n<template>\n  <div>\n    <PrimerSinglePaymentMethodCheckout\n      v-if=\"clientToken\"\n      paymentMethod=\"GOCARDLESS\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerSinglePaymentMethodCheckout} from '@primer-io/checkout-vue'\nimport '@primer-io/checkout-vue/dist/Checkout.css'\n\nexport default {\n  name: 'App',\n  components: {PrimerSinglePaymentMethodCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the token data. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is `true`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next()` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess(error?)`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(error?)` with `error` being `undefined` to resolve the Promise, or with `error` being of type `Error` to reject the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n# API Reference\n\n## Props\n\n| Props                     | Type                                         | Required | Description                                                                                |\n| ------------------------- | -------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                                     | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                                     | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                                     | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                                     | `false`  |                                                                                            |\n| `countryCode`             | `String`                                     | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`                               | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions`                  | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                                       | `false`  |                                                                                            |\n| `paypal`                  | `Object`                                     | `false`  |                                                                                            |\n| `googlePay`               | `Object`                                     | `false`  |                                                                                            |\n| `applePay`                | `Object`                                     | `false`  |                                                                                            |\n| `directDebit`             | `Object`                                     | `false`  |                                                                                            |\n| `submitButton`            | `Object`                                     | `false`  |                                                                                            |\n| `checkoutStyle`           | `Object`                                     | `false`  | The style of the checkout                                                                  |\n| `options`                 | `Object`                                     | `false`  | You can set multiple props at once using this object.                                      |\n| `tokenizeSuccess`         | `(token: PaymentMethodToken): Promise<void>` | `false`  | Function props used for `onTokenizeSuccess`                                                |\n| `tokenizeSuccessStatus`   | `Boolean | Error`                            | `false`  | Status of `onTokenizeSuccess`                                                              |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype Transitions {\n  // a number of milliseconds or specify different durations for 'enter' and 'exit'\n  duration?: number | { enter: number, exit: number };\n  // Callbacks for when a view is transitioning in or out\n  onEntering?: (node: Node) => void;\n  onEntered?: (node: Node) => void;\n  onExiting?: (node: Node) => void;\n  onExited?: (node: Node) => void;\n};\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/checkout.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"8aa82b95e23df54e223694bedc59c1293da78bff","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"rollup -c","stdver":"standard-version -m '[skip ci] chore(release): v%s'","prepare":"yarn build","release":"gren release --override"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.20.2","dependencies":{"deepmerge":"^4.2.2","@primer-io/checkout-web":"1.5.0-beta.3"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^26.6.3","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^2.38.0","ts-jest":"^26.4.4","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","vue-jest":"^3.0.7","stylelint":"^9.10.0","babel-jest":"^26.6.3","typescript":"^4.1.3","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.2","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","@vue/compiler-sfc":"^3.0.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","vue-class-component":"^7.2.6","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.6.12","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-css-only":"^3.1.0","vue-property-decorator":"^9.1.2","@rollup/plugin-commonjs":"^17.0.0","rollup-plugin-typescript2":"^0.29.0","stylelint-config-standard":"^18.2.0","@rollup/plugin-node-resolve":"^11.1.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.3.0-beta.8_1614106586114_0.43143258794445183","host":"s3://npm-registry-packages"}},"1.3.0-beta.9":{"name":"@primer-io/checkout-vue","version":"1.3.0-beta.9","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.3.0-beta.9","maintainers":[{"name":"takecare","email":"ruiteixeira23@gmail.com"},{"name":"primer-developers","email":"developers@primerapi.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"}],"dist":{"shasum":"841579ffa4fc6a8e2b4e902cc4ea8a2de3129a3b","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.3.0-beta.9.tgz","fileCount":17,"integrity":"sha512-eRqhb6aL4nMqd253akn5CLV7YzK0NyQqgBNxjAVd+jUA2U/brSqozxjwPdKK0TtoZsTtd0+2ggNnr9JhynhIuw==","signatures":[{"sig":"MEYCIQDEVZbl7iRIt+ObcAvF+VXsvA99Psj/tb9fUUvKA9e35gIhAKlfo3zcgI5nIC3r1gBJHIarbLw2EBvC+ocOKpcRkxkj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1765974,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYvhuCRA9TVsSAnZWagAASDUP/12FMv7a1rfuGJVxn1Ou\nv/55NAg0bCDp9Yadq/jeMDxmRAmQHpN9f3em8M9ilbHZsq+HLaPxXj5GG+Rl\n0YpQaV+HnSR7K/RU1BIHtoDP4nFiG35Rw9CWac0vBgCtC2LNkQC7f3MIKsML\n0dBKrtkvvy5m1z6GulTsk0YisIJINil9ajyuDsNTsvG02Z3nnJaqJ++GJXSN\nnJSbdOXUBkgv8arcfgE867fBoY8cz+PmLfyh6maTvbDopFvutelas01kJe17\nbQEMxVSULYQ1Q0UlvbJTATI50uy++rg8lwMPl+uLUwYv40uRPguWVCUxZ6JV\nnmytnqHUjTLC7z4KfKNfCaRern5LzIkQCNXX2UakNl2NRLdqqteGOdPpzENp\nR9iBekPBvOXQKDHjnKcBjc45rz9lzN3kYUqYylqTqmp6layww9Swa+RBaxFd\nSq68nrviLFLVuHLv9eG5383n6/eCHLf9ozIw2V7qmCx/bYiVog9PgR9heGtt\n4stAquOjTtrwiarw6mf64FlNVZ4mGMSpvT8JYnohcyUBoupxqT49HfgYO/wg\nsWpYuOtt219VCYzsIXqefJ9V85zmo1pBaMhOGQb6o3JLROaT7GWugWLJY8yE\n56So4R8EGbw9mipNUQCy53UAaOXRN1C+M6Ai7ap3csaUAkRKHDDTVjbbx0HQ\n6pg3\r\n=8n8k\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"types":"dist/index.d.ts","module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\nThis wrapper is based on [`@primer-io/checkout-web@1.6.0`](https://www.npmjs.com/package/@primer-io/checkout-web/v/1.6.0).\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's [Universal Checkout](https://primer.io/docs/guides/checkout/#universal-checkout) using the configuration provided as props.\n\n## Installation\n\nWith npm:\n\n```\nnpm i -s @primer-io/checkout-vue\n```\n\nWith yarn:\n\n```\nyarn add @primer-io/checkout-vue\n```\n\n## Example\n\n### Display all payment methods\n\n```vue\n<template>\n  <div>\n    <PrimerCheckout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerCheckout} from '@primer-io/checkout-vue'\nimport '@primer-io/checkout-vue/dist/Checkout.css'\n\nexport default {\n  name: 'App',\n  components: {PrimerCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n### Display a single payment method\n\nThis only works for GoCardless\n\n```vue\n<template>\n  <div>\n    <PrimerSinglePaymentMethodCheckout\n      v-if=\"clientToken\"\n      paymentMethod=\"GOCARDLESS\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerSinglePaymentMethodCheckout} from '@primer-io/checkout-vue'\nimport '@primer-io/checkout-vue/dist/Checkout.css'\n\nexport default {\n  name: 'App',\n  components: {PrimerSinglePaymentMethodCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the token data. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is `true`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next()` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess(error?)`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(error?)` with `error` being `undefined` to resolve the Promise, or with `error` being of type `Error` to reject the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n# API Reference\n\n## Props\n\n| Props                     | Type                        | Required | Description                                                                                |\n| ------------------------- | --------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                    | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                    | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                    | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                    | `false`  |                                                                                            |\n| `countryCode`             | `String`                    | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`              | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions` | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                      | `false`  |                                                                                            |\n| `paypal`                  | `Object`                    | `false`  |                                                                                            |\n| `googlePay`               | `Object`                    | `false`  |                                                                                            |\n| `applePay`                | `Object`                    | `false`  |                                                                                            |\n| `directDebit`             | `Object`                    | `false`  |                                                                                            |\n| `submitButton`            | `Object`                    | `false`  |                                                                                            |\n| `successScreen`           | `Object`                    | `false`  |                                                                                            |\n\n| `checkoutStyle` | `Object` | `false` | The style of the checkout |\n| `options` | `Object` | `false` | You can set multiple props at once using this object. |\n| `tokenizeSuccess` | `(token: PaymentMethodToken): Promise<void>` | `false` | Function props used for `onTokenizeSuccess` |\n| `tokenizeSuccessStatus` | `Boolean | Error` | `false` | Status of `onTokenizeSuccess` |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype Transitions {\n  // a number of milliseconds or specify different durations for 'enter' and 'exit'\n  duration?: number | { enter: number, exit: number };\n  // Callbacks for when a view is transitioning in or out\n  onEntering?: (node: Node) => void;\n  onEntered?: (node: Node) => void;\n  onExiting?: (node: Node) => void;\n  onExited?: (node: Node) => void;\n};\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/checkout.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"cf8a056a14fa11c848a63c93aedac43409ca7d23","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"rollup -c","stdver":"standard-version -m '[skip ci] chore(release): v%s'","prepare":"yarn build","release":"gren release --override"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.21.0","dependencies":{"deepmerge":"^4.2.2","@primer-io/checkout-web":"1.6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^26.6.3","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^2.38.0","ts-jest":"^26.4.4","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","vue-jest":"^3.0.7","stylelint":"^9.10.0","babel-jest":"^26.6.3","typescript":"^4.1.3","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.2","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","@vue/compiler-sfc":"^3.0.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","vue-class-component":"^7.2.6","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.6.12","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-css-only":"^3.1.0","vue-property-decorator":"^9.1.2","@rollup/plugin-commonjs":"^17.0.0","rollup-plugin-typescript2":"^0.29.0","stylelint-config-standard":"^18.2.0","@rollup/plugin-node-resolve":"^11.1.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.3.0-beta.9_1617098862310_0.8000138209541889","host":"s3://npm-registry-packages"}},"1.3.0-beta.10":{"name":"@primer-io/checkout-vue","version":"1.3.0-beta.10","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.3.0-beta.10","maintainers":[{"name":"takecare","email":"ruiteixeira23@gmail.com"},{"name":"primer-developers","email":"developers@primerapi.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"}],"dist":{"shasum":"7565e5eb1918b5baa54bcd9bef861b403512c1a2","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.3.0-beta.10.tgz","fileCount":20,"integrity":"sha512-mZY0vos5d9Pb5J+Q7B6gR4edi7TFNmmwYmjew/Us0ntrnEPxpNW2ACKj2rRJ7QlnNc4UG82/7FoKNU52NVqBSw==","signatures":[{"sig":"MEYCIQDHXRnkhltqLYf9HJxh6Th04EjPxx8DtozpTIlUvJp/IAIhAPTFCRw4tuiicRnNmMJ9wY3FsTESSEo4g8v2m2w2UX4h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1812997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdyZqCRA9TVsSAnZWagAA5DwP/imkiJsxUYTPbotg4lsd\nwduqtA14qBfpFakt28g+F9kKsYhpDAGuCi4RGzq0OVFBzjsHKIVqVrOmj8AN\nqWD/HnD1OUFeV3k4jejfYYTvkj+CL6k4MvWgKapWHOJEk44bf9xKJHsRqe7E\nF1CjXBkFCFjfqf2F81TvRjqscKUbpEklQM5BB1vRzOEiw7/aX2b18QCJnnpL\ndSJB1uJLm/4ktBobcDXjoZQQq5eX731FbODhCXAQo0WaCcAuqVbgKXaZ4Xih\nt0JTL73/Jyy74qminPwJMmjpIFVvFELbmilogNK6lpi78I61pPOeJwQ6y3Km\nikCn9bUO3AxHPAIX8GvhOhXbo71QkjPtJNPtpCT6GavOYp0O2NH2S+XI+7OH\nw8Chlki8jYaKH3sE/LLcRxzzRfr5lxCjj5UXroTdE1/QBTD4nIyz3dUF22A/\nhix4dTqeWRatmXMTjcxbIbB1i6CXGYAMmbN5ct7EXd6KDzCqjfhRx5I4ufQE\neBKhLDRVUa9Zncl6FnlEvA0gnA7RcHWCMn89AiS8MqsV28whQPXlSoUU+Vyk\n2E1S9GQp6TWVym8dEu/InyA7WU7rThhJMO5MZglttYuoetGPUDwn+0Qj3Pdy\nhvKG4bsOpONz7N7jJGsSoKDihuJV3tfO9OaPbnbIcfnWlYidQLyd+JBjH3KK\n+rGB\r\n=AAx+\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"types":"dist/index.d.ts","module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\nThis wrapper is based on [`@primer-io/checkout-web@1.6.0`](https://www.npmjs.com/package/@primer-io/checkout-web/v/1.6.0).\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's [Universal Checkout](https://primer.io/docs/guides/checkout/#universal-checkout) using the configuration provided as props.\n\n## Installation\n\nWith npm:\n\n```\nnpm i -s @primer-io/checkout-vue\n```\n\nWith yarn:\n\n```\nyarn add @primer-io/checkout-vue\n```\n\n## Example\n\n### Display all payment methods\n\n```vue\n<template>\n  <div>\n    <PrimerCheckout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerCheckout} from '@primer-io/checkout-vue'\nimport '@primer-io/checkout-vue/dist/Checkout.css'\n\nexport default {\n  name: 'App',\n  components: {PrimerCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n### Display a single payment method\n\nThis only works for GoCardless\n\n```vue\n<template>\n  <div>\n    <PrimerSinglePaymentMethodCheckout\n      v-if=\"clientToken\"\n      paymentMethod=\"GOCARDLESS\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerSinglePaymentMethodCheckout} from '@primer-io/checkout-vue'\nimport '@primer-io/checkout-vue/dist/Checkout.css'\n\nexport default {\n  name: 'App',\n  components: {PrimerSinglePaymentMethodCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the payment method token. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, resolve it with a new client token to trigger a new step, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is not an `Error`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next(data)` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess()`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(data?)` with `data` being an `Error` to reject a Promise, or any other value to resolve it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n## Handle Resume\n\nIf you pass a new client token during the tokenization process, a new step will be triggered. Once the resume step has been successfully achieved, the `onResumeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the resume token. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, resolve it with a new client token to trigger a new step, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@resume-success` and use the props `resume-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `resume-success`, and pass `resume-success-status` props to trigger a resolution (if `resume-success-status` is not an `Error`) or rejection (if `resume-success-status` is an `Error`) of the Promise.\n\n### Listen to `@resume-success` and use its `next` argument\n\nListen to the event `resume-success`. It will be called with the token data, and a callback function `next`. Call `next(data)` to resolve the Promise, or `next(error)` to reject it.\n\n### Pass `onResumeSuccess` as a props\n\nYou can directly pass `onResumeSuccess` as a function props.\n\n### Call `Checkout.resolveOnResumeSuccess()`\n\nThis Vue wrapper also provide an imperative way of resolving the `onResumeSuccess` Promise. Call `resolveOnResumeSuccess(data?)` with `data` being an `Error` to reject a Promise, or any other value to resolve it.\n\n# API Reference\n\n## Props\n\n| Props                     | Type                                                              | Required | Description                                                                                |\n| ------------------------- | ----------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                                                          | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                                                          | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                                                          | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                                                          | `false`  |                                                                                            |\n| `countryCode`             | `String`                                                          | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`                                                    | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions`                                       | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                                                            | `false`  |                                                                                            |\n| `paypal`                  | `Object`                                                          | `false`  |                                                                                            |\n| `googlePay`               | `Object`                                                          | `false`  |                                                                                            |\n| `applePay`                | `Object`                                                          | `false`  |                                                                                            |\n| `directDebit`             | `Object`                                                          | `false`  |                                                                                            |\n| `submitButton`            | `Object`                                                          | `false`  |                                                                                            |\n| `successScreen`           | `Object`                                                          | `false`  |                                                                                            |\n| `checkoutStyle`           | `Object`                                                          | `false`  | The style of the checkout                                                                  |\n| `options`                 | `Object`                                                          | `false`  | You can set multiple props at once using this object.                                      |\n| `tokenizeSuccess`         | `(token: PaymentMethodToken): Promise<SuccessCallbackReturnType>` | `false`  | Function props used for `onTokenizeSuccess`                                                |\n| `tokenizeSuccessStatus`   | `Error \\| SuccessCallbackReturnType`                              | `false`  | Status of `onTokenizeSuccess`                                                              |\n| `resumeSuccess`           | `(token: PaymentMethodToken): Promise<SuccessCallbackReturnType>` | `false`  | Function props used for `onResumeSuccess`                                                  |\n| `resumeSuccessStatus`     | `Error \\| SuccessCallbackReturnType`                              | `false`  | Status of `onResumeSuccess`                                                                |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n| `resume-success`                 | `resumeToken: ResumeToken, next: Function`      | Forwarded from `onResumeToken`. Use `next` to resolve or reject the Promise.                                                                                                                                                  |\n| `resume-error`                   | `error: PrimerClientError`                      | Emitted when resume fails. See the error message for more information                                                                                                                                                         |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n| `isWaitingForOnResumeSuccess(): Boolean`   | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onResumeSuccess`   |\n| `resolveOnResumeSuccess(error: Error?)`    | Resolve or reject the Promise of `onResumeSuccess`.                                                         |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/checkout.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"3482f42e314afadf1d063dfd0d92ef78f01c0e11","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"rollup -c","stdver":"standard-version -m '[skip ci] chore(release): v%s'","prepare":"yarn build","release":"gren release --override"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.22.1","dependencies":{"deepmerge":"^4.2.2","@primer-io/checkout-web":"^1.6.2-beta.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^26.6.3","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^2.38.0","ts-jest":"^26.4.4","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","vue-jest":"^3.0.7","stylelint":"^9.10.0","babel-jest":"^26.6.3","typescript":"^4.1.3","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.2","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","@vue/compiler-sfc":"^3.0.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","vue-class-component":"^7.2.6","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.6.12","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-css-only":"^3.1.0","vue-property-decorator":"^9.1.2","@rollup/plugin-commonjs":"^17.0.0","rollup-plugin-typescript2":"^0.29.0","stylelint-config-standard":"^18.2.0","@rollup/plugin-node-resolve":"^11.1.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.3.0-beta.10_1618421354120_0.7405489749580947","host":"s3://npm-registry-packages"}},"1.3.0-beta.11":{"name":"@primer-io/checkout-vue","version":"1.3.0-beta.11","keywords":["vue","primer","checkout","payment"],"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","_id":"@primer-io/checkout-vue@1.3.0-beta.11","maintainers":[{"name":"takecare","email":"ruiteixeira23@gmail.com"},{"name":"primer-developers","email":"developers@primerapi.com"},{"name":"stickycube","email":"will.jk01@gmail.com"},{"name":"aladin.taleb","email":"aladin.taleb@gmail.com"}],"dist":{"shasum":"25459a0101d1f48ed27040c8941c8f2d97f695d8","tarball":"https://registry.npmjs.org/@primer-io/checkout-vue/-/checkout-vue-1.3.0-beta.11.tgz","fileCount":20,"integrity":"sha512-t6D5HPUVI/DtMz8ETKm9nIGI+EwQfwQqo5hBe+uIaw0CmA1+tedwun6oEYpiBpn/uLcHEboCBt+5sb2+Rq+MWg==","signatures":[{"sig":"MEQCIFYU4xPM3d16vGqSFwntcIqdhK6fz75LE6Pio/TBHD7iAiAW8cYIvcd4ikLijpBESXflO2SCwnIqfLgolBmKxph2yA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":1813011,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeBzECRA9TVsSAnZWagAA4vQP/2DG2WCmtET/dfpHZbq5\nK1DFcwGA6snbH1Ak2R8IL7ueZCJQVj4JSC1W4Ugmu1nJK7sx5/5Chfrm9VIr\nqC4OZO3pg29c3YV9Ht3z4WOsYQkhFEKbvRjDK6lrUd9b3CYWjZpRNRNeyfyw\nYgJh3yvnKPqFBJzuwqne/UMnWIWMfk4Un+KaQl3k9hUa8M/bypC207fOltCB\n9bTSGcqLV4lKNlBYEZypCQOkBh35ip9rYax2ytD7BSVJwL08d7jYsfXSLZiO\nt23OAKBewJuiOm8MSrfg0q0/0dnlWBb7U6bj7qR7qLs8yuJDK9QLsfjKF3JH\nif8lNsbuc/wTBzS1/DupBCPs+33DbkqOZCk/gm2KjBfkig7krsHpqc8JgiTq\n7bSLwfjcNk80hos57ROaKf7RRA0N1QyoQi+RGi7IIxp7PDKsvfFOSC9WlItr\n6hPZzoiJd5H71s9+EotLgYaWwZqrLxRlF/dLbpp0ApvSHZAMcs8Mb3INEK16\nq8FWIL1sZDw7BPeuRzBtlAj18ZeOBY3ZddOryPTe6JM60qSANi6LUEoOX2kz\nQjt+KlQV0RpLfzOgmPIxsaF1FeM0UvQtsaWcNflMVeXBl1KcD+wCah52+eXK\nDvuBuX9efkGXWk0TBmrvJUqc7kVQh6Zi7VYjuRuo/ScFJkPh0MfHfRNUoS3o\nA8/i\r\n=dnJW\r\n-----END PGP SIGNATURE-----\r\n"},"gren":"@femessage/grenrc","main":"dist/primer-sdk-vue.umd.js","husky":{"hooks":{}},"types":"dist/index.d.ts","module":"dist/primer-sdk-vue.esm.js","readme":"# `@primer-io/checkout-vue`\n\nUsing the [Primer](https://primer.io) SDK for Vue 2.x, you can quickly and easily create a checkout page for your site to securely collect card information and offer a multitude of alternative payment methods to your customers through one simple integration.\n\nThis wrapper is based on [`@primer-io/checkout-web@1.6.2-beta.1`](https://www.npmjs.com/package/@primer-io/checkout-web/v/1.6.2-beta.1).\n\n# Get Started!\n\nCheck out our guides on how to get started with Primer [here](https://primer.io/docs/guides/quick-start-guide).\n\nThis Vue wrapper renders Primer's [Universal Checkout](https://primer.io/docs/guides/checkout/#universal-checkout) using the configuration provided as props.\n\n## Installation\n\nWith npm:\n\n```\nnpm i -s @primer-io/checkout-vue\n```\n\nWith yarn:\n\n```\nyarn add @primer-io/checkout-vue\n```\n\n## Example\n\n### Display all payment methods\n\n```vue\n<template>\n  <div>\n    <PrimerCheckout\n      v-if=\"clientToken\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerCheckout} from '@primer-io/checkout-vue'\nimport '@primer-io/checkout-vue/dist/Checkout.css'\n\nexport default {\n  name: 'App',\n  components: {PrimerCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n### Display a single payment method\n\nThis only works for GoCardless\n\n```vue\n<template>\n  <div>\n    <PrimerSinglePaymentMethodCheckout\n      v-if=\"clientToken\"\n      paymentMethod=\"GOCARDLESS\"\n      :client-token=\"clientToken\"\n      :tokenize-success-status=\"tokenizeSuccessStatus\"\n      @tokenize-success=\"onTokenizeSuccess\"\n    />\n  </div>\n</template>\n\n<script>\nimport {PrimerSinglePaymentMethodCheckout} from '@primer-io/checkout-vue'\nimport '@primer-io/checkout-vue/dist/Checkout.css'\n\nexport default {\n  name: 'App',\n  components: {PrimerSinglePaymentMethodCheckout},\n  data() {\n    return {\n      clientToken: 'abcd-1234',\n      tokenizeSuccessStatus: null\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      this.tokenizeSuccessStatus = null\n      try {\n        await doSale(tokenData) // Call your server with the token to trigger the sale\n      } catch (error) {\n        this.tokenizeSuccessStatus = error // Display an error message\n        return\n      }\n      this.tokenizeSuccessStatus = true // Finish the payment flow: you can now display a success message\n    }\n  }\n}\n</script>\n```\n\n## Handle tokenization\n\nOnce the payment method tokenization has been successfully achieved, the `onTokenizeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the payment method token. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, resolve it with a new client token to trigger a new step, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@tokenize-success` and use the props `tokenize-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `tokenize-success`, and pass `tokenize-success-status` props to trigger a resolution (if `tokenize-success-status` is not an `Error`) or rejection (if `tokenize-success-status` is an `Error`) of the Promise.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success-status=\"tokenizeSuccessStatus\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  computed: {\n    tokenizeSuccessStatus() {\n      return this.$store.state.tokenizeSuccessStatus;\n    }\n  },\n\n  methods: {\n    onTokenizeSuccess(tokenData) {\n      this.$store.dispatch('doSale', tokenData);\n    },\n  }\n}\n</script>\n```\n\n### Listen to `@tokenize-success` and use its `next` argument\n\nListen to the event `tokenize-success`. It will be called with the token data, and a callback function `next`. Call `next(data)` to resolve the Promise, or `next(error)` to reject it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData, next) {\n      try {\n        await doSale(tokenData); // Call your server with the token\n      } catch (e) {\n        return next(e);\n      }\n      return next();\n    },\n  }\n}\n</script>\n```\n\n### Pass `onTokenizeSuccess` as a props\n\nYou can directly pass `onTokenizeSuccess` as a function props.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        :client-token=\"clientToken\"\n        :tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      await doSale(tokenData); // Call your server with the token\n    },\n  }\n}\n</script>\n```\n\n### Call `Checkout.resolveOnTokenizeSuccess()`\n\nThis Vue wrapper also provide an imperative way of resolving the `onTokenizeSuccess` Promise. Call `resolveOnTokenizeSuccess(data?)` with `data` being an `Error` to reject a Promise, or any other value to resolve it.\n\n```vue\n<template>\n  <div class=\"app\">\n    <div class=\"checkout\">\n      <primer-checkout\n        ref=\"checkout\"\n        :client-token=\"clientToken\"\n        @tokenize-success=\"onTokenizeSuccess\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'App',\n  data() {\n    return {\n      clientToken: 'abcd-1234,\n    }\n  },\n\n  methods: {\n    async onTokenizeSuccess(tokenData) {\n      try {\n        await doSale(tokenData);\n      } catch (e) {\n        return this.$refs.checkout.resolveOnTokenizeSuccess(e);\n      }\n\n      return this.$refs.checkout.resolveOnTokenizeSuccess();\n    },\n  }\n}\n</script>\n```\n\n## Handle Resume\n\nIf you pass a new client token during the tokenization process, a new step will be triggered. Once the resume step has been successfully achieved, the `onResumeSuccess` callback of the Universal Checkout is called. This function is expected to return a Promise to let you call your server with the resume token. During this time, the Universal Checkout displays a loading indicator: resolve the Promise to stop the loading indicator, resolve it with a new client token to trigger a new step, or reject it to show an error message.\n\nThis Vue wrapper let you resolve/reject the Promise using one of the following 4 different methods. Some of them are considered \"anti-pattern\" with Vue, but we are not here to judge what's a pattern or what is not, so choose the one that best fits your needs and architecture.\n\n### Listen to `@resume-success` and use the props `resume-success-status`\n\nThis is the most Vue-like pattern, but also the most verbose. Use this pattern if you handle your API calls using an external state management system such as Vuex.\n\nListen to the event `resume-success`, and pass `resume-success-status` props to trigger a resolution (if `resume-success-status` is not an `Error`) or rejection (if `resume-success-status` is an `Error`) of the Promise.\n\n### Listen to `@resume-success` and use its `next` argument\n\nListen to the event `resume-success`. It will be called with the token data, and a callback function `next`. Call `next(data)` to resolve the Promise, or `next(error)` to reject it.\n\n### Pass `onResumeSuccess` as a props\n\nYou can directly pass `onResumeSuccess` as a function props.\n\n### Call `Checkout.resolveOnResumeSuccess()`\n\nThis Vue wrapper also provide an imperative way of resolving the `onResumeSuccess` Promise. Call `resolveOnResumeSuccess(data?)` with `data` being an `Error` to reject a Promise, or any other value to resolve it.\n\n# API Reference\n\n## Props\n\n| Props                     | Type                                                              | Required | Description                                                                                |\n| ------------------------- | ----------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------ |\n| `clientToken`             | `String`                                                          | `true`   | Client Your server-generated client token                                                  |\n| `thirdPartyScriptTimeout` | `Number`                                                          | `false`  | Maximum time in milliseconds to wait for third party scripts to load [default=10000]       |\n| `locale`                  | `String`                                                          | `false`  | Override the locale. By default translations will be provided for the browser's locale.    |\n| `customerId`              | `String`                                                          | `false`  |                                                                                            |\n| `countryCode`             | `String`                                                          | `false`  | Your alpha2 country code. [required for Google Pay, Apple Pay and PayPal]                  |\n| `purchaseInfo`            | `PurchaseInfo`                                                    | `false`  | Additional information about the purchase. [required for Google Pay, Apple Pay and PayPal] |\n| `threeDSecure`            | `ThreeDSecureVerifyOptions`                                       | `false`  | 3DS options. These must be provided if you want to perform SCA                             |\n| `card`                    | `Card`                                                            | `false`  |                                                                                            |\n| `paypal`                  | `Object`                                                          | `false`  |                                                                                            |\n| `googlePay`               | `Object`                                                          | `false`  |                                                                                            |\n| `applePay`                | `Object`                                                          | `false`  |                                                                                            |\n| `directDebit`             | `Object`                                                          | `false`  |                                                                                            |\n| `submitButton`            | `Object`                                                          | `false`  |                                                                                            |\n| `successScreen`           | `Object`                                                          | `false`  |                                                                                            |\n| `checkoutStyle`           | `Object`                                                          | `false`  | The style of the checkout                                                                  |\n| `options`                 | `Object`                                                          | `false`  | You can set multiple props at once using this object.                                      |\n| `tokenizeSuccess`         | `(token: PaymentMethodToken): Promise<SuccessCallbackReturnType>` | `false`  | Function props used for `onTokenizeSuccess`                                                |\n| `tokenizeSuccessStatus`   | `Error \\| SuccessCallbackReturnType`                              | `false`  | Status of `onTokenizeSuccess`                                                              |\n| `resumeSuccess`           | `(token: PaymentMethodToken): Promise<SuccessCallbackReturnType>` | `false`  | Function props used for `onResumeSuccess`                                                  |\n| `resumeSuccessStatus`     | `Error \\| SuccessCallbackReturnType`                              | `false`  | Status of `onResumeSuccess`                                                                |\n\n```typescript\ntype PurchaseInfo {\n  totalAmount: {\n    value: number | string\n    currency: string\n  }\n}\n```\n\n```typescript\ntype PaymentMethodToken {\n  // The token used to authorize transactions\n  token: string;\n  // The type of payment method which this token represents\n  paymentMethodType: 'PAYMENT_CARD' | 'GOOGLE_PAY' | 'APPLE_PAY' | 'PAYPAL';\n  // Additional data about the payment method\n  paymentMethodData: object;\n}\n```\n\n```TypeScript\ntype SubmitButton {\n  visible?: boolean; // Set to false if you don't want to display the default submit button\n}\n```\n\n## Event\n\n| Event                            | Arguments                                       | Description                                                                                                                                                                                                                   |\n| -------------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `loading`                        | `isLoading: Boolean`                            | Emitted with `true` while the checkout is being loaded, mounted and displayed. During this period, a loading indicator is displayed. Once the checkout is ready to be used, the `loading` event will be emitted with `false`. |\n| `loading-error`                  | `error: Error`                                  | Emitted when an error if the checkout failed to load.                                                                                                                                                                         |\n| `tokenize-start`                 |                                                 | Emitted when tokenization begins                                                                                                                                                                                              |\n| `tokenize-success`               | `tokenData: PaymentMethodToken, next: Function` | Forwarded from `onTokenizeSuccess`. Use `next` to resolve or reject the Promise.                                                                                                                                              |\n| `tokenize-error`                 | `message: string`                               | Emitted when tokenization fails. See the error message for more information                                                                                                                                                   |\n| `three-d-secure-challenge-start` |                                                 | Emitted when the 3DS challenge starts                                                                                                                                                                                         |\n| `three-d-secure-challenge-end`   |                                                 | Emitter when the 3DS challenge ends                                                                                                                                                                                           |\n| `resume-success`                 | `resumeToken: ResumeToken, next: Function`      | Forwarded from `onResumeToken`. Use `next` to resolve or reject the Promise.                                                                                                                                                  |\n| `resume-error`                   | `error: PrimerClientError`                      | Emitted when resume fails. See the error message for more information                                                                                                                                                         |\n\n## Methods\n\n| Method                                     | Description                                                                                                 |\n| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------- |\n| `isWaitingForOnTokenizeSuccess(): Boolean` | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onTokenizeSuccess` |\n| `resolveOnTokenizeSuccess(error: Error?)`  | Resolve or reject the Promise of `onTokenizeSuccess`.                                                       |\n| `isWaitingForOnResumeSuccess(): Boolean`   | Return `true` if the wrapper is waiting for a resolution or rejection of the Promise of `onResumeSuccess`   |\n| `resolveOnResumeSuccess(error: Error?)`    | Resolve or reject the Promise of `onResumeSuccess`.                                                         |\n\n## Data\n\n| Data       | Description                       |\n| ---------- | --------------------------------- |\n| `primer`   | Instance of the `Primer` object.  |\n| `checkout` | Instance of the `Checkout` object |\n","browser":{"./sfc":"src/checkout.vue"},"engines":{"npm":">= 3.0.0","node":">= 8.3.0"},"gitHead":"b08c8fdcd7262b5682f94d2254bd41fd825b604a","scripts":{"dev":"vue-styleguidist server","doc":"vue-styleguidist build","test":"jest --verbose","build":"rollup -c","stdver":"standard-version -m '[skip ci] chore(release): v%s'","prepare":"yarn build","release":"gren release --override"},"_npmUser":{"name":"primer-developers","email":"developers@primerapi.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"6.14.8","description":"Primer.js for Vue","directories":{},"lint-staged":{"*.js":["eslint --fix","prettier --write","git add"],"*.vue":["eslint --fix","prettier --write","stylelint --fix","git add"],"*.@(md|json)":["prettier --write","git add"]},"vue-sfc-cli":"1.12.0","_nodeVersion":"12.22.1","dependencies":{"deepmerge":"^4.2.2","@primer-io/checkout-web":"^1.6.2-beta.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vue":"^2.6.10","glob":"^7.1.3","jest":"^26.6.3","less":"^3.9.0","husky":"1.3.1","eslint":"^6.6.0","rollup":"^2.38.0","ts-jest":"^26.4.4","webpack":"^4.29.6","minimist":"^1.2.0","prettier":"1.18.2","vue-jest":"^3.0.7","stylelint":"^9.10.0","babel-jest":"^26.6.3","typescript":"^4.1.3","vue-loader":"^15.7.1","@babel/core":"^7.4.3","file-loader":"^3.0.1","less-loader":"^5.0.0","lint-staged":"^8.1.0","babel-eslint":"^10.0.3","babel-loader":"^8.0.5","@vue/test-utils":"^1.1.2","semantic-release":"^17.2.2","standard-version":"^6.0.1","vue-styleguidist":"^3.16.3","@babel/preset-env":"^7.4.3","@vue/compiler-sfc":"^3.0.5","eslint-plugin-vue":"^5.2.3","rollup-plugin-vue":"^6.0.0","eslint-plugin-jest":"^23.1.1","rollup-plugin-babel":"^4.3.2","vue-class-component":"^7.2.6","rollup-plugin-terser":"^4.0.4","vue-template-compiler":"^2.6.12","eslint-config-prettier":"^6.5.0","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^9.3.4","rollup-plugin-css-only":"^3.1.0","vue-property-decorator":"^9.1.2","@rollup/plugin-commonjs":"^17.0.0","rollup-plugin-typescript2":"^0.29.0","stylelint-config-standard":"^18.2.0","@rollup/plugin-node-resolve":"^11.1.0","@babel/plugin-transform-runtime":"^7.4.3","@femessage/github-release-notes":"latest","rollup-plugin-peer-deps-external":"^2.2.4"},"_npmOperationalInternal":{"tmp":"tmp/checkout-vue_1.3.0-beta.11_1618484420059_0.5760380179142106","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-11-13T13:37:08.745Z","modified":"2025-07-07T09:57:45.147Z","1.1.1-beta.8":"2020-11-13T13:37:09.147Z","1.2.0-beta.1":"2020-11-16T10:39:20.034Z","1.2.0":"2020-11-16T18:26:16.292Z","1.0.0-develop.1":"2020-11-16T18:53:32.389Z","1.2.1":"2020-11-17T08:13:57.553Z","1.0.0-beta.1":"2020-11-17T08:24:52.065Z","1.0.0-beta.2":"2020-11-17T08:41:44.710Z","1.2.2-beta.1":"2020-11-17T08:55:16.932Z","1.2.2":"2020-11-17T08:55:24.324Z","1.2.3-beta.1":"2021-01-28T08:09:56.173Z","1.2.3-beta.2":"2021-01-28T09:16:37.976Z","1.2.3-beta.3":"2021-01-28T09:34:36.169Z","1.3.0-beta.1":"2021-01-28T11:25:41.242Z","1.3.0-beta.2":"2021-01-28T11:41:09.540Z","1.3.0-beta.3":"2021-01-29T09:40:36.811Z","1.3.0-beta.4":"2021-01-29T14:04:56.141Z","1.3.0-beta.5":"2021-02-03T16:26:58.281Z","1.3.0-beta.6":"2021-02-10T10:48:57.539Z","1.3.0-beta.7":"2021-02-10T11:16:32.580Z","1.3.0-beta.8":"2021-02-23T18:56:26.358Z","1.3.0-beta.9":"2021-03-30T10:07:42.504Z","1.3.0-beta.10":"2021-04-14T17:29:14.425Z","1.3.0-beta.11":"2021-04-15T11:00:20.248Z"},"author":{"name":"Aladin Taleb","email":"aladin@primerapi.com"},"license":"MIT","keywords":["vue","primer","checkout","payment"],"description":"Primer.js for Vue","maintainers":[{"email":"developers@primerapi.com","name":"primer-developers"},{"email":"security-integrations@primer.io","name":"primer-security-integrations"},{"email":"mate@primer.io","name":"mate_primer"}],"readme":"","readmeFilename":""}