Web Payments with Interledger using Moneyd GUI
Web Payments is a W3C ecosystem that aims to remove the need for checkout forms by integrating standardized payment UIs and APIs across different browsers. Specifically, the payment handler API (still a work in progress) allows us to handle payments using new and custom payment methods, such as the Interledger Protocol (ILP). This is important because with ILP, both the merchant and the customer can now be currency and network agnostic (i.e. they can accept/send payment with whatever currency/network they choose and settle instantaneously through the ILP network).
In this post we will demonstrate how we can register and configure a web payment app in Moneyd GUI, which is a frontend for Moneyd (or your connector).
Prerequisites
- You should be running Moneyd GUI. To set this up please follow this tutorial.
- You should be using Google Chrome Beta (as mentioned the payment handler API is still a work in progress). You should also enable ‘Web Payments’, ‘Enable web payment modifiers’ and ‘Service Worker payment apps’ in your Chrome flags.
Once you have Moneyd GUI running, you can go to your localhost on port 7770 and click on ‘Wallet Config’ to enable your Moneyd instance to handle Interledger payments requested via the PaymentRequest API.
This essentially registers the Moneyd GUI service worker in your browser to listen for ‘paymentrequest’ events with a payment method of ‘interledger’. When it handles an event it will open a page, hosted by Moneyd GUI, to prompt the user to confirm the payment.
Demo on merchant site
Based on a Google payment handler demo and its extension, I will demonstrate how the payment flow will look like after web payments is enabled via Moneyd GUI.
As shown above, the ‘Buy Now’ button triggers a payment window which lists ILP as a way of payment. When the user presses the first ‘pay’ button it sends a ‘paymentrequest’ event mentioned before, and so the service worker opens the relevant interledger payment page which displays all the payment details for the user to confirm.
The merchant is running an ILP-SPSP server that receives payment through the payment pointer ‘$ilp-demo1.localtunnel.me’ (see more here).
After a payment is sent , this server receives the payment specified in the payment request API (in this case 50 XRP, written as 50,000,000,000 units because Moneyd’s XRP integration denominates in billionths of one XRP. If the merchant were running its own connector which receives in USD then it will receive in USD).
Whitelisting
The Moneyd GUI wallet also has the functionality of automatically paying out to whitelisted domains under a certain amount without the customer confirming payment details. This is stored in IndexedDB and whenever a customer has paid through a website not already in the white list, we add the domain to it. They can also configure this through Moneyd-GUI.
As seen above localhost:8081 has already been added as we have paid already in the first merchant demo. Currently 0 USD becomes the default cap amount for a white listed item. We can also add other domains in the wallet.
In the above checkout demo, because we have already whitelisted localhost:3000/, I only have to choose the Interledger payment method in the payment window. Our web payment app then automatically recognizes this domain in the whitelist and pays automatically.
Next Steps
To make the payment flow more secure and compliant, we may want to implement Two-Factor authentication in our whitelisting functionality. Moreover, generating a token for the merchant to then make a Paid API call to receive payments would increase the flexibility of the payment interaction with customers.
Let us know if you have any feedback, and feel free to ask any questions in our Gitter channel!
