Comenzar con el SDK Web

El SDK Web de DEUNA es un script de navegador que renderizza le esperienze di pagamento in un elemento modal o in un elemento target responsive. Il tuo backend crea gli ordini e protegge le credenziali private; il browser riceve una chiave API pubblica e un token di ordine a breve durata.

Architettura di integrazioneChiedi ad Athia informazioni#

1. Carica una versione fissaChiedi ad Athia informazioni#

<script
  crossorigin
  src="https://cdn.deuna.io/web-sdk/v1.7/index.js">
</script>

Lo script espone window.DeunaSDK. Fissa la versione in produzione e testa gli aggiornamenti nel sandbox per prima. Non riscrivere silenziosamente l'URL CDN in tempo reale da input non attendibili.

Per un'applicazione a pagina singola, carica lo script a livello di documento una sola volta. Se lo carichi dinamicamente, risolvi una promessa condivisa per evitare che percorsi concorrenti aggiungano tag duplicati.

function loadDeunaSdk() {
  if (window.DeunaSDK) return Promise.resolve(window.DeunaSDK);
  if (window.__deunaSdkPromise) return window.__deunaSdkPromise;

  window.__deunaSdkPromise = new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'https://cdn.deuna.io/web-sdk/v1.7/index.js';
    script.crossOrigin = 'anonymous';
    script.onload = () => resolve(window.DeunaSDK);
    script.onerror = () => reject(new Error('DEUNA Web SDK failed to load'));
    document.head.append(script);
  });

  return window.__deunaSdkPromise;
}

2. Inizializza l'ambienteChiedi ad Athia informazioni#

await DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  env: 'sandbox',
});

Uso sandbox per i test di integrazione e production per il traffico live. Il valore predefinito è lo SDK, ma impostare env esplicitamente previene l'uso di token e credenziali accidentali tra ambienti.

3. Scegli la strategia di caricamentoChiedi ad Athia informazioni#

await DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  env: 'sandbox',
  preloadWidgets: [
    {
      widget: 'payment',
      params: {
        language: 'en',
        callbacks,
      },
    },
  ],
});

// Once your backend returns the token, reveal the prepared widget.
await DeunaSDK.initPaymentWidget({orderToken});

Pre-carica solo l'esperienza che il cliente è probabile che apra. La soluzione corrente supporta payment, elements, vouchere nextAction inserimenti di pre-caricamento.

4. Apri un'esperienzaChiedi ad Athia informazioni#

Politica di sicurezza del contenuto (CSP)Chiedi ad Athia informazioni#

Inizia dalla tua politica esistente e consente solo le origini DEUNA utilizzate dall'ambiente e dalle funzionalità selezionate. Lo SDK di produzione carica da https://cdn.deuna.io; i frame del widget utilizzano gli host Checkout o Elements di produzione, mentre le connessioni API e di archiviazione utilizzano gli endpoint di produzione DEUNA. Il sandbox utilizza i corrispondenti *.sandbox.deuna.io hosts.

Content-Security-Policy:
  script-src 'self' https://cdn.deuna.io;
  frame-src https://checkout-ux.deuna.com https://elements.deuna.com https://cdn.getduna.com;
  connect-src 'self' https://api.deuna.io https://apigw.getduna.com https://elements.deuna.com;

Portafogli, provider di frodi, APM, font, immagini e file di stile personalizzati possono richiedere origini specifiche del provider. Aggiungi solo le origini utilizzate dalla tua integrazione configurata; verifica la console del browser nel sandbox e mantieni la politica sotto controllo. Non aggiungere wildcard ampi per sopprimere le violazioni.

Host responsive e accessibilitàChiedi ad Athia informazioni#

La modalità "Modal" utilizza la viewport per schermi fino a 600 px di larghezza. Per la modalità "Embedded", fornire un host fluido e aggiornare la sua altezza da onResize.

#deuna-payment {
  width: 100%;
  min-width: 0;
  min-height: 32rem;
}

@media (max-width: 600px) {
  #deuna-payment { min-height: 100dvh; }
}

Mantenere l'ingrandimento attivo, non bloccare il focus al di fuori del widget, ripristinare il focus dopo la chiusura, e testare la navigazione tramite tastiera e l'ingrandimento del testo al 200%.

Checklist per l'accettazione del sandboxChiedi ad Athia informazioni#

• Lo script viene caricato una sola volta e un errore produce un'interfaccia utente ripristinabile.
• Le chiavi e i token d'ordine del sandbox non raggiungono la produzione, o viceversa.
• Le modalità "Modal" e "Target" funzionano a 320 px di larghezza e con la sola tastiera.
• Vengono gestiti il successo, il rifiuto, la chiusura, il timeout, il refresh e l'interruzione della rete.
• Popup o redirect di 3DS e APM non vengono bloccati da CSP o dal sandboxing iframe.
• I log escludono token, dettagli del cliente e dati di pagamento.
• Il tuo backend, e non la callback, decide se l'elaborazione è consentita.

Prossimo passoChiedi ad Athia informazioni#