SDK React Native

Utilize o SDK React Native da DEUNA para compartilhar o Widget de Pagamento, o Vault de Pagamentos, o Click to Pay, a próxima etapa, vouchers e integrações com carteiras nativas em iOS e Android.

Instalação#

Instale o SDK e sua dependência WebView associada.

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

Reagir CLI nativo

O Autolinking registra os módulos nativos. Instale os pods do iOS após adicionar ou atualizar o pacote:

npx pod-install

As versões 2.1 e posteriores incluem módulos nativos para Apple Pay, Google Pay e prevenção de fraudes. Consulte as notas de configuração nativa no repositório para os blocos de compatibilidade de dependência do Xcode e Android necessários para um projeto React Native "bare".

Expo

Adicione o plugin de configuração. Forneça apenas as informações de carteira e os provedores de prevenção de fraudes que sua aplicação utiliza.

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

Regere as projeções nativas após alterar a configuração do plugin:

npx expo prebuild

Como o SDK contém módulos nativos, teste-o em uma versão de desenvolvimento, em vez de usar o Expo Go.

Inicialize e monte o renderer#

Crie uma única instância do SDK e mantenha-a durante as renderizações. Monte apenas uma DeunaWidget para essa instância. O componente renderiza tanto os fluxos modais quanto os WebViews incorporados; chamar o inicializador apenas configura seu 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 pagamento#

Uso Mode.MODAL para um modal de propriedade do SDK. O modal previamente montado DeunaWidget responde ao 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);
    },
  },
});

Use o callback para atualizar a interface. Confirme e finalize o pedido final a partir de um webhook verificado, em vez de confiar apenas no estado da aplicação.

Incorpore um widget#

Inicialize com Mode.EMBEDDED e renderize DeunaWidget dentro do layout da tela, em vez de montá-lo ao lado da tela.

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

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

Não renderize a mesma instância do SDK em ambas as localizações. Desmontar DeunaWidget desliga seu controlador ativo.

Se sua aplicação possui o botão de pagamento, defina: hidePayButton: true, então chame isValid() e submit() a partir da ação do botão.

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

Experiências disponíveis#

O SDK também disponibiliza setCustomStyle(...), refetchOrder(), getWidgetState(), isValid(), submit()e close() para o controlador ativo.

Armazenamento de Pagamentos e Pagamento com Clique#

O Armazenamento de Pagamentos é a experiência padrão do Elements. Forneça um usuário autenticado userToken ou userInfo para o 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 o Click to Pay.

Apple Pay e Google Pay nativos#

Verifique a configuração do comerciante e o suporte do dispositivo antes de renderizar um botão de carteira. Os valores retornados são 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'));

Após a verificação, inicie a folha nativa a partir do toque no botão. Para o Apple Pay, mantenha essa chamada diretamente na ação do usuário.

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

O Apple Pay requer a entitlement e o identificador do comerciante. O Google Pay requer a ativação do comerciante e um dispositivo Android compatível. Consulte Apple Pague e Google Pay.

Continue uma ação pendente#

Utilize o mesmo token de pedido quando a DEUNA informar que o pagamento requer um desafio ou redirecionamento 3DS suportado.

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

Abra um cupom#

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

Gerenciar redirecionamentos externos#

O adaptador padrão abre URLs externas no React Native Linking. Métodos de pagamento que requerem Chrome Custom Tabs ou SFSafariViewController precisam de InAppBrowserAdapter fornecido durante a inicialização.

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

O adaptador deve implementar openUrl(url) e resolver após o navegador externo ser fechado. Consulte os exemplos de migração do adaptador no repositório.

Dados de dispositivos para prevenção de fraudes#

Pré-inicialize os provedores vinculados antes que o cliente faça o pagamento, e gere o identificador combinado quando necessário para sua ordem ou fluxo de risco.

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

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

Projetos Expo também devem listar o nome do provedor em letras minúsculas no plugin de configuração, por exemplo fraudProviders: ['mercadopago'], e executar expo prebuild. Projetos "bare" devem vincular a dependência nativa correspondente. Consulte Integrar impressão digital do dispositivo.

Referência do ciclo de vida e callbacks#

Exemplos e código-fonte oficiais#

Consulte ModalScreen.tsx, EmbeddedScreen.tsxe WalletsScreen.tsx Para fluxos completos e executáveis.