What is Stellar Pay and how does it work?
Template
Here is the template for the Barber Shop Payment page.
Simply remove the amount attribute from the shortcode if you want to show an input field for the amount next to the payment button.
<!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.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="GBJO3RWCSSKQPSEMLXIJFUBAFVA7KK7YJHXZQLAGZ5MOXYLIWVTUSZDG"]
</div>
</div>
</body>
</html>
The supported currencies are XLM, USDC and EURC.
ChatGPT / DesignerGPT
You can use DesignerGPT (an extension for ChatGPT) to host the code on Replit. You can also ask DesignerGPT to make edits to the code. Alternatively, you can host the file yourself (for free). For example on Netlify.
QR Code Generator
The Stellar Pay QR Code Generator 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. This makes it easier to pay on a mobile phone with the LOBSTR wallet.
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 is only tested on the testnet.
Top comments (0)