ARK Pay is a simple open-source library that provides merchants with the ability to easily accept ARK as a means of payment in online stores.
The goal of ARK has always been to build a blockchain platform that gives developers a powerful toolkit to create a fully functioning blockchain ecosystem with ARK at its core. ARK Pay is a key component of that toolkit and provides developers with a plug-and-play module to allow easy implementation of ARK as a payment method.
GitHub Link: https://github.com/ArkEcosystem/pay
We have developed a simple example using our DevNet to show how ARK Pay works. For this purpose we have setup a “Surprise GIF” demo, that will show you a random GIF when your payment transaction is confirmed on the blockchain.
As you can see, the interface is simple and intuitive featuring 2 types of payment methods:
The address option gives you a standard method of transaction and all of the relevant information needed to send a payment from the ARK wallet. The following is a breakdown of the purpose of each field as shown above:
- Product: This is a description of the item / service / … you are buying
- ARK Address: This is the address of the merchant being paid and is where you will send the payment.
- Vendor Field: This is a unique tag for each transaction so a merchant can easily distinguish between different buyers. It is automatically generated for each unique transaction.
- Amount: This is the price of the item you are buying, There is also a fiat equivalent for users to easily see how much they are paying in USD / EUR / GBP, etc.
- Time To Pay: This shows the time remaining to complete the transaction. This is predefined by the merchant and can vary depending on the seller.
- Pay Now: The Pay Now button makes use of our new URI scheme. If you have the Desktop Wallet installed (v2.1.1 or higher), pressing ‘Pay Now’ will open the wallet and automatically populate all fields. The only thing you will need to do is select which network profile you will use to pay and which wallet you would like to send your funds from. Then select your preferred fee for the transaction and input your passphrase to send your payment.
For ease of use, we have also included a ‘copy’ icon for each of the available fields. This feature will provide an easy option to manually copy the relevant information into the wallet you are paying from.
Much like the Pay Now feature, the QR-Code option also uses ARK’s new URI scheme. When scanned, it will automatically populate the data in your ARK Mobile Wallet with the deposit address, amount and Vendor Field data.
If you are using the ARK Desktop Wallet, you can also click on the image or press the ‘Pay Now’ button to have the payment information populated within a send window, much like the Pay Now button in the ‘Address’ screen.
Example & Demo
If you need DARK tokens (ARK Devnet tokens) for testing this, you can import this wallet (be sure to create Devnet profile):
- address: DJV3XCKCpZLvKC7BxovTXJH68idnQ55ECx
- passphrase: arkpay
Note: In order to take a full advantage of ARK Pay, we suggest that you **download newest v2.1.1 Desktop Wallet **for the improved URI experience.
In this demo we are “selling” a random surprise GIF that will display after you successfully pay the transaction and it gets confirmed.
- The Demo shop, which we have named “Surprise GIF”, is available at https://arkecosystem.github.io/pay-demo-vue/
- Click on “Pay Now” button
- You don’t need to have Ark Desktop Wallet opened when you click on “Open Ark Desktop Wallet” it will automatically open it for you.
Once it opens your Ark Desktop wallet this model will popup.
- Select the profile you wish to send from (if you only have 1 for selected network it will be pre-selected for you).
- Select wallet you wish to send from.
- Adjust dynamic fee if you want or use average.
- Input passphrase for your wallet that you selected in step 2.
- Click Next.
Confirmation window will appear
Confirm payment and that’s it!— wait for the tx to be confirmed. Switch back to the browser and wait for the gif to appear (meaning your payment was successfully processed).
Pretty simple right? In under 30 seconds from making a payment to receiving the “goods”.
GitHub Link :
We have developed two examples for popular frameworks for Vue.JS and React.
- ARK Pay Demo Vue.JS: https://github.com/ArkEcosystem/pay-demo-vue
- ARK Pay Demo React: https://github.com/ArkEcosystem/pay-demo-react
Using these demos you can quickly grab predefined and developed templates to get you up and running in no time.
You can also look through our ARK Pay documentation for explanation on how to set up and use ARK Pay:
Remember that when setting this up you will need to send requests via https nodes if you are running your website over https.
- HTTPS Devnet node: https://dexplorer.ark.io:8443/
- HTTPS Mainnet node:
If you discover any issues, have features requests or need help please don’t hesitate to open in appropriate repository:
- ARK Pay:
- ARK Pay Demo Vue.JS:
- ARK Pay Demo React:
If you want to accept ARK in your shop but don’t know how to proceed, please join our Slack and our team, community and developers will be more than happy to help you out!
Join at: https://ark.io/slack — channel #help