SDK React Native

Utilizza l'SDK React Native di DEUNA per condividere il Payment Widget, il Payment Vault, Click to Pay, la gestione delle azioni successive, i voucher e le integrazioni con wallet nativi su iOS e Android.

Installazione#

Installa l'SDK e la sua dipendenza WebView.

npm install @deuna/react-native-sdk react-native-webview

yarn add @deuna/react-native-sdk react-native-webview

pnpm add @deuna/react-native-sdk react-native-webview

Reazione CLI

Autolinking registra i moduli nativi. Installa i pod iOS dopo aver aggiunto o aggiornato il pacchetto:

npx pod-install

Le versioni 2.1 e successive includono moduli nativi per Apple Pay, Google Pay e la gestione delle frodi. Consulta il repository per Note sull'installazione nativa Per i blocchi di compatibilità di dipendenze richiesti da un progetto React Native "bare" e compatibili con le versioni attuali di Xcode e Android.

Expo

Aggiungi il plugin di configurazione. Fornisci solo le autorizzazioni del wallet e i provider di prevenzione delle frodi utilizzati dalla tua applicazione.

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

Rigenera i progetti nativi dopo aver modificato la configurazione del plugin:

npx expo prebuild

Poiché l'SDK contiene moduli nativi, testalo in una build di sviluppo anziché con Expo Go.

Inizializza e monta il renderer#

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 aperto#

Uso Mode.MODAL per un modulo gestito dall'SDK. Il modulo precedentemente montato DeunaWidget risponde al controller inizializzato.

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

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

Utilizzare la callback per aggiornare l'interfaccia. Confermare e completare l'ordine finale tramite un webhook verificato, anziché fidarsi solo dello stato dell'applicazione.

Integrare un widget#

Inizializzare con Mode.EMBEDDED e renderizzare DeunaWidget all'interno del layout dello schermo, anziché montarlo accanto allo schermo.

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

<View style={{flex: 1}}>
  <DeunaWidget instance={deunaSDK} />
</View>

Non renderizzare la stessa istanza SDK in entrambe le posizioni. Smontare DeunaWidget dispone il suo controller attivo.

Se la tua applicazione possiede il pulsante di pagamento, imposta hidePayButton: true, quindi chiamare isValid() e submit() dal pulsante.

const handlePay = async () => {
  if (!(await deunaSDK.isValid())) return;
  const result = await deunaSDK.submit();
  if (result.status === 'error') showRetry(result);
};

Esperienze disponibili#

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

Archiviazione dei pagamenti e Click to Pay#

Archiviazione dei pagamenti è l'esperienza predefinita di Elements. Fornire un account autenticato userToken o userInfo per il cliente.

await deunaSDK.initElements({
  orderToken,
  userInfo: {email: 'ada@example.com'},
  types: [{name: 'vault'}],
  mode: Mode.MODAL,
  callbacks: {
    onSuccess: (credential) => useSavedCredential(credential),
    onError: (error) => showRetry(error),
    onClosed: (action) => showPaymentMethods(action),
  },
});

Uso {name: 'click_to_pay'} per Click to Pay.

Supporto nativo per Apple Pay e Google Pay#

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 sospeso#

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 buono#

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 esterni#

L'adattatore predefinito apre URL esterne con React Native. Linking. Metodi di pagamento che richiedono Chrome Custom Tabs o SFSafariViewController ho bisogno di InAppBrowserAdapter Forniti durante l'inizializzazione.

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

L'adattatore deve implementare openUrl(url) e risolvi dopo la chiusura del browser esterno. Consulta il repository's Esempi di migrazione degli adattatori.

Dati fraud-device#

Inizializzare i fornitori collegati in anticipo prima che il cliente effettui il pagamento, quindi generare l'identificatore combinato quando necessario per il tuo ordine o flusso di rischio.

await deunaSDK.initializeFraudProviders({
  MERCADOPAGO: {},
});

const fraudId = await deunaSDK.generateFraudId({
  MERCADOPAGO: {},
});

I progetti Expo devono inoltre includere il nome del fornitore in minuscolo nel plugin di configurazione, ad esempio fraudProviders: ['mercadopago'], e riprovare expo prebuild. I progetti base devono collegare la dipendenza nativa corrispondente. Vedi Integrare l'impronta digitale del dispositivo.

Riferimento a callback e ciclo di vita#

Esempi e codice sorgente ufficiali#

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