Better Payments with Stellar Pay

StellarPay — Tue, 21 Jan 2025 18:40:45 +0000

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.

☕ Buy me a coffee (on testnet)

DEV Community: StellarPay