Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/libitx/vue-money-button
An unofficial Vue.js component for MoneyButton.
https://github.com/libitx/vue-money-button
bitcoin bsv money-button vue vue-component
Last synced: 2 months ago
JSON representation
An unofficial Vue.js component for MoneyButton.
- Host: GitHub
- URL: https://github.com/libitx/vue-money-button
- Owner: libitx
- License: apache-2.0
- Created: 2018-09-16T18:58:53.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-03-22T10:30:42.000Z (almost 3 years ago)
- Last Synced: 2024-10-13T15:14:51.390Z (3 months ago)
- Topics: bitcoin, bsv, money-button, vue, vue-component
- Language: Vue
- Homepage: https://libitx.github.io/vue-money-button/
- Size: 480 KB
- Stars: 21
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-money-button
A Vue.js component that lets you integrate [Money Button](https://www.moneybutton.com/)
into your app or web page. Developed independently, but closely mirrors the
conventions established in the offical [React component](https://github.com/moneybutton/react-money-button).
* [Demo](https://libitx.github.io/vue-money-button/)
## Upgrading from a previous version?
**🚨 Breaking change 🚨**
Since version `1.0.0` the default export of the package is now a Vue **plugin**.
When installed, the plugin does two things:
* Adds the Money Button component to Vue globally
* Attaches a `$getMoneyButton()` function to all your Vue instances. This async
function returns the `moneyButton` object and provides access to the Invisible
Money Button API.
Prior to version `1.0.0`, the default export was a Vue **component** for use
directly in your own components. If you don't want to add the Money Button
component globally, and you don't need Invisible Money Button, you can still
require the component as needed, using the named export. See examples below.
## Installation
Install with npm or yarn:
```sh
yarn add vue-money-button
```
Install the plugin in your Vue app's entrypoint:
```javascript
import Vue from 'vue'
import VueMoneyButton from 'vue-money-button'
Vue.use(VueMoneyButton)
```
The above step is recommended but optional. It adds the component to Vue globally,
and also attaches `$getMoneyButton()` to all your Vue instances. Alternatively
you can skip the above step, and add Money Button to your components where
required (although you don't get access to IMB this way).
```vue
import { MoneyButton } from 'vue-money-button'
export default {
components: {
MoneyButton
}
}
```
## Usage
Using the Money Button component:
```vue
export default {
methods: {
handlePayment(payment) {
// handle payment
}
}
}
```
Using Invisible Money Button:
```vue
export default {
methods: {
async likePost() {
const { IMB } = await this.$getMoneyButton()
const button = IMB(imgConfig)
button.swipe(likeParams)
}
}
}
```
## Properties
The following properties can be set on the component:
| Prop | Type | Default |
|---------------|---------------------------|---------|
| `to` | `String` or `Number` | `null` |
| `amount` | `String` or `Number` | `null` |
| `currency` | `String` | `'USD'` |
| `label` | `String` | `null` |
| `successMessage` | `String` | `null` |
| `opReturn` | `String` | `null` |
| `outputs` | `Array` | `[]` |
| `cryptoOperations` | `Array` | `null` |
| `clientIdentifier` | `String` | `null` |
| `buttonId` | `String` or `Number` | `null` |
| `buttonData` | `String` | `null` |
| `type` | `String` - `buy` or `tip` | `'buy'` |
| `editable` | `Boolean` | `false` |
| `disabled` | `Boolean` | `false` |
| `devMode` | `Boolean` | `false` |
| `preserveOrder` | `Boolean` | `false` |
An array of `outputs` can be set **instead of the `to`, `amount` and `currency` properties**.
Each output object has the following parameters:
| Name | Type | Required |
|--------------|---------------------------|--------------------|
| `to` | `String` | |
| `address` | `String` | |
| `userId` | `String` or `Number` | |
| `script` | `String` | |
| `amount` | `String` | :heavy_check_mark: |
| `currency` | `String` | :heavy_check_mark: |
## Events
The component emits the following events:
| Event | |
|-----------|-----------------------------------|
| `load` | Triggered on load |
| `payment` | Triggered on a successful payment |
| `error` | Triggered on a payment error |
| `cryptoOperations` | Callback returning the cryptoOperations object |
## License
vue-money-button is open source and released under the [Apache-2 License](https://github.com/libitx/vue-money-button/blob/master/LICENSE).
Copyright (c) 2018-2021 libitx.