This project is a simple one for implementing WebMonetization based on Vue.js. For this reason, the
vue-web-monetization
library implements only the necessary minimum functionality.
cd example
yarn install
yarn serve
Supports meta tag based WebMonetization.
main.js
import VueWebMonetization from 'vuejs-web-monetization'
Vue.use(VueWebMonetization)
Using instance properties.
Get monetization status by $vueWebMonetizationStart
.
Get monetization progress by $vueWebMonetizationStart
.
$vueWebMonetizationStart: {
state: document.monetization && document.monetization.state,
paymentPointer: YOUR-PAYMENT-POINTER,
requestId: String
}
<h1>WebMonetization status: {{ $vueWebMonetizationStart.state }}</h1>
computed: {
isWebMonetization: function() {
return this.$vueWebMonetizationStart && this.$vueWebMonetizationStart.state === 'started' ? true : false
}
}
totalAmount
is the total payment.
$vueWebMonetizationProgress: {
assetCode: String,
assetScale: Number,
totalAmount: Number
}
<p>{{ $vueWebMonetizationProgress.totalAmount | filterCurrency }}</p>
const formattedTotalAmount = new Bignumber(this.$vueWebMonetizationProgress.totalAmount, 10).toFormat()
- Hide existing ads when WebMonetization is enabled
- Total amount of payment stored for each user in database etc, utilized for premium content
- Content that can be viewed only when WebMonetization is enabled (processing on the server side is necessary)
You can install VueWebMonetization on your Vue.js project using the npm library.
But, this library is very simple as I created it experimentally.
When using it with actual product, you should use this library by modifying it.
yarn add vuejs-web-monetization