Solana Pay : tout ce que vous devez savoir

Solana Pay : fonctionnement

Solana Pay offre aux utilisateurs une autre façon d’interagir avec les contrats intelligents et de transférer des jetons. Au lieu de devoir connecter un portefeuille, ils peuvent consulter et signer une transaction à partir d’un lien. Cela supprime l’obligation de connecter son portefeuille pour interagir. Cette méthode convient aussi bien aux paiements simples qu’aux interactions avec des applications, et permet donc de traiter à la fois les demandes de transaction et les demandes de transfert.

La principale fonctionnalité de Solana Pay est la demande de transfert, une demande non interactive visant à transférer des SOL ou des jetons SPL. Notez que tous les portefeuilles Solana n’acceptent pas ce format, mais que la plupart des portefeuilles populaires le font (Phantom, Solflare et Glow). Voici à quoi ressemble l’URL d’une demande de transfert Solana Pay :

solana:<recipient>?amount=<amount>&spl-token=<spl-token>&reference=<reference>&label=<label>&message=<message>&memo=<memo>

Les paramètres de l’URL sont utilisés par un portefeuille pour composer directement une transaction. Dans ce guide, nous nous concentrerons sur les demandes de transfert, mais il est important de noter que presque toutes les transactions Solana peuvent être converties en URL Solana Pay valide.

Paramètres

Examinons maintenant chacun des paramètres :

Destinataire :

Il s’agit de la clé publique de la personne à laquelle vous envoyez des SOL. Pour les transferts de jetons SPL, vous indiquez le type de jeton dans le champ spl-token. Le portefeuille utilise ces informations pour déterminer le compte réel du transfert.

Montant

Le nombre de SOL ou de jetons que vous envoyez. S’il est inférieur à 1, un 0 doit précéder la virgule décimale. Si aucun montant n’est indiqué, le portefeuille vous demandera de le saisir. Si vous transférez des SOL, ce montant est exprimé en SOL et non en lamports.

Jeton SPL

Ce champ facultatif représente l’adresse de mint d’un type donné de compte de jeton SPL. Si vous ne l’incluez pas, la transaction sera simplement un transfert standard de SOL.

Référence

Un identifiant unique encodé dans la transaction. Il permet de retrouver des transactions précises et de vérifier leur résultat.

Libellé

Une brève description de la provenance de la demande de transfert. Il peut s’agir d’une boutique ou d’une application. Les portefeuilles l’affichent pour fournir à l’utilisateur des informations sur la transaction.

Message

Une URL encodée qui contient des informations sur la raison du transfert. Elle peut inclure ce que vous achetez, un identifiant de commande ou une simple note. Les portefeuilles l’utilisent également pour fournir davantage de contexte à l’utilisateur.

Mémo

Une note incluse dans la transaction de paiement. Elle ne doit contenir aucune information privée ou sensible, car elle est enregistrée on-chain.

Ces informations vous donnent un contrôle total sur votre transaction et simplifient l’interaction entre votre portefeuille et le destinataire. Pour des raisons de sécurité, les applications ne doivent traiter la transaction qu’après sa confirmation on-chain.

Solana Pay : exemples d’URL

Envoi de 0,5 SOL :

solana:CckxW6C1CjsxYcXSiDbk7NYfPLhfqAm3kSB5LEZunnSE?amount=0.5&label=Amazon&message=Thanks%20for%20shopping%20at%20Amazon&memo=ID321

Envoi de 5 USDC :

solana:CckxW6C1CjsxYcXSiDbk7NYfPLhfqAm3kSB5LEZunnSE?amount=5&spl-token=EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v

Solana Pay : implémentation avec Next.js

Qu’allons-nous créer ? À la fin de ce tutoriel, vous disposerez d’une application web qui crée un code QR Solana Pay à partir des données saisies par les utilisateurs, à savoir une adresse de portefeuille et un montant en SOL. Cette application affichera également le statut du paiement en vérifiant l’état de la transaction sur la blockchain.

Prérequis

• Node.js doit être installé sur votre machine
• Vous devez avoir une bonne maîtrise de React et TypeScript.
• Vous aurez besoin d’un portefeuille Solana pour envoyer et recevoir des fonds.
• Vous aurez également besoin d’une clé API Helius pour toute opération on-chain. Vous pouvez obtenir gratuitement une clé API Helius avec un simple portefeuille sur notre portail développeur.

