{"id":17939406,"url":"https://github.com/libitx/vue-money-button","last_synced_at":"2025-03-24T10:32:08.523Z","repository":{"id":54891167,"uuid":"149026297","full_name":"libitx/vue-money-button","owner":"libitx","description":"An unofficial Vue.js component for MoneyButton.","archived":false,"fork":false,"pushed_at":"2022-03-22T10:30:42.000Z","size":492,"stargazers_count":21,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T16:06:15.149Z","etag":null,"topics":["bitcoin","bsv","money-button","vue","vue-component"],"latest_commit_sha":null,"homepage":"https://libitx.github.io/vue-money-button/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/libitx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-16T18:58:53.000Z","updated_at":"2023-11-28T00:58:15.000Z","dependencies_parsed_at":"2022-08-14T05:50:53.893Z","dependency_job_id":null,"html_url":"https://github.com/libitx/vue-money-button","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/libitx%2Fvue-money-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/libitx%2Fvue-money-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/libitx%2Fvue-money-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/libitx%2Fvue-money-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/libitx","download_url":"https://codeload.github.com/libitx/vue-money-button/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245252426,"owners_count":20585060,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bitcoin","bsv","money-button","vue","vue-component"],"created_at":"2024-10-29T00:07:11.335Z","updated_at":"2025-03-24T10:32:07.989Z","avatar_url":"https://github.com/libitx.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-money-button\n\n![vue-money-button](https://github.com/libitx/vue-money-button/raw/master/media/poster.png)\n\n![npm](https://img.shields.io/npm/v/vue-money-button?color=informational)\n![License](https://img.shields.io/github/license/libitx/vue-money-button?color=informational)\n\nA Vue.js component that lets you integrate [Money Button](https://www.moneybutton.com/)\ninto your app or web page. Developed independently, but closely mirrors the\nconventions established in the offical [React component](https://github.com/moneybutton/react-money-button).\n\n* [Demo](https://libitx.github.io/vue-money-button/)\n\n## Upgrading from a previous version?\n\n**🚨 Breaking change 🚨**\n\nSince version `1.0.0` the default export of the package is now a Vue **plugin**.\nWhen installed, the plugin does two things:\n\n* Adds the Money Button component to Vue globally\n* Attaches a `$getMoneyButton()` function to all your Vue instances. This async\nfunction returns the `moneyButton` object and provides access to the Invisible\nMoney Button API.\n\nPrior to version `1.0.0`, the default export was a Vue **component** for use\ndirectly in your own components. If you don't want to add the Money Button\ncomponent globally, and you don't need Invisible Money Button, you can still\nrequire the component as needed, using the named export. See examples below.\n\n## Installation\n\nInstall with npm or yarn:\n\n```sh\nyarn add vue-money-button\n```\n\nInstall the plugin in your Vue app's entrypoint:\n\n```javascript\nimport Vue from 'vue'\nimport VueMoneyButton from 'vue-money-button'\n\nVue.use(VueMoneyButton)\n```\n\nThe above step is recommended but optional. It adds the component to Vue globally,\nand also attaches `$getMoneyButton()` to all your Vue instances. Alternatively\nyou can skip the above step, and add Money Button to your components where\nrequired (although you don't get access to IMB this way).\n\n```vue\n\u003cscript\u003e\nimport { MoneyButton } from 'vue-money-button'\n\nexport default {\n  components: {\n    MoneyButton\n  }\n}\n\u003c/script\u003e\n```\n\n## Usage\n\nUsing the Money Button component:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cMoneyButton\n      to=\"YOUR BITCOIN ADDRESS\"\n      amount=\"0.5\"\n      currency=\"USD\"\n      label=\"Send some loot\"\n      @payment=\"handlePayment\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    handlePayment(payment) {\n      // handle payment\n    }\n  }\n}\n\u003c/script\u003e\n```\n\nUsing Invisible Money Button:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ca @click=\"likePost\"\u003eLike!\u003c/a\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: {\n    async likePost() {\n      const { IMB } = await this.$getMoneyButton()\n      const button = IMB(imgConfig)\n\n      button.swipe(likeParams)\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n## Properties\n\nThe following properties can be set on the component:\n\n| Prop          | Type                      | Default |\n|---------------|---------------------------|---------|\n| `to`          | `String` or `Number`      | `null`  |\n| `amount`      | `String` or `Number`      | `null`  |\n| `currency`    | `String`                  | `'USD'` |\n| `label`       | `String`                  | `null`  |\n| `successMessage` | `String`               | `null`  |\n| `opReturn`    | `String`                  | `null`  |\n| `outputs`     | `Array`                   | `[]`    |\n| `cryptoOperations` | `Array`              | `null`  |\n| `clientIdentifier` | `String`             | `null`  |\n| `buttonId`    | `String` or `Number`      | `null`  |\n| `buttonData`  | `String`                  | `null`  |\n| `type`        | `String` - `buy` or `tip` | `'buy'` |\n| `editable`    | `Boolean`                 | `false` |\n| `disabled`    | `Boolean`                 | `false` |\n| `devMode`     | `Boolean`                 | `false` |\n| `preserveOrder` | `Boolean`               | `false` |\n\nAn array of `outputs` can be set **instead of the `to`, `amount` and `currency` properties**.\nEach output object has the following parameters:\n\n| Name         | Type                      | Required           |\n|--------------|---------------------------|--------------------|\n| `to`         | `String`                  |                    |\n| `address`    | `String`                  |                    |\n| `userId`     | `String` or `Number`      |                    |\n| `script`     | `String`                  |                    |\n| `amount`     | `String`                  | :heavy_check_mark: |\n| `currency`   | `String`                  | :heavy_check_mark: |\n\n\n## Events\n\nThe component emits the following events:\n\n| Event     |                                   |\n|-----------|-----------------------------------|\n| `load`    | Triggered on load                 |\n| `payment` | Triggered on a successful payment |\n| `error`   | Triggered on a payment error      |\n| `cryptoOperations` | Callback returning the cryptoOperations object |\n\n## License\n\nvue-money-button is open source and released under the [Apache-2 License](https://github.com/libitx/vue-money-button/blob/master/LICENSE).\n\nCopyright (c) 2018-2021 libitx.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flibitx%2Fvue-money-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flibitx%2Fvue-money-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flibitx%2Fvue-money-button/lists"}