SDK React Native

Utilizza l'SDK React Native di DEUNA per condividere le integrazioni di Payment Widget, Payment Vault, Click to Pay, next-action, voucher e portafogli nativi tra applicazioni iOS e Android.

RequisitiChiedi ad Athia informazioni#

Per utilizzare l'SDK React Native di DEUNA, è necessario:

• Node.js: 20 o superiore
• Gestore di pacchetti: Yarn o npm
• React: 18.2.0 o superiore
• Reazione nativo: 0.73.0 o superiore
• React Native WebView: 13.15.0 o superiore
• Expo SDK: 50 o superiore (per app con Expo)
• Credenziali DEUNA: Un account attivo e credenziali DEUNA valide (contatta support@deuna.com se riscontri ritardi)
• Progetto Android: minSdkVersion 24 o superiore
• Dispositivi Huawei: HarmonyOS 2.0 o superiore

Installa l'SDKChiedi ad Athia informazioni#

Inizia l'inizializzazione dell'SDK.

1. Aggiungi le dipendenze

Aggiungi l'SDK DEUNA al tuo progetto:

yarn add @deuna/react-native-sdk

npm i @deuna/react-native-sdk

pnpm add @deuna/react-native-sdk

Aggiungi le richieste react-native-webview (≥ 13.15.0) dipendenza peer:

yarn add react-native-webview

npm i react-native-webview

pnpm add react-native-webview

2. Collegamento

A partire dalla versione 2.1.0, l'SDK include un modulo nativo che abilita le schermate di pagamento native di Google Pay e Apple Pay.

Reazione CLI

Correre pod install per collegare il modulo nativo su iOS:

cd ios && pod install

Expo (flusso di lavoro gestito)

Aggiungi il plugin di configurazione a app.json. Fornisci solo le autorizzazioni wallet e i provider antifrode utilizzati dalla tua applicazione:

{
  "expo": {
    "plugins": [
      [
        "@deuna/react-native-sdk",
        {
          "merchantIdentifiers": ["merchant.com.example"],
          "googlePay": true,
          "fraudProviders": []
        }
      ]
    ]
  }
}

Esegui prebuild per rigenerare le ios/ e android/ directory native con il modulo registrato:

npx expo prebuild

3. Guida alla migrazione da 1.x a 2.x.x

Inizializza e monta il rendererChiedi ad Athia informazioni#

Creare un'istanza SDK e mantenerla attiva durante i rendering. Montare esattamente una DeunaWidget per quella istanza. Il componente gestisce sia i flussi di moduli che quelli di WebView incorporati; chiamare l'inizializzatore configura solo il suo controller.

import {useMemo} from 'react';
import {DeunaSDK, DeunaWidget} from '@deuna/react-native-sdk';

export function CheckoutScreen() {
  const deunaSDK = useMemo(
    () =>
      DeunaSDK.initialize({
        publicApiKey: 'YOUR_PUBLIC_API_KEY',
        environment: 'sandbox',
      }),
    []
  );

  return (
    <>
      <CheckoutContent deunaSDK={deunaSDK} />
      <DeunaWidget instance={deunaSDK} />
    </>
  );
}

Widget di pagamento apertoChiedi ad Athia informazioni#

Il Payment Widget è un componente integrato che ti consente di offrire più metodi di pagamento ai clienti:

• Carte di credito e di debito: Visa, Mastercard, American Express e carte co-branded.
• Metodi di pagamento alternativi (APM): OXXO, KueskiPay, Aplazo, Daviplata, Nequi e altri.
• Portafogli digitali: PayPal, Apple Pay e Google Pay.

Visualizzazione in una modale

Uso Mode.MODAL (predefinito) per un foglio modale gestito dall'SDK. Il <DeunaWidget instance={deunaSDK} /> montato presenta automaticamente sopra il tuo schermo:

import {Mode} from '@deuna/react-native-sdk';

const onShowPaymentWidget = async () => {
  await deunaSDK.initPaymentWidget({
    orderToken: 'YOUR_ORDER_TOKEN',
    mode: Mode.MODAL,
    language: 'en',
    callbacks: {
      onSuccess: async (order) => {
        await deunaSDK.close(); // Closes modal and releases widget resources
        navigation.navigate('PaymentSuccess', {order});
      },
      onError: (error) => showRetry(error),
      onClosed: (action) => navigation.goBack(),
      onPaymentProcessing: () => disablePayButton(),
      onEventDispatch: (event, payload) => {
        analytics.track(event, payload);
      },
    },
  });
};