Étapes

Suivez ces étapes pour utiliser Solana Pay avec Next.js.

Créer une application Next.js

Vérifiez d’abord que Node est installé, puis créez l’application Next.js. Saisissez la commande suivante dans le terminal :

npx create-next-app@latest sol-pay-app

‍Vous devrez ensuite répondre à quelques questions. Vous pouvez sélectionner les options suivantes :

Une fois l’application créée, vous pouvez accéder au répertoire avec :

cd sol-pay-app

Une fois dans le répertoire, vous pouvez démarrer l’application avec :

npm run dev

Rendez-vous sur http://localhost:3000/ pour afficher votre application.

Installer les packages

Cette application nécessite deux packages : Solana web3.js et Solana Pay. Nous utiliserons également un package appelé « react-qr-code » pour générer des versions sous forme de codes QR des liens de transaction.

Pour installer ces packages, exécutez :

npm install @solana/pay @solana/web3.js bignumber.js react-qr-code --save

Créer une interface frontend

Créez une interface frontend pour afficher le code QR Solana Pay et permettre de modifier l’adresse qui recevra les SOL ainsi que le montant en SOL. Pour des raisons de sécurité, il est recommandé d’exécuter toute la logique côté backend, notamment la définition des montants et du destinataire.

Cependant, pour simplifier ce tutoriel, nous exécuterons également la logique de l’application côté frontend.

1. Accédez au répertoire pages, puis ouvrez le fichier index.tsx. Ce fichier représente votre page d’accueil. Remplacez le code existant par ce qui suit :

export default function Home() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="mb-6 text-3xl font-bold text-orange-700">
        Helius Solana Pay Demo
      </h1>
    </div>
  );
}

2. Ajoutez les imports en haut de la page.

// imports
import {Cluster,clusterApiUrl,Connection,PublicKey,Keypair} from "@solana/web3.js";
import { encodeURL, createQR,findReference, FindReferenceError, validateTransfer } from "@solana/pay";
import BigNumber from "bignumber.js";
import { useState } from "react";
import QRCode from "react-qr-code";

3. Créez une variable pour stocker votre URL RPC Helius. Si vous prévoyez de déployer cette application, utilisez un fichier ENV ou un proxy pour masquer votre clé API.

// get a free Helius RPC at helius.dev
 const RPC="https://rpc.helius.xyz/?api-key="!

4. Créez un objet Solana Connection avec votre URL RPC Helius :

console.log('Connecting to the Solana network\n');
const connection = new Connection(RPC, 'confirmed');

5. Nous allons maintenant déclarer et initialiser les variables que nous utiliserons. Cela inclut toutes les variables requises dans l’URL Solana Pay. Vous pouvez créer ces variables dans la fonction Home().

// URL Variables
  const [address, setAddress] = useState("");
  const [recipient, setRecipient] = useState(
    new PublicKey("CckxW6C1CjsxYcXSiDbk7NYfPLhfqAm3kSB5LEZunnSE"));
  const [amount, setAmount] = useState(new BigNumber(1));
  const [message, setMessage] = useState("Helius Demo Order");
  const reference = new Keypair().publicKey;
  const label = "Helius Super Store";
  const memo = "Helius#4098";

  // for the QR code
  const [qrCodeValue, setQrCodeValue] = useState('');
  const [paymentStatus, setPaymentStatus] = useState('');

6. Nous devons ensuite écrire une fonction pour créer le paiement. Cette fonction récupérera les variables des champs de saisie et créera une URL Solana Pay encodée à l’aide de la méthode encodedURL. Nous convertirons ensuite l’objet URL en chaîne de caractères et l’enregistrerons afin de l’utiliser plus tard pour afficher le code QR. Ajoutez le code suivant sous les variables :

async function createPayment() {
    console.log("Creating a payment URL \n");
    setRecipient(new PublicKey(address));
    const url = encodeURL({
      recipient,
      amount,
      reference,
      label,
      message,
      memo,
    });

    setQrCodeValue(url.toString()); // convert URL object to string
    checkPayment();
  }

7. Une fois le paiement créé, nous présenterons le code QR à l’utilisateur, qui pourra le scanner et effectuer la transaction. Pour vérifier que cette transaction a bien eu lieu et qu’elle a réussi, nous devons créer une fonction qui vérifie la transaction de paiement on-chain. Dans la fonction createPayment ci-dessus, vous pouvez voir que nous appelons cette fonction juste après avoir créé la transaction.

async function checkPayment() {
    // update payment status
    setPaymentStatus('pending');

		// search for transaction

		// validate transaction
}

Cette fonction comportera deux parties : la recherche de la transaction confirmée et sa validation.

Comme l’utilisateur interagira avec la transaction depuis un autre appareil, il est impossible de savoir exactement quand elle aura lieu. Nous vérifierons donc régulièrement si une transaction contenant la référence correspondante a été effectuée et quel est son statut. Cette opération utilise la méthode findReference de Solana Pay.

// search for transaction
console.log('Searching for the payment\n');
    let signatureInfo;
  
    const {signature} = await new Promise((resolve, reject) => {
      
        const interval = setInterval(async () => {
            console.count('Checking for transaction...'+reference);
            try {
                signatureInfo = await findReference(connection, reference, { finality: 'confirmed' });
                console.log('\n Signature: ', signatureInfo.signature,signatureInfo);
                clearInterval(interval);
                resolve(signatureInfo);
            } catch (error: any) {
                if (!(error instanceof FindReferenceError)) {
                    console.error(error);
                    clearInterval(interval);
                    reject(error);
                }
            }
        }, 250);
    });
	// Update payment status
  setPaymentStatus('confirmed');

Une fois la transaction trouvée, nous devons nous assurer que les opérations attendues ont bien été effectuées.

Nous devons notamment vérifier que le bon destinataire a reçu les jetons et que le montant correct a été envoyé. Pour cela, nous utiliserons la méthode validateTransfer de Solana Pay :

//validate transaction
    console.log('Validating the payment\n');
    try {
      await validateTransfer(connection, signature, { recipient: recipient, amount });

      // Update payment status
      setPaymentStatus('validated');
      console.log('Payment validated');
      return true;
      
  } catch (error) {
      console.error('Payment failed', error);
      return false;
  }

8. La dernière étape consiste à ajouter le TSX pour configurer l’interface utilisateur. Nous utiliserons Tailwind pour mettre en forme les éléments. L’interface comprendra un titre, deux champs de saisie pour l’adresse du destinataire et le montant en SOL, un bouton et un code QR Solana Pay. Une fois le paiement validé, le code QR Solana Pay sera remplacé par le texte « Paiement validé ». Le bouton appellera la méthode createPayment.

//validate transaction
return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="mb-6 text-3xl font-bold text-orange-700">
        Helius Solana Pay Demo
      </h1>
      <div className="w-full max-w-md p-6 mx-auto bg-white rounded-xl shadow-md">
        <div className="mb-4">
          <label className="block mb-2 text-sm font-medium text-gray-700">
            Address:
          </label>
          <input
            type="text"
            onChange={(e) => setAddress(e.target.value)}
            className="w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
          />
        </div>
        <div className="mb-4">
          <label className="block mb-2 text-sm font-medium text-gray-700">
            Amount:
          </label>
          <input
            type="number"
            onChange={(e) => setAmount(new BigNumber(e.target.value))}
            className="w-full px-3 py-2 text-sm leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
          />
        </div>
        <div className="flex justify-center items-center">
        <button
          className="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
          onClick={createPayment}
        >
          Create QR Code
        </button>
        </div>
        
        <div>
        {paymentStatus === 'validated' ? <p className="mt-4 text-green-500 text-center">Payment Validated</p> : <div className="flex justify-center mt-4">
          {qrCodeValue && }
        </div>}
      </div>
      </div>
      
    </div>
  );

‍Une fois toutes ces étapes terminées, vous devriez disposer d’une application qui ressemble à ceci et se comporte de la même manière :

Solana Pay : créer des expériences fluides

Que vous effectuiez un paiement ou configuriez une transaction, le système d’encodage de Solana Pay offre une expérience fluide aux utilisateurs comme aux applications. J’espère que ce guide vous aidera à comprendre et à implémenter Solana Pay afin de rendre vos interactions avec la blockchain Solana plus fluides et plus efficaces. Si vous avez besoin d’aide, n’hésitez pas à rejoindre le Discord Helius ou à nous contacter sur Twitter.

• Retrouvez le code complet qui doit figurer dans le fichier index.tsx
• En savoir plus sur Solana Pay
• Consultez la documentation de Solana Pay

‍

‍

‍