ArkPay with Vue & Bootstrap 4

Based on original vue example. I have converted it into a 'Base' component which handles the essential functionality and imported this into 3 separate example components with different templates and functionality on each.

  • Example 1 is basically the original example in bootstrap, with the same address & amount & still on devnet. I'm not sure why the timer facility is needed as it's not mentioned in the documentation so I've removed the alert & page reload for now.
  • Example 2 allows you to make a payment to any address on dev or mainnet. ATM you need to hit 'prepare' once you have configured it in order to set up the payment data, however this functionality could be incorporated into the pay now button. BUG: If you change the fiat amount and click 'Prepare' you can see that the Ark amount is calculated incorrectly. I believe this is a bug in Arkpay itself and have raised an issue on their github repo. FIXED - this issue was resolved on the Arkpay repo
  • Example 3 is just to demonstrate to anyone non technical that the address, amount etc doesn't need displaying at all for this to work, in fact it would be trivially easy for a developer/webmaster to display a different amount to that which is then passed to the Ark wallet, so it is very important to check any payments you make! It could use some nicer buttons but I'm not a designer. Currently set on mainnet, my address, $1 ;-)

The original blog article has instructions on getting some dev tokens if you want to play around on devnet

For anyone trying to implement Arkpay themselves, I've used vue in development mode and outputted a few things to console that may help you see how this version works. I've put the code on github in case it's of use to anyone and I've created a reddit post about it so message me there if you have any questions.

Example 1

Example 2

Example 3