SDK Web

Installer

Option 1 : NPM

npm install @yuno-payments/sdk-web

import { Yuno } from '@yuno-payments/sdk-web';

Option 2 : CDN

<script src="https://sdk-web.y.uno/v1.5/main.js"></script>

Option 3 : Charge dynamique

const script = document.createElement('script');
script.src = 'https://sdk-web.y.uno/v1.5/main.js';
document.head.appendChild(script);

📘
Support TypeScript
Types d'installation : npm install @yuno-payments/sdk-web-types

Flux de paiement de base

1. Initialize

const yuno = await Yuno.initialize(public-api-key);

2. Créer une session de paiement (backend)

// Your backend endpoint
const session = await fetch('/api/checkout/session', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    customer_id: 'cus_123',
    amount: { currency: 'USD', value: 2500 },
    country: 'US'
  })
}).then(r => r.json());

3. Configurer le paiement

yuno.startCheckout({
  checkoutSession: session.checkout_session,
  elementSelector: '#payment-container',
  countryCode: 'US',
  language: 'en-US',
  async yunoCreatePayment(oneTimeToken) {
    const result = await fetch('/api/payment/create', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        one_time_token: oneTimeToken,
        checkout_session: session.checkout_session
      })
    }).then(r => r.json());
    
    yuno.continuePayment({ showPaymentStatus: true });
  },
  yunoPaymentResult: (data) => {
    console.log('Payment completed:', data.status);
  }
});

4. Formulaire de paiement du montage

yuno.mountCheckout();

5. Lancer le flux de paiement

Ajoutez un bouton de paiement et déclenchez le flux de paiement :

const payButton = document.querySelector('#pay-button');

payButton.addEventListener('click', () => {
  yuno.startPayment();
});

6. Ajouter du code HTML

<div id="payment-container"></div>
<button id="pay-button">Pay Now</button>

Exemple complet fonctionnel

<!DOCTYPE html>
<html>
<head>
  <title>Yuno Payment</title>
  <script src="https://sdk-web.y.uno/v1.5/main.js"></script>
</head>
<body>
  <div id="payment-container"></div>
  <button id="pay-button">Pay Now</button>
  
  <script>
    async function initPayment() {
      // Initialize
      const yuno = await Yuno.initialize('pk_test_123');
      
      // Create session
      const session = await fetch('/api/checkout/session', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          customer_id: 'cus_123',
          amount: { currency: 'USD', value: 2500 },
          country: 'US'
        })
      }).then(r => r.json());
      
      // Configure checkout
      yuno.startCheckout({
        checkoutSession: session.checkout_session,
        elementSelector: '#payment-container',
        countryCode: 'US',
        async yunoCreatePayment(token) {
          await fetch('/api/payment/create', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ 
              one_time_token: token, 
              checkout_session: session.checkout_session 
            })
          });
          yuno.continuePayment();
        },
        yunoPaymentResult: (data) => {
          if (data.status === 'SUCCEEDED') {
            window.location.href = '/success';
          }
        }
      });
      
      // Mount form
      yuno.mountCheckout();
      
      // Start payment on button click
      document.querySelector('#pay-button').addEventListener('click', () => {
        yuno.startPayment();
      });
    }
    
    initPayment();
  </script>
</body>
</html>

Traitement des résultats de paiement

yuno.startCheckout({
  // ... other config
  yunoPaymentResult: (data) => {
    switch(data.status) {
      case 'SUCCEEDED':
        window.location.href = '/success';
        break;
      case 'FAILED':
        alert('Payment failed: ' + data.error?.message);
        break;
      case 'PENDING':
        console.log('Payment is being processed');
        break;
      case 'REJECTED':
        alert('Payment was rejected');
        break;
    }
  },
  yunoError: (error) => {
    console.error('Error:', error);
  }
});

Authentification 3DS

Le 3DS est géré automatiquement par le SDK. Pour les méthodes de paiement asynchrones :

async yunoCreatePayment(token) {
  await createPaymentOnBackend(token);
  
  // Handle redirect if needed
  const result = await yuno.continuePayment();
  
  if (result?.action === 'REDIRECT_URL') {
    window.location.href = result.redirect.init_url;
  }
}

Options de configuration

Paramètres essentiels

Paramètres	Type	Description
`checkoutSession`	chaîne	ID de session provenant du backend
`elementSelector`	chaîne	Sélecteur CSS pour conteneur
`countryCode`	chaîne	Code ISO du pays (par exemple, « US »)
`language`	chaîne	Code de langue (par exemple, « en-US »)
`yunoCreatePayment`	fonction	Rappel de création de paiement

Configuration de la carte

yuno.startCheckout({
  // ... other config
  card: {
    type: 'extends', // or 'only'
    cardSaveEnable: true, // Show save checkbox
    isCreditCardProcessingOnly: false, // Allow debit
    onChange: ({ error, data }) => {
      if (error) {
        console.log('Card validation error:', error);
      }
    }
  }
});

Chargeur et état

yuno.startCheckout({
  // ... other config
  showLoading: true, // Show Yuno's loader
  showPaymentStatus: true, // Show payment result page
  onLoading: (isLoading) => {
    console.log('Loading state:', isLoading);
  }
});

Prochaines étapes

Prêt à découvrir des fonctionnalités plus avancées ? Consultez le guide des fonctionnalités avancées pour :

Options de montage alternatives - mountCheckoutLite() et mountSeamlessCheckout() pour la sélection d'un mode de paiement personnalisé
Inscription (Enregistrer les cartes) - Enregistrez vos modes de paiement pour une utilisation future
Token avec Token sécurisés - Paiements en un clic avec cartes enregistrées
Interface utilisateur personnalisée (intégration sans interface) - Créez des formulaires de paiement entièrement personnalisés
Champs sécurisés - Formulaires de carte personnalisés conformes à la norme PCI
Stylisme et personnalisation - Adaptez le SDK à votre marque
Configuration avancée - Vues dynamiques, mode de rendu, etc.

Voir aussi :

Exemples de code - Exemples à copier-coller pour des scénarios courants