TUTORIAL - Finally a Shopify Payment Gateway Partial Workaround!

[TOCACoffee]

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 }}&currency=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!

 

[Guest]

@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

[TOCACoffee]

@LordVetinari Wow! Thank you so much, you are awesome!! I hope this helps all those out there looking for a solution.

[Guest]

@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

[TOCACoffee]

@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?

[Xrphunter]

This is awesome !

[TOCACoffee]

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