As you can see, the interface is simple and intuitive featuring 2 types of payment methods:

Address

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.

QR-Code

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

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”.

Enjoy and play with it and also report issues on GitHub if you find any (for Pay or Desktop Wallet).

Developers

GitHub Link : https://github.com/ArkEcosystem/pay

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: https://explorer.ark.io:8443/

If you discover any issues, have features requests or need help please don’t hesitate to open in appropriate repository:

ARK Pay:

https://github.com/ArkEcosystem/pay/issues

https://github.com/ArkEcosystem/pay/issues ARK Pay Demo Vue.JS:

https://github.com/ArkEcosystem/pay-demo-vue/issues

https://github.com/ArkEcosystem/pay-demo-vue/issues ARK Pay Demo React:

https://github.com/ArkEcosystem/pay-demo-react/issues

Shops

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