What is Stellar Pay and how does it work?
Template
Here is the template for the Barber Shop example.
<!DOCTYPE html>
<html>
<head>
<title>Barber Shop | São Paulo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-sdk/12.3.0/stellar-sdk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-freighter-api/3.0.0/index.min.js"></script>
<script src="https://marvelous-tartufo-2b7ab9.netlify.app/src/js/stellar-pay.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="https://marvelous-tartufo-2b7ab9.netlify.app/src/css/stellar-pay.css"
/>
</head>
<body class="stellar-pay-layout">
<img src="https://marvelous-tartufo-2b7ab9.netlify.app/assets/images/barber.png" class="stellar-pay-header" />
<h1>Regular Haircut</h1>
<p>Barber Shop São Paulo</p>
<div class="stellar-pay">
<div class="shortcode">
[stellar_pay amount="5" currency="USDC" title="Pay" network="testnet" memo="Barber Sao Paulo"
wallet="GB....XYZ"]
</div>
</div>
</body>
</html>
Simply remove the 'amount' attribute from the shortcode if you want to show an input field for the amount next to the payment button.
More templates can be found here.
Payments
Stellar Pay supports payments with XLM, USDC and EURC. The wallet you use needs to have a trustline for receiving USDC and EURC. On desktop devices you can pay using the Freighter browser extension and on mobile phones you can pay with LOBSTR, or possibly with other wallets that support universal links.
QR Code Generator
To make it easier to pay with mobile phones, we also created a QR Code Generator, which converts any URL to a QR code. You can also use it to generate dynamic payment links for any amount of XLM, USDC or EURC.
AI integration and hosting
You can ask ChatGTP or DesignerGPT (an extension for ChatGPT) to make edits to the code. DesignerGPT can host the code for you on Replit. Alternatively, you can host the file yourself (for free). For example on Netlify.
Developers and website owners
The Stellar Pay technology can be integrated in any existing website. The possibilities are endless. Simply add the scripts and the shortcode from the template to your website and you're done!
Final notes
This work is a proof-of-concept only. It was build to demonstrate that our idea is practical and real-world applicable. It was tested on Stellar Test Net only.
Top comments (0)