Jump to content
TOCACoffee

TUTORIAL - Finally a Shopify Payment Gateway Partial Workaround!

Recommended Posts

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:

ShopifySettings.png.3b631e78aedb8d80a763aca5e07bd24e.png

On the following page select Payment providers: 482368159_SettingsPage.thumb.png.0ef737f6f7d083518c45258c75195788.png

 

Scroll down to where it says Manual Payments and select Create custom payment method:ManualPayment1.thumb.png.1863ba62352d06ba5700eaf929d30cd4.png

 

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)

ManualPayment.thumb.png.b91bd337579911189d3edb29195588a2.png

 

Go back to the Settings page and click Checkout:

152344132_SettingsPage.thumb.png.47cab8efddc62a39addb6eaba510054c.png

 

Scroll down to where it says Additional Scripts:

AdditionalScripts.thumb.png.56f8365aa258e046fad6a1feabb8876f.png


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:

PaymentOptions.thumb.png.86252d5fe9cfe8d602dd5c5621aa13f3.png

After selecting Complete order the following box will display at the top of the Thank you page:

ThankyouPage.thumb.png.6bcced4e49fd39da43e03f191762b768.png

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!

 

Share this post


Link to post
Share on other sites

@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 by LordVetinari

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×