Here is how to integrate your payment widget in RectJS / Vue JS


Install the Base Script


In public/index.html add the Blockonomics Payment Widget JS just before the end of <body> or just before the end of <head> to load the Blockonomics Payment Widget JS.


<script src="https://blockonomics.co/js/pay_widget.js"></script>


Example:

<html>
    <head>
    ....
    </head>
    <body>
        <div id="app_or_root"></div>
        ...

        <!-- Here's Blockonomics Payment Widget JS -->
        <script src="https://blockonomics.co/js/pay_widget.js"></script>
    </body>
</html>


Get Payment Widget UID


While Creating the Payment Widget, you receive a Widget UID which you should note and will be used in the next steps.



Use in your Component

React


Example Code:


Replace ENTER_UID_HERE with the Payment Widget UID from above.


import { useState } from 'react';

function App() {
  const [email, setEmail] = useState("");

  // This function calls the Blockonomics Payment Widget,
  // you can call it when you want to trigger Payment Widget
  function payWithBitcoin() {
      Blockonomics.widget({ 
          msg_area: 'bitcoinpay',
          uid: 'ENTER_UID_HERE',
          email: email
      })
  }

  function handleEmailInput(e) {
      setEmail(e.target.value)
  }

  return (
    <div className="App">
      <input type="email" id="email" placeholder="Email Address" onInput={handleEmailInput}/>
      <button id="pay" onClick={payWithBitcoin}>Pay with Bitcoin</button>
      <div id="bitcoinpay"></div>
    </div>
  );
}

export default App;


If you're using ESLint, you'll encounter compiler errors because Blockonomics is not defined, you can silence the warning by adding the following just above the line Blockonomics.widget({
// eslint-disable-next-line no-undef

Vue


Example Code:


Replace ENTER_UID_HERE with the Payment Widget UID from above.


<template>
  <div>
      <input type="email" id="email" placeholder="Email Address" v-model="email" />
      <button id="pay" @click.prevent="payWithBitcoin">Pay with Bitcoin</button>
      <div id="bitcoinpay"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        email: null
      }
    },
    methods: {
       // This function calls the Blockonomics Payment Widget,
      // you can call it when you want to trigger Payment Widget
      payWithBitcoin() {
        Blockonomics.widget({ 
          msg_area: 'bitcoinpay',
          uid: 'ENTER_UID_HERE',
          email: this.email
        })
      }
    }
  }
</script>


If you're using ESLint, you'll encounter compiler errors because Blockonomics is not defined, you can silence the warning by adding the following just above the line Blockonomics.widget({
// eslint-disable-next-line no-undef


That's all folks!


References