TOCACoffee Posted January 16, 2019 Share Posted January 16, 2019 Hello! After searching for many months and coming up empty I decided to try and craft a way (and learn some javascript) to enable XRP payments on our TOCA Coffee Shopify store. This process will get you up and running to accept XRP payments, but you will need to manually check your wallet and match the payment and destination tag with the order in your store. Here is the tutorial: Upon signing into Shopify, click the Settings button on the lower left: On the following page select Payment providers: Scroll down to where it says Manual Payments and select Create custom payment method: Under Name of custom payment method type, XRP and use the descriptions as stated below or as you see fit for your need, then click the Activate button: (Note: If you decide to name it something other than XRP, you will need to modify the script below with the name you selected) Go back to the Settings page and click Checkout: Scroll down to where it says Additional Scripts: Enter the following code, update the wallet address, and hit Save: (Note: if you changed the custom payment method name you will need to modify the first line to reflect the name you selected.) {% if {{checkout.transactions[0].gateway}} == "XRP" %} <br><br> <div id="root"></div> <script> const app = document.getElementById('root'); const container = document.createElement('div'); app.setAttribute('class', 'content-box'); app.appendChild(container); const container2 = document.createElement('div'); container2.setAttribute('class', 'content-box__row'); var head = document.createElement('H2'); head.textContent = "Payment Required"; app.appendChild(container2); container2.appendChild(head); const container3 = document.createElement('div'); container3.setAttribute('class', 'content-box__row'); app.appendChild(container3); var request = new XMLHttpRequest(); request.open('GET', 'https://data.ripple.com/v2/normalize?amount={{ checkout.total_price | money_without_currency }}¤cy=USD&issuer=rvYAfWj5gh67oV6fW32ZzP3Aw4Eubs59B&exchange_currency=XRP', true); request.onload = function () { // Begin accessing JSON data here var data = JSON.parse(this.response); if (request.status >= 200 && request.status < 400) { var XRPNeeded = parseFloat(data.converted); var XRPFormat = XRPNeeded.toFixed(5); const p = document.createElement('p'); p.textContent = `Please send payment of ${XRPFormat} to address: rTocauxk75yWyEhwo5QxHGwytweG7JXYD`; container3.appendChild(p); const br = document.createElement('br'); container3.appendChild(br); const p2 = document.createElement('p'); p2.textContent = 'With a destination tag of: {{checkout.order_number}}'; container3.appendChild(p2); container3.appendChild(br); const p3 = document.createElement('p'); p3.textContent = 'Please complete payment in the next 5 minutes.'; container3.appendChild(p3); container3.appendChild(br); const qr= document.createElement('img'); qr.src = `https://chart.googleapis.com/chart?cht=qr&chl=https://ripple.com/send?to=rTocauxk75yWyEhwo5QxHGwytweG7JXYD%26dt={{checkout.order_number}}%26amount=${XRPFormat}&chs=125x125&chld=L|0`; container3.appendChild(qr); } else { const errorMessage = document.createElement('p'); errorMessage.textContent = `Sorry it's not working! Try refreshing the page.`; app.appendChild(errorMessage); } } request.send(); </script> {% endif %} So what is happening here is the script will only display if the XRP payment method was selected. It will then create a box formatted to look like all the other boxes on the Thank you page. It then uses the APIs provided by Ripple to convert from USD to XRP the amount needed by passing the total dollar value of the cart. It uses Bitstamp as the issuer of USD however you can change this to any other gateway you see fit. It then uses the Order ID number as the destination tag (so you can confirm and track the payment) and uses the Chart APIs from Google to generate a QR code which contains the wallet address, XRP amount needed, and destination tag. Now when a customer goes to checkout they will have a new option: After selecting Complete order the following box will display at the top of the Thank you page: I hope this helps the many other Shopify store owners like us who have been looking for a way to provide XRP as a payment option!! At the time of writing this post our wallet has not yet been activated, however if this tutorial has helped you and you'd like to donate, activate our wallet, etc. ( rTocauxk75yWyEhwo5QxHGwytweG7JXYD ) or if you'd like to experience some amazing coffee from our tocacoffee.com website, use code XRPChat and save 35% on your purchase! Dario_o, blueorchid, Xrphunter and 3 others 4 2 Link to comment Share on other sites More sharing options...
Guest Posted January 16, 2019 Share Posted January 16, 2019 (edited) @TOCACoffee Activated. You guys are good to go! Welcome to xrpChat. @Hodor Buy Tiffany some coffee or maybe give these guys a mention in your next blog. Edited January 17, 2019 by Guest Link to comment Share on other sites More sharing options...
TOCACoffee Posted January 17, 2019 Author Share Posted January 17, 2019 @LordVetinari Wow! Thank you so much, you are awesome!! I hope this helps all those out there looking for a solution. Link to comment Share on other sites More sharing options...
Guest Posted January 17, 2019 Share Posted January 17, 2019 (edited) @TOCACoffee I ordered some beans. I wanted to see how it worked and one can never have too much coffee. The checkout was too easy. Is there a way you can add the XRP symbol next to the text field? That would be slick. Again nice work! Edited January 17, 2019 by Guest Link to comment Share on other sites More sharing options...
TOCACoffee Posted January 17, 2019 Author Share Posted January 17, 2019 @LordVetinari Thank you for your order! I just fulfilled it! I added the word XRP after the amount and added a logo at the bottom per your suggestion, what do you think? Dario_o 1 Link to comment Share on other sites More sharing options...
Xrphunter Posted January 19, 2019 Share Posted January 19, 2019 This is awesome ! TOCACoffee 1 Link to comment Share on other sites More sharing options...
TOCACoffee Posted January 23, 2019 Author Share Posted January 23, 2019 Wanting an end to end workaround we developed a process to sync the XRP payment with Shopify! Be sure to check out our other post for more details: TUTORIAL – Shopify Payment Gateway PART 2 - XRP-Shopify Payment Sync Xrphunter 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now