Riferimento parametri

Integrare un widgetChiedi ad Athia informazioni#

Per visualizzare il widget direttamente all'interno del layout del tuo schermo, inizializza con mode: Mode.EMBEDDED.

import { useEffect } from 'react';
import { View, Button } from 'react-native';
import { DeunaSDK, DeunaWidget, Mode } from '@deuna/react-native-sdk';

export function EmbeddedCheckoutScreen({ deunaSDK, orderToken }) {
  // Release widget resources on unmount
  useEffect(() => {
    return () => {
      deunaSDK.close();
    };
  }, [deunaSDK]);

  const handleOpenEmbedded = async () => {
    await deunaSDK.initPaymentWidget({
      orderToken,
      mode: Mode.EMBEDDED,
      callbacks: {
        onSuccess: async (order) => {
          await deunaSDK.close();
          navigateToReceipt(order);
        },
        onError: (error) => handlePaymentError(error),
      },
    });
  };

  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, width: '100%' }}>
        <DeunaWidget instance={deunaSDK} />
      </View>
      <Button title="Carica modulo di pagamento" onPress={handleOpenEmbedded} />
    </View>
  );
}

Pulsante di pagamento personalizzato (hidePayButton)

Se la tua app renderizza il proprio pulsante di pagamento, passa hidePayButton: true ed esegui validazioni e invio manualmente:

await deunaSDK.initPaymentWidget({
  orderToken,
  mode: Mode.EMBEDDED,
  hidePayButton: true,
  callbacks,
});

const handleCustomSubmit = async () => {
  // 1. Validate entered card/payment fields
  const isValid = await deunaSDK.isValid();
  if (!isValid) return;

  // 2. Submit payment
  const result = await deunaSDK.submit();
  if (result.status === 'error') {
    console.error('Submit failed:', result.message);
  }
};

Filtra e configura i metodi di pagamentoChiedi ad Athia informazioni#

Flusso dei moduli diretti (paymentMethods)

Le architetture di checkout DEUNA (checkout-base e modular-checkout) supportano l'avvio diretto in un singolo modulo di pagamento—uno schema noto come flusso dei moduli.

Sebbene il parametro SDK paymentMethods sia tipizzato come un array, i motori di checkout interni attualmente supportano solo un elemento in questa lista. Fornire un singolo metodo di pagamento apre il widget direttamente nel modulo specifico di quel metodo di pagamento (ad esempio, Kueski Pay BNPL), saltando la schermata di selezione del metodo di pagamento.

await deunaSDK.initPaymentWidget({
  orderToken,
  paymentMethods: [
    { paymentMethod: 'bnpl', processors: ['kueski'] },
  ],
  callbacks,
});

Risoluzione della priorità di configurazione

Quando determina quali metodi di pagamento e moduli visualizzare, DEUNA risolve le configurazioni nel seguente ordine:

Configurazioni PayPal

Tipo di flusso (flowType)

Controlla se PayPal visualizza un riepilogo dell'ordine prima del pagamento o va direttamente all'autorizzazione:

await deunaSDK.initPaymentWidget({
  orderToken,
  behavior: {
    paymentMethods: {
      flowType: 'twoStep', // 'twoStep' (order summary first) or 'singleStep' (direct payment)
    },
  },
  callbacks,
});

Acquisto automatico (express)

Quando i clienti hanno precedentemente autorizzato pagamenti rapidi con PayPal, abilita l'elaborazione immediata:

await deunaSDK.initPaymentWidget({
  orderToken,
  paymentMethods: [
    {
      paymentMethod: 'wallet',
      processors: ['paypal_wallet'],
      configuration: {
        express: true, // Default: true. Set false to prompt user account confirmation.
      },
    },
  ],
  callbacks,
});

Stile dinamico e aggiornamento dell'ordineChiedi ad Athia informazioni#

Personalizza dinamicamente l'aspetto (setCustomStyle)

Aggiorna dinamicamente i colori, i loghi o i caratteri del widget (ad esempio, cambiando il branding dell'intestazione al rilevamento del BIN della carta):

await deunaSDK.setCustomStyle({
  theme: {
    colors: {
      primaryTextColor: '#023047',
      buttonPrimaryFill: '#FFB703',
      buttonPrimaryText: '#000000',
    },
  },
});

Aggiorna i totali dell'ordine (refetchOrder)

Quando offri promozioni specifiche per franchising (ad esempio, "15% di sconto con Mastercard"), ascolta onCardBinDetected, ricalcola i totali dell'ordine sul tuo backend e notifica il widget:

callbacks: {
  onCardBinDetected: async (metadata) => {
    if (metadata?.cardBrand === 'Mastercard') {
      // 1. Notify your backend to apply discount to order
      await applyDiscountOnBackend(orderId, 'MASTERCARD_15');

      // 2. Refresh widget to display updated totals
      const updatedOrder = await deunaSDK.refetchOrder();
      console.log('Order refreshed with discount:', updatedOrder);
    }
  },
}

Esperienze disponibiliChiedi ad Athia informazioni#

L’SDK espone anche setCustomStyle(...), refetchOrder(), getWidgetState(), isValid(), submit()e close() Per il controller attivo.

Archiviazione dei pagamenti e Click to PayChiedi ad Athia informazioni#

La soluzione Card Vault ed Elements integra la tokenizzazione delle carte, la gestione del portafoglio cliente e Click to Pay senza richiedere una transazione di pagamento immediata:

• Card Vault: Consente ai clienti di aggiungere, archiviare e gestire in modo sicuro carte di credito e debito per acquisti futuri.
• Clicca per pagare: Offre un'esperienza di checkout senza attrito sfruttando i token di rete globali (Visa, Mastercard, ecc.).

Visualizzazione in una modale

Segui questi passaggi per visualizzare il widget Card Vault o Elements in una modale:

import { DeunaSDK, DeunaWidget, Mode } from '@deuna/react-native-sdk';

const onShowVaultModal = async () => {
  await deunaSDK.initElements({
    userToken: '<DEUNA_USER_TOKEN>', // Optional
    userInfo: {
      firstName: 'Ada',
      lastName: 'Lovelace',
      email: 'ada@example.com', // Required
    },
    types: [{ name: 'vault' }], // Default experience
    mode: Mode.MODAL,
    callbacks: {
      onSuccess: async (data) => {
        await deunaSDK.close(); // Close modal and release resources
        console.log('Card tokenized successfully:', data);
      },
      onError: async (error) => {
        console.error('Vault error:', error);
        await deunaSDK.close();
      },
      onClosed: (action) => {
        console.log('Vault closed:', action);
      },
      onEventDispatch: (type, response) => {
        console.log('Vault event:', type, response);
      },
    },
    widgetExperience: {
      userExperience: {
        showSavedCardFlow: true, // Optional: toggle for saving card
        defaultCardFlow: false,  // Optional: toggle for saving card as default
      },
    },
  });
};

Visualizza in modalità incorporata

Per incorporare il modulo Vault o Click to Pay all'interno del layout del tuo schermo, passa mode: Mode.EMBEDDED. Assicurati che <DeunaWidget /> sia racchiuso in un contenitore che ne definisce le dimensioni:

import { useEffect } from 'react';
import { View, Button } from 'react-native';
import { DeunaSDK, DeunaWidget, Mode } from '@deuna/react-native-sdk';

export function EmbeddedVaultScreen({ deunaSDK }) {
  useEffect(() => {
    return () => {
      deunaSDK.close(); // Release resources on screen unmount
    };
  }, [deunaSDK]);

  const handleOpenEmbeddedVault = async () => {
    await deunaSDK.initElements({
      mode: Mode.EMBEDDED,
      userInfo: {
        email: 'ada@example.com',
      },
      callbacks: {
        onSuccess: async (data) => {
          await deunaSDK.close();
          console.log('Tokenization successful:', data);
        },
        onError: (error) => console.error(error),
      },
    });
  };

  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, width: '100%' }}>
        <DeunaWidget instance={deunaSDK} />
      </View>
      <Button title="Aggiungi carta salvata" onPress={handleOpenEmbeddedVault} />
    </View>
  );
}

Riferimento parametri per initElements

Integrazione Click to Pay

Per renderizzare il widget Click to Pay, impostare types: [{ name: 'click_to_pay' }].

await deunaSDK.initElements({
  userInfo: {
    firstName: 'Ada',
    lastName: 'Lovelace',
    email: 'ada@example.com', // Required for Click to Pay
  },
  types: [
    {
      name: 'click_to_pay',
    },
  ],
  callbacks: {
    onSuccess: async (data) => {
      await deunaSDK.close();
      console.log('Click to Pay success:', data);
    },
    onError: (error) => console.error('Click to Pay error:', error),
    onClosed: (action) => console.log('Widget closed:', action),
  },
});

Supporto nativo per Apple Pay e Google PayChiedi ad Athia informazioni#

Verificare la configurazione del commerciante e il supporto dei dispositivi prima di visualizzare il pulsante del portafoglio. I valori restituiti sono: apple_pay e google_pay.

const userInfo = {email: 'ada@example.com'};
const wallets = await deunaSDK.getWalletsAvailable({
  orderToken,
  userInfo,
});

setShowApplePay(wallets.includes('apple_pay'));
setShowGooglePay(wallets.includes('google_pay'));

Dopo che la disponibilità è stata confermata, avviare la scheda nativa tramite il tocco del pulsante. Per Apple Pay, mantenere questa chiamata direttamente nell'azione dell'utente.

const launchWallet = (provider: 'apple_pay' | 'google_pay') => {
  const type = provider === 'apple_pay' ? 'APPLE_PAY' : 'GOOGLE_PAY';

  deunaSDK.initElements({
    orderToken,
    userInfo,
    types: [{name: type}],
    callbacks: {
      onSuccess: (credential) => useSavedCredential(credential),
      onError: (error) => showRetry(error),
      onClosed: () => showPaymentMethods(),
    },
  });
};

Apple Pay richiede l'entitlement iOS e l'identificatore del commerciante. Google Pay richiede l'abilitazione per il commerciante e un dispositivo Android idoneo. Fare riferimento a: Paga di Apple e Google Pay.

Continuare un'azione in sospesoChiedi ad Athia informazioni#

Utilizzare lo stesso token d'ordine quando DEUNA segnala che il pagamento richiede una sfida o reindirizzamento 3DS supportato.

await deunaSDK.initNextAction({
  orderToken,
  mode: Mode.MODAL,
  callbacks: {
    onSuccess: (order) => showConfirmation(order),
    onError: (error) => showRetry(error),
    onClosed: () => showPaymentMethods(),
  },
});

Aprire un buonoChiedi ad Athia informazioni#

await deunaSDK.initVoucherWidget({
  orderToken,
  mode: Mode.MODAL,
  callbacks: {
    onSuccess: (order) => showVoucherInstructions(order),
    onError: (error) => showRetry(error),
    onClosed: () => showPaymentMethods(),
    onDownloadFile: (file) => saveVoucher(file),
  },
});

Gestione dei reindirizzamenti esterniChiedi ad Athia informazioni#

A partire da v2.0.0, i metodi di pagamento che richiedono funzionalità native del browser (come Portafoglio Mercado Pago) devono aprirsi in Custom Tabs (Android) o Safari View Controller (iOS) per garantire la gestione sicura della sessione e la persistenza dei cookie. Per supportare questo, fornire un inAppBrowserAdapter che implementa l'interfaccia InAppBrowserAdapter durante DeunaSDK.initialize.

Opzione A: Utilizzo di @deuna/react-native-in-app-browser (Metro / Expo)

Se si utilizza Metro o Expo, installare @deuna/react-native-in-app-browser e passare ExpoWebBrowserAdapter:

import { DeunaSDK } from '@deuna/react-native-sdk';
import { ExpoWebBrowserAdapter } from '@deuna/react-native-in-app-browser';

const deunaSDK = DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  environment: 'sandbox',
  inAppBrowserAdapter: new ExpoWebBrowserAdapter(),
});

Opzione B: Utilizzo di react-native-inappbrowser-reborn (Webpack / Personalizzato)

Se si utilizza Webpack o bundler personalizzati incompatibili con i moduli Expo, utilizzare react-native-inappbrowser-reborn:

npm install react-native-inappbrowser-reborn
# or
yarn add react-native-inappbrowser-reborn

Implementare l'adattatore:

import { Linking } from 'react-native';
import InAppBrowser from 'react-native-inappbrowser-reborn';
import { InAppBrowserAdapter, DeunaSDK } from '@deuna/react-native-sdk';

class InAppBrowserRebornAdapter implements InAppBrowserAdapter {
  async openUrl(url: string): Promise<void> {
    try {
      if (await InAppBrowser.isAvailable()) {
        await InAppBrowser.open(url, {
          dismissButtonStyle: 'cancel',
          preferredBarTintColor: '#023047',
          preferredControlTintColor: '#FFFFFF',
          readerMode: false,
          animated: true,
        });
      } else {
        // Fallback to external browser
        await Linking.openURL(url);
      }
    } catch (error) {
      console.error('Error opening in-app browser:', error);
      throw error;
    }
  }
}

const deunaSDK = DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  environment: 'sandbox',
  inAppBrowserAdapter: new InAppBrowserRebornAdapter(),
});

Dati del dispositivo antifrode e fingerprintingChiedi ad Athia informazioni#

Usa il DeunaSDK.initializeFraudProviders(...) funzione statica per preparare i provider in background, e il metodo di istanza deunaSDK.generateFraudId(...) (o il parametro fraudCredentials negli inizializzatori del widget) per generare un payload antifrode unificato DEUNA.

L'SDK React Native di DEUNA utilizza un'architettura modulare, basata su reflection (zero-bloat): non include gli SDK antifrode di terze parti per impostazione predefinita. Aggiungere solo il/i provider specifico/i che si intende utilizzare. Se non si utilizza un provider, non si paga alcuna penalità di dimensione dell'app.

Provider supportati

Collegamento delle dipendenze

Segui la configurazione corrispondente al tuo ambiente di progetto (Expo o Reazione CLI).

A. Expo (Config Plugin)

Nei progetti Expo che utilizzano Continuous Native Generation (CNG) o EAS Build, abilita solo i provider con cui hai un contratto elencandoli nell'array fraudProviders in app.json:

{
  "expo": {
    "plugins": [
      [
        "@deuna/react-native-sdk",
        {
          "fraudProviders": [
            "mercadopago",
            "riskified"
          ]
        }
      ]
    ]
  }
}

Chiavi supportate in fraudProviders: "mercadopago", "riskified", "cybersource", "signifyd", "accertify", "kount", "sift".

Dopo aver aggiornato app.json, rigenera i progetti nativi:

npx expo prebuild --clean

B. React Native CLI

Nei progetti standard React Native CLI, aggiungi le dipendenze native solo per i provider di cui hai bisogno nei file dell'applicazione host:

Configurazione Android

1. Repository Maven Mercado Pago: Se utilizzi Mercado Pago, assicurati che il repository Maven Mercado Libre sia incluso in android/build.gradle (o settings.gradle):

allprojects {
    repositories {
        google()
        mavenCentral()
        maven { url "https://artifacts.mercadolibre.com/repository/android-releases/" }
    }
}

2. Posizionamento AAR del fornitore: Se utilizzi Cybersource, Signifyd o Accertify, scarica gli AAR del fornitore e posizionali in android/app/libs/:

   • Cybersource: Posiziona i file AAR in android/app/libs/cybersource/.
   • Firmato: Posiziona i file AAR in android/app/libs/signifyd/.
   • Accertimento: Posiziona inmobile e inmobile-common File AAR in android/app/libs/accertify/.

3. Dipendenze: Aggiungi solo i provider che richiedi all'interno di android/app/build.gradle sottoindicato dependencies { ... }:

dependencies {
    // --- Add ONLY the providers you use ---

    // Mercado Pago
    implementation("com.mercadolibre.android.device:sdk:4.0.1")

    // Riskified
    implementation("com.riskified:android-sdk:1.11.0:nogoogle@aar")

    // CyberSource (AARs placed in app/libs/cybersource)
    implementation(fileTree(dir: "libs/cybersource", include: ["*.aar"]))

    // Signifyd (AARs placed in app/libs/signifyd)
    implementation(fileTree(dir: "libs/signifyd", include: ["*.aar"]))

    // Accertify (AARs placed in app/libs/accertify + required transitive dependencies)
    implementation(fileTree(dir: "libs/accertify", include: ["*.aar"]))
    implementation("io.insert-koin:koin-core:3.5.6")
    implementation("androidx.biometric:biometric:1.1.0")
    implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3")

    // Kount
    implementation("com.kount:kount-data-collector:4.1.0")

    // Sift
    implementation("sift-android:sift-android:0.14.0")
}

4. Asset Accertify:
   • Android: Posiziona server_keys_message_hosted.json e inmobile.properties in android/app/src/main/assets/.
   • iOS: Aggiungi server_keys_message_hosted.json e InMobile.plist al tuo progetto Xcode sotto la sezione Copy Bundle Resources target.

Configurazione iOS (ios/Podfile)

All'interno del tuo blocco target 'YourApp' do , aggiungi solo le subspec per i provider di cui hai bisogno:

target 'YourApp' do
  # Add ONLY the subspecs you need:
  pod 'DeunaSDK/MercadoPago'
  pod 'DeunaSDK/Riskified'
  pod 'DeunaSDK/Cybersource'
  pod 'DeunaSDK/Signifyd'
  pod 'DeunaSDK/Kount'
  pod 'DeunaSDK/Sift'
  pod 'DeunaSDK/Accertify'
end

Quindi esegui:

cd ios && pod install

Dettagli e vincoli del provider

RISKIFIED

• Obbligatorio: storeDomain
• Esempio di configurazione:
  JSONCopia

  {
    "RISKIFIED": {
      "storeDomain": "yourdomain.com"
    }
  }

CYBERSOURCE

• Obbligatorio: orgId, merchantId
• Facoltativo: fpServer (predefinito: h.online-metrix.net)
• Esempio di configurazione:
  JSONCopia

  {
    "CYBERSOURCE": {
      "orgId": "your_org_id",
      "merchantId": "your_merchant_id"
    }
  }

SIGNIFYD

• Obbligatorio: orgId
• Facoltativo: fpServer (predefinito: imgs.signifyd.com)
• Esempio di configurazione:
  JSONCopia

  {
    "SIGNIFYD": {
      "orgId": "your_org_id"
    }
  }

ACCERTIFY

• Facoltativo: locationConsent (predefinito: true), phoneConsent (predefinito: true)
• File Richiesti: Il file della chiave di crittografia pubblica server_keys_message_hosted.json e le proprietà dell'endpoint (inmobile.properties in Android src/main/assets/ e InMobile.plist nelle risorse del bundle iOS) devono essere ottenuti da Accertify durante l'onboarding del merchant.
• Dipendenze Transitive (Android): L'AAR di Accertify richiede Koin DI (io.insert-koin:koin-core:3.5.6), AndroidX Biometric (androidx.biometric:biometric:1.1.0) e Kotlinx Serialization (org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3).
• Esempio di configurazione:
  JSONCopia

  {
    "ACCERTIFY": {
      "locationConsent": true,
      "phoneConsent": false
    }
  }

KOUNT

• Obbligatorio: merchantId, clientId, dataCollectorUrl, environment
• Esempio di configurazione:
  JSONCopia

  {
    "KOUNT": {
      "merchantId": "your_merchant_id",
      "clientId": "your_client_id",
      "dataCollectorUrl": "https://...",
      "environment": "TEST"
    }
  }

SIFT

• Obbligatorio: accountId, beaconKey
• Esempio di configurazione:
  JSONCopia

  {
    "SIFT": {
      "accountId": "your_account_id",
      "beaconKey": "your_beacon_key"
    }
  }

MERCADOPAGO

• Obbligatorio: Nessuno ({})
• Android: Richiede il repository Maven di Mercado Libre (https://artifacts.mercadolibre.com/repository/android-releases/) e la dipendenza com.mercadolibre.android.device:sdk:4.0.1.
• iOS: Collegato tramite pod 'DeunaSDK/MercadoPago'.
• Esempio di configurazione:
  JSONCopia

  {
    "MERCADOPAGO": {}
  }

Inizializzazione in background anticipata

Poiché initializeFraudProviders è un metodo statico, può essere eseguito in background prima di istanziare o avviare qualsiasi widget di checkout:

import { useEffect } from 'react';
import { DeunaSDK } from '@deuna/react-native-sdk';

const CartScreen = () => {
  useEffect(() => {
    // Pre-warm fraud SDKs as soon as the cart or store view mounts
    DeunaSDK.initializeFraudProviders({
      MERCADOPAGO: {},
    });
  }, []);

  return (
    // Your cart UI components
  );
};

Opzioni di implementazione

Opzione 1: Chiamata diretta tramite metodo di istanza (generateFraudId)

generateFraudId è un metodo di istanza sulla tua istanza inizializzata di DeunaSDK . Utilizza automaticamente la tua configurazione publicApiKey e environment:

import { DeunaSDK } from '@deuna/react-native-sdk';

const deunaSDK = DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  environment: 'production',
});

async function getFraudToken() {
  const fraudId = await deunaSDK.generateFraudId({
    RISKIFIED: {
      storeDomain: 'yourdomain.com',
    },
    MERCADOPAGO: {},
  });

  // Returns a Base64-encoded JSON string or null
  console.log('Base64 Fraud ID:', fraudId);

  if (fraudId) {
    const decoded = atob(fraudId);
    console.log('Decoded Tokens:', JSON.parse(decoded));
  }
}

Opzione 2: Passa fraudCredentials direttamente ai widget

Quando utilizzi i widget di pagamento DEUNA (initPaymentWidget, initElements, initNextAction, initVoucherWidget), passa la configurazione del fornitore direttamente tramite fraudCredentials. L'SDK chiama generateFraudId internamente al momento dell'acquisto:

await deunaSDK.initPaymentWidget({
  orderToken: 'YOUR_ORDER_TOKEN',
  mode: Mode.MODAL,
  callbacks: {
    onSuccess: (data) => console.log('Payment success:', data),
    onError: (error) => console.error('Payment error:', error),
    onClosed: () => console.log('Widget closed'),
  },
  fraudCredentials: {
    RISKIFIED: {
      storeDomain: 'yourdomain.com',
    },
    MERCADOPAGO: {},
  },
});

Comportamento e caratteristiche di runtime

• Zero-bloat & Crash-safe: Se un fornitore è incluso nella richiesta JSON ma la sua dipendenza nativa non è stata aggiunta all'app, la reflection nativa lo ignora in modo sicuro senza generare un'eccezione non gestita o causare un crash.
• Esecuzione parallela: Tutti i fornitori richiesti eseguono il profiling contemporaneamente su thread in background.
• Comportamento di fallback: Se non sono configurati o disponibili fornitori validi sul dispositivo, generateFraudId si risolve in null.

Riferimento a callback e ciclo di vitaChiedi ad Athia informazioni#

Il initPaymentWidget e gli inizializzatori Elements accettano callback tipizzate per osservare l'avanzamento del pagamento, aggiornare l'interfaccia utente e rilasciare le risorse.

per registrazione personalizzata e analisi.onError)

Gestione degli errori ( type Ispeziona l'errore

onError: async (error) => {
  switch (error.type) {
    case 'INITIALIZATION_FAILED':
      // Widget could not load; release controller and retry or notify user
      await deunaSDK.close();
      showToast('Payment system currently unavailable');
      break;
    case 'PAYMENT_ERROR':
      // Card declined or processor rejection
      showRetryScreen(error.message);
      break;
    default:
      console.warn('Unhandled payment error:', error);
      break;
  }
}

per distinguere i fallimenti di inizializzazione dai rifiuti di pagamento:onDownloadFile)

Gestione dei download di file (

callbacks: {
  onDownloadFile: (file) => {
    const { type, data } = file;
    if (type === 'url') {
      // Download or open external receipt URL
      Linking.openURL(data);
    } else if (type === 'base64') {
      // Save base64 image or PDF to local file system
      saveBase64ToGallery(data);
    }
  },
}

Quando le istruzioni di pagamento voucher o contanti offrono ricevute o codici a barre:close)

Il close() Il metodo rilascia i controller WebView interni e cancella le sottoscrizioni agli eventi. Chiamare sempre deunaSDK.close() in onSuccess e negli hook di smontaggio dello schermo (useEffect cleanup) per i widget incorporati.

Esempi e codice sorgente ufficialiChiedi ad Athia informazioni#

Vedi ModalScreen.tsx, EmbeddedScreen.tsxe WalletsScreen.tsx per flussi completi e funzionanti.