BrainBlocks Nano Component
Clone or download
joshporter1 Merge pull request #3 from brainblocks/package-upgrade
Upgraded node packages and switch brainblocks loading from using a submodule to npm package
Latest commit aed2617 Oct 11, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Switched from rollup to webpack for builds. Jan 20, 2018
dist Removed deprecated submodule method of importing Brainblocks. Switche… Oct 10, 2018
img Updated README.md to include RaiDonation Jan 24, 2018
src Removed deprecated submodule method of importing Brainblocks. Switche… Oct 10, 2018
test updated to the newest brainblocks version Jun 26, 2018
.babelrc Initial commit of plugin template. Jan 19, 2018
.editorconfig Initial commit of plugin template. Jan 19, 2018
.eslintignore Initial commit of plugin template. Jan 19, 2018
.eslintrc.js Initial commit of plugin template. Jan 19, 2018
.eslintrc.json Initial commit of plugin template. Jan 19, 2018
.gitignore Addded dist/ to repo. Jan 21, 2018
.gitmodules Initial commit of plugin template. Jan 19, 2018
.npmignore Initial commit of plugin template. Jan 19, 2018
.postcssrc.js Initial commit of plugin template. Jan 19, 2018
.stylelintignore Updated styles on RaiDonation Jan 26, 2018
.stylelintrc Initial commit of plugin template. Jan 19, 2018
CONTRIBUTING.md Initial commit of plugin template. Jan 19, 2018
LICENSE Bump version and update license to match Brainblocks Aug 7, 2018
README.md Fixed README.md to reflect new component and fixed formatting for lin… Jun 27, 2018
package-lock.json Removed deprecated submodule method of importing Brainblocks. Switche… Oct 10, 2018
package.json Removed deprecated submodule method of importing Brainblocks. Switche… Oct 10, 2018

README.md

Raivue

npm vue2

A Vue.js plugin for accepting Nano payments using Brainblocks

Installation

# npm
npm install --save raivue

# yarn
yarn add raivue

Usage

Bundler (Webpack, Rollup)

import 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)

Browser

<!-- 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>

Vue Component Usage

NanoPayment Component

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>

Development

Update Git Submodules

This is required to pull down the latest Brainblocks code.

npm run submodules:update

Launch visual tests

npm run dev

Launch Karma with coverage

npm run dev:coverage

Build

Bundle the js and css of to the dist folder:

npm run build

Publishing

The 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 publish

License

MIT

Support 💙💚

Donation Address: xrb_3ui4sg4jjdxsfwshjcbkjnthdzmtbgxe7pa597cxsa4aamkkj3b8dmeome4i