SDK de React Native

Utilice el SDK de React Native de DEUNA para compartir el Widget de Pago, el Almacén de Pagos, Click to Pay, la siguiente acción, los cupones y las integraciones de billeteras nativas en iOS y Android.

Instalación#

Instale el SDK y su dependencia relacionada, 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

Reaccionar CLI nativa

Autolinking registra los módulos nativos. Instale los pods de iOS después de agregar o actualizar el paquete:

npx pod-install

Las versiones 2.1 y posteriores incluyen módulos nativos para Apple Pay, Google Pay y prevención de fraude. Consulte el repositorio. Notas para la configuración nativa Para los bloques de compatibilidad de dependencias actuales de Xcode y Android requeridos para un proyecto React Native "bare".

exposición

Añade el plugin de configuración. Proporciona únicamente los entitlements y proveedores de prevención de fraude que utiliza tu aplicación.

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

Regenera los proyectos nativos después de modificar la configuración del plugin:

npx expo prebuild

Dado que el SDK contiene módulos nativos, pruébalo en una versión de desarrollo en lugar de Expo Go.

Inicializa y monta el renderizador#

Cree una instancia del SDK y manténgala a lo largo de las renderizaciones. Monte exactamente una DeunaWidget para esa instancia. El componente renderiza tanto los flujos de modal como de WebView incrustado; llamar al inicializador solo configura su controlador.

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

Abrir widget de pago#

Uso Mode.MODAL para un modal propiedad del SDK. El modal previamente montado DeunaWidget responde al controlador inicializado.

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

Utilice la devolución de llamada para actualizar la interfaz. Confirme y complete el pedido final a través de un webhook verificado, en lugar de confiar únicamente en el estado de la aplicación.

Integrar un widget#

Inicialice con Mode.EMBEDDED y renderice DeunaWidget dentro del diseño de la pantalla, en lugar de montarlo al lado de la pantalla.

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

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

No renderice la misma instancia del SDK en ambas ubicaciones. Desmontar DeunaWidget desactiva su controlador activo.

Si su aplicación posee el botón de pago, configure hidePayButton: true, luego llame a isValid() y submit() desde la acción del botón.

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

Experiencias disponibles#

El SDK también expone setCustomStyle(...), refetchOrder(), getWidgetState(), isValid(), submit()y close() Para el controlador activo.

Almacén de pagos y Pago con un clic#

El Almacén de pagos es la experiencia predeterminada de Elements. Proporcione una autenticación userToken o userInfo para el 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'} para Click to Pay.

Soporte nativo para Apple Pay y Google Pay#

Verifique la configuración del comerciante y el soporte de dispositivos antes de mostrar el botón de la billetera. Los valores devueltos son: apple_pay y 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'));

Una vez que la disponibilidad se haya confirmado, inicie la hoja nativa al pulsar el botón. Para Apple Pay, mantenga esta llamada directamente en la acción del usuario.

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 requiere la autorización iOS y el identificador del comerciante. Google Pay requiere la habilitación del comerciante y un dispositivo Android compatible. Consulte de Apple Pay y pago de google.

Continúe con una acción pendiente#

Utilice el mismo token de pedido cuando DEUNA informe que el pago requiere un desafío o redirección 3DS compatible.

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

Abrir un cupón#

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

Maneje las redirecciones externas#

El adaptador predeterminado abre las URL externas con React Native Linking. Los métodos de pago que requieren Chrome Custom Tabs o SFSafariViewController necesitan un InAppBrowserAdapter proporcionados durante la inicialización.

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

El adaptador debe implementar openUrl(url) y resolverse después de que el navegador externo se cierre. Consulte los ejemplos de migración del adaptador en el repositorio ..

Datos de fraude del dispositivo#

Pre-inicialice los proveedores vinculados antes de que el cliente realice el pago, y luego genere el identificador combinado cuando lo necesite su pedido o flujo de riesgo.

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

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

Los proyectos de Expo también deben incluir el nombre del proveedor en minúsculas en el plugin de configuración, por ejemplo fraudProviders: ['mercadopago'], y ejecutar expo prebuild. Los proyectos básicos deben vincular la dependencia nativa correspondiente. Consulte Integrar la huella digital del dispositivo.

Referencia del ciclo de vida y llamadas de retorno#

Ejemplos y código fuente oficiales#

Consulta ModalScreen.tsx, EmbeddedScreen.tsxy WalletsScreen.tsx Para flujos completos y ejecutables.