SDK React Native

Utilisez le SDK React Native de DEUNA pour partager les intégrations de Payment Widget, Payment Vault, Click to Pay, prochaine étape, bons de réduction et de portefeuilles natifs sur iOS et Android.

Installation#

Installez le SDK et sa dépendance WebView associée.

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

Réagir à la CLI native

Autolinking enregistre les modules natifs. Installez les pods iOS après avoir ajouté ou mis à jour le package :

npx pod-install

Les versions 2.1 et ultérieures incluent les modules Apple Pay, Google Pay et de prévention de la fraude natifs. Consultez le dépôt : Notes sur la configuration native pour les blocs de compatibilité de dépendances Xcode et Android requis pour un projet React Native "bare".

Exposition

Ajoutez le plugin de configuration. Fournissez uniquement les entitlements et les fournisseurs de lutte contre la fraude utilisés par votre application.

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

Re-générez les projets natifs après avoir modifié la configuration du plugin :

npx expo prebuild

Puisque le SDK contient des modules natifs, testez-le dans une version de développement plutôt que sur Expo Go.

Initialisez et montez le rendu#

Créez une seule instance de l'SDK et conservez-la entre les rendus. Montez exactement une DeunaWidget pour cette instance. Le composant gère à la fois les flux de modal et d'intégration WebView ; l'appel à un initialiseur configure uniquement son contrôleur.

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} />
    </>
  );
}

Ouvrir le widget de paiement#

Utilisation Mode.MODAL pour un modal géré par l'SDK. Le modal précédemment monté DeunaWidget réagit au contrôleur initialisé.

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);
    },
  },
});

Utilisez la fonction de rappel pour mettre à jour l'interface. Confirmez et effectuez la commande finale à partir d'un webhook vérifié plutôt que de vous fier uniquement à l'état de l'application.

Intégrer un widget#

Initialisez avec Mode.EMBEDDED et affichez DeunaWidget à l'intérieur de la disposition de l'écran au lieu de le monter à côté de l'écran.

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

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

Ne déployez pas la même instance de l'SDK dans les deux emplacements. Le démontage DeunaWidget désactive son contrôleur actif.

Si votre application possède le bouton de paiement, définissez hidePayButton: true, puis appelez isValid() et submit() à partir de l'action du bouton.

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

Expériences disponibles#

Le SDK expose également setCustomStyle(...), refetchOrder(), getWidgetState(), isValid(), submit()et close() Pour le contrôleur actif.

Coffre-fort de paiement et Paiement en un clic#

Le Coffre-fort de paiement est l'expérience par défaut Elements. Passez soit un compte authentifié userToken ou userInfo pour le client.

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),
  },
});

Utilisation {name: 'click_to_pay'} pour Click to Pay.

Intégration native avec Apple Pay et Google Pay#

Vérifiez la configuration du commerçant et la prise en charge des appareils avant d'afficher le bouton de portefeuille. Les valeurs retournées sont : apple_pay et 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'));

Une fois la disponibilité confirmée, lancez la feuille native en réponse au clic sur le bouton. Pour Apple Pay, effectuez cette opération directement dans l'action de l'utilisateur.

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 nécessite l'autorisation iOS et l'identifiant du commerçant. Google Pay nécessite l'activation du commerçant et un appareil Android compatible. Voir Apple Payer et Google Payer.

Poursuivre une action en attente#

Utilisez le même jeton de commande lorsque DEUNA signale que le paiement nécessite un défi ou une redirection 3DS pris en charge.

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

Ouvrir un bon de réduction#

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

Gérez les redirections externes#

L'adaptateur par défaut ouvre les URL externes avec React Native. Linking. Méthodes de paiement nécessitant Chrome Custom Tabs ou SFSafariViewController nécessite InAppBrowserAdapter fournis lors de l'initialisation.

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

L'adaptateur doit implémenter openUrl(url) et se résolvent après la fermeture du navigateur externe. Consultez le dépôt. Exemples de migration des adaptateurs.

Données des appareils frauduleux#

Initialiser les fournisseurs associés avant que le client n'effectue le paiement, puis générer l'identifiant combiné lorsque votre commande ou votre flux de risque en nécessite un.

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

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

Les projets Expo doivent également inclure le nom du fournisseur en minuscules dans le plugin de configuration, par exemple fraudProviders: ['mercadopago'], puis relancer expo prebuild. Les projets de base doivent lier la dépendance native correspondante. Voir Intégrer l'empreinte digitale de l'appareil.

Référence des callbacks et du cycle de vie#

Exemples et code source officiels#

Consultez ModalScreen.tsx, EmbeddedScreen.tsxet WalletsScreen.tsx Pour des flux complets et exécutables.