A Vue.js plugin for accepting Nano payments using Brainblocks
# npm
npm install --save raivue
# yarn
yarn add raivueimport Vue from 'vue'
import Raivue from 'raivue'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'raivue/dist/raivue.css'
Vue.use(Raivue)<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="raivue/dist/raivue.css"></link>
<script src="raivue/dist/raivue.js"></script>
<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/raivue/dist/raivue.css"></link>
<script src="https://unpkg.com/raivue"></script>The NanoPayment component is the most basic usage of BrainBlocks. It takes in 3 properties: address, amount (in rai/xrb, not XRB), a paymentCallback function, and a tokenCallback function.
<template>
<div>
<NanoPayment
:address="address"
:amount="amount"
:onSuccess="successCallback">
</NanoPayment>
</div>
</template>
<script>
export default {
name: 'RaivueTest',
data () {
return {
address: "xrb_3ui4sg4jjdxsfwshjcbkjnthdzmtbgxe7pa597cxsa4aamkkj3b8dmeome4i",
amount: 250000
}
}
methods: {
paymentCallback (data) {
console.log('Successful Payment!', data)
},
tokenCallback (data) {
console.log('Payment Started!', data)
}
}
}
</script>This is required to pull down the latest Brainblocks code.
npm run submodules:updatenpm run devnpm run dev:coverageBundle the js and css of to the dist folder:
npm run buildThe prepare hook will ensure dist files are created before publishing. This
way you don't need to commit them in your repository.
# Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 🚀
npm publishDonation Address: xrb_3ui4sg4jjdxsfwshjcbkjnthdzmtbgxe7pa597cxsa4aamkkj3b8dmeome4i
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent