Aller au contenu principal

🚀 DĂ©marrage rapide

Bienvenue dans l'intĂ©gration des paiements Mileston ! 🎉 Nous sommes ravis de vous accueillir ! L'intĂ©gration de Mileston Payments est simple, amusante et ouvre votre application au monde des paiements crypto. Plongeons ensemble et crĂ©ons votre premier lien de paiement crypto en quelques Ă©tapes !

🌟 CrĂ©ez votre premier lien de paiement crypto​

📝 Étape 1 : CrĂ©ez un compte​

Rendez-vous sur business.mileston.co et inscrivez-vous pour obtenir votre compte Mileston Business.

Vous aurez ainsi accĂšs Ă  notre tableau de bord puissant oĂč toute la magie opĂšre. ✹

🔑 Étape 2 : Obtenez votre clĂ© API​

Allez dans l’onglet DĂ©veloppeurs du tableau de bord pour gĂ©nĂ©rer votre clĂ© API. Vous trouverez deux types de clĂ©s sous les catĂ©gories normale et checkout :

  • ClĂ© API de test (pour testnet, pas d'argent rĂ©el) :
    Mileston_TEST_hshshs7y373djdsdj...
  • ClĂ© API live (pour mainnet, valeur monĂ©taire rĂ©elle) :
    Mileston_LIVE_773hsiakakgddh...

⚠ Astuce :

  • Utilisez la clĂ© API de test pour vos tests en dĂ©veloppement.
  • Utilisez la clĂ© API live pour la production afin de traiter de vrais paiements.

đŸ› ïž Étape 3 : Installez le SDK backend​

Installez notre SDK backend pour commencer à créer des liens de paiement comme un pro. Voici comment :

npm install mileston-payments

Ensuite, Ă©crivez un peu de code magique comme ceci :

import { PaymentLink } from "mileston-payments";

const apiKey = "your-api-key"; // Votre clé API
const businessId = "your-business-id"; // Votre identifiant d'entreprise

// Initialisez PaymentLink, Invoice ou RecurringPayment selon vos besoins
const paymentLink = new PaymentLink(apiKey, businessId);

// Générez un lien de paiement
const link = await paymentLink.create({
  amount: 100, // Montant dans votre devise préférée
  currency: "USD",
  description: "Exemple de paiement crypto",
});
console.log("Lien de paiement créé :", link);

🔍 OĂč trouver votre businessId ?
Vous pouvez récupérer votre identifiant d'entreprise dans le menu déroulant sous votre logo d'entreprise dans le tableau de bord.

✹ Étape 4 : Utilisez le lien de paiement dans votre frontend​

Maintenant que vous avez créé un lien de paiement, ajoutons-le à votre frontend !

Vous pouvez soit :

  1. Créer votre propre bouton personnalisé, ou
  2. Utiliser notre SDK mileston-payment-client pour une intégration transparente.

D'abord, installez le SDK client :

npm install mileston-payment-client

Ensuite, utilisez notre bouton de paiement préconstruit :

import { PayButton } from "mileston-payment-client";

const App = () => (
  <PayButton
    paymentUrl="https://checkout.mileston.co/payment"
    onPaymentComplete={() => console.log("Paiement terminé !")}
    onPaymentDataReceived={(data) =>
      console.log("Données de paiement reçues :", data)
    }
    onPaymentError={(error) => console.error("Erreur de paiement :", error)}
    style={{ backgroundColor: "green", color: "white" }}
  >
    Payer maintenant
  </PayButton>
);

👀 Pourquoi utiliser le PayButton ?
Il gĂšre tout : paiement, vĂ©rification et une expĂ©rience utilisateur gĂ©niale. Vous n'avez plus qu'Ă  siroter votre cafĂ©. ☕

đŸ›Ąïž Étape 5 : Gardez vos clĂ©s API en sĂ©curité​

Important : Utilisez toujours le SDK backend pour les clés API. Ne les exposez jamais dans le frontend, sinon vous aurez des problÚmes.

Cas d'utilisation rĂ©els​

Cas d'utilisation 1 : Gestion des abonnements​

Scénario : Une entreprise SaaS souhaite automatiser les paiements mensuels de ses utilisateurs.

Exemple de code :

import { SubscriptionCheckout } from "mileston-payment-client";

<SubscriptionCheckout
  businessName="SaaS Pro"
  businessLogo="https://example.com/logo.png"
  plan={{
    name: "Pro Plan",
    description: "AccÚs à toutes les fonctionnalités premium",
    amount: 29.99,
    currency: "USD",
    interval: "monthly",
    intervalCount: 1,
  }}
  onWalletConnectPaymentComplete={(networkId, tokenId) =>
    console.log("Paiement terminé", networkId, tokenId)
  }
  onWalletConnectPaymentError={(error) => console.error("Erreur de paiement", error)}
  paymentLinkId="subscription-link-id"
  env="test"
/>;

Cas d'utilisation 2 : GĂ©nĂ©ration de factures​

Scénario : Un freelance doit envoyer des factures à ses clients pour des projets terminés.

Exemple de code :

import { InvoiceCheckout } from "mileston-payment-client";

<InvoiceCheckout
  businessName="Freelance Studio"
  businessLogo="https://example.com/logo.png"
  description="Facture #4567 pour projet web"
  amount={500}
  recipientWalletAddress="0x123456789abcdef"
  onQrCodePaymentComplete={() => console.log("Paiement QR Code terminé")}
  onQrCodePaymentError={(error) =>
    console.error("Erreur de paiement QR Code", error)
  }
  paymentLinkId="invoice-id"
  env="test"
/>;

Cas d'utilisation 3 : IntĂ©gration de lien de paiement​

Scénario : Une boutique e-commerce souhaite offrir une expérience de paiement fluide.

Exemple de code :

import { PaymentLinkCheckout } from "mileston-payment-client";

<PaymentLinkCheckout
  businessName="E-Shop"
  businessLogo="https://example.com/logo.png"
  bannerImage="https://example.com/banner.png"
  title="Paiement de commande"
  description="Payez votre commande"
  amount={150}
  recipientWalletAddress="0x123456789abcdef"
  onCardPaymentComplete={() => console.log("Paiement par carte terminé")}
  onCardPaymentError={(error) => console.error("Erreur de paiement par carte", error)}
  paymentLinkId="order-payment-link"
  env="test"
/>;

📂 Repos GitHub​

Consultez nos SDK pour plus de détails et d'exemples :

🎉 FĂ©licitations !
Vous venez de crĂ©er votre premier lien de paiement crypto avec Mileston Payments ! High five ! 🙌

Besoin d'aide ?​

Si vous avez besoin d'aide, rejoignez notre communauté Discord : https://discord.gg/JT3BhUCy