vue-money-button

An unofficial Vue.js component for the Money Button.

The official Money Button moneybutton.js script is only suitable for basic usage on static web pages. This library allows Money Button to be used in Vue.js projects and benefit from reactive properties.

Installation

npm install vue-money-button --save
Console

Usage

<template>
  <div>
    <MoneyButton
      to="74"
      amount="1"
      currency="USD"
      label="$1 Tip me"
      type="tip"
      @payment="handlePayment"
    />
  </div>
</template>

<script>
import MoneyButton from 'vue-money-button'

export default {
  components: {
    MoneyButton
  },

  methods: {
    handlePayment(payment) {
      // handle payment
    }
  }
}
</script>
Vue

Properties

The following properties can be set on the component:

Prop Type Required Default
to String :heavy_check_mark: null
amount String or Number :heavy_check_mark: null
currency String USD
label String :heavy_check_mark: null
hideAmount Boolean false
opReturn String null
outputs String (Stringified JSON) []
clientIdentifier String null
buttonId String null
buttonData String null
type String - buy or tip buy

Events

The component emits the following events:

Event
payment Triggered on a successful payment
error Triggered on a payment error

GitHub

An unofficial Vue.js component for MoneyButton.Read More

Latest commit to the master branch on 3-22-2022
Download as zip