Guia de Integração Móvel

Início Rápido

Coloque sua integração de pagamento móvel em funcionamento em 4 etapas simples

Exemplos de Plataforma

Exemplos de código completos para Android, iOS, React Native e Flutter

Pré-requisitos

Antes de integrar o Dodo Payments em seu aplicativo móvel, certifique-se de que você possui:

Conta Dodo Payments: Conta de comerciante ativa com acesso à API
Credenciais da API: Chave da API e chave secreta do webhook do seu painel
Projeto de Aplicativo Móvel: Aplicativo Android, iOS, React Native ou Flutter
Servidor Backend: Para gerenciar de forma segura a criação de sessões de checkout

Fluxo de Integração

A integração móvel segue um processo seguro de 4 etapas onde seu backend gerencia chamadas de API e seu aplicativo móvel gerencia a experiência do usuário.

Backend: Criar Sessão de Checkout

Documentação da API de Sessão de Checkout

Aprenda como criar uma sessão de checkout em seu backend usando Node.js, Python e mais. Veja exemplos completos e referências de parâmetros na documentação dedicada da API de Sessões de Checkout.

Segurança: As sessões de checkout devem ser criadas em seu servidor backend, nunca no aplicativo móvel. Isso protege suas chaves de API e garante a validação adequada.

Móvel: Obter URL de Checkout

Seu aplicativo móvel chama seu backend para obter a URL de checkout:

iOS (Swift)
Android (Kotlin)
React Native (JavaScript)

func getCheckoutURL(productId: String, customerEmail: String, customerName: String) async throws -> String {
    let url = URL(string: "https://your-backend.com/api/create-checkout-session")!
    var request = URLRequest(url: url)
    request.httpMethod = "POST"
    request.setValue("application/json", forHTTPHeaderField: "Content-Type")
    
    let requestData: [String: Any] = [
        "productId": productId,
        "customerEmail": customerEmail,
        "customerName": customerName
    ]
    request.httpBody = try JSONSerialization.data(withJSONObject: requestData)
    
    let (data, _) = try await URLSession.shared.data(for: request)
    let response = try JSONDecoder().decode(CheckoutResponse.self, from: data)
    return response.checkout_url
}

suspend fun getCheckoutURL(productId: String, customerEmail: String, customerName: String): String {
    val client = OkHttpClient()
    val requestBody = JSONObject().apply {
        put("productId", productId)
        put("customerEmail", customerEmail)
        put("customerName", customerName)
    }.toString().toRequestBody("application/json".toMediaType())
    
    val request = Request.Builder()
        .url("https://your-backend.com/api/create-checkout-session")
        .post(requestBody)
        .build()
    
    val response = client.newCall(request).execute()
    val responseBody = response.body?.string()
    val jsonResponse = JSONObject(responseBody ?: "")
    return jsonResponse.getString("checkout_url")
}

const getCheckoutURL = async (productId, customerEmail, customerName) => {
  try {
    const response = await fetch('https://your-backend.com/api/create-checkout-session', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        productId,
        customerEmail,
        customerName
      })
    });
    
    const data = await response.json();
    return data.checkout_url;
  } catch (error) {
    console.error('Failed to get checkout URL:', error);
    throw error;
  }
};

Segurança: Aplicativos móveis se comunicam apenas com seu backend, nunca diretamente com a API do Dodo Payments.

Móvel: Abrir Checkout no Navegador

Abra a URL de checkout em um navegador seguro dentro do aplicativo para processamento de pagamento.

Veja exemplos de integração específicos da plataforma

Veja o código completo e as instruções de configuração para pagamentos móveis Android, iOS e Flutter.

Backend: Lidar com a Conclusão do Pagamento

Processar a conclusão do pagamento via webhooks e URLs de redirecionamento para confirmar o status do pagamento.

Integração Específica da Plataforma

Escolha sua plataforma móvel abaixo para exemplos completos de implementação:

Android
iOS
React Native
Flutter

Integração Android

Implementação de Chrome Custom Tabs

// Add Chrome Custom Tabs dependency to build.gradle
implementation 'androidx.browser:browser:1.5.0'

// In your Activity
class PaymentActivity : AppCompatActivity() {
    private var customTabsSession: CustomTabsSession? = null
    private var customTabsClient: CustomTabsClient? = null
    private var customTabsServiceConnection: CustomTabsServiceConnection? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Initialize Custom Tabs
        customTabsServiceConnection = object : CustomTabsServiceConnection() {
            override fun onCustomTabsServiceConnected(name: ComponentName, client: CustomTabsClient) {
                customTabsClient = client
                customTabsClient?.warmup(0L)
                customTabsSession = customTabsClient?.newSession(object : CustomTabsCallback() {
                    override fun onNavigationEvent(navigationEvent: Int, extras: Bundle?) {
                        // Handle navigation events
                    }
                })
            }
            override fun onServiceDisconnected(name: ComponentName) {
                customTabsClient = null
            }
        }
        CustomTabsClient.bindCustomTabsService(
            this,
            "com.android.chrome",
            customTabsServiceConnection!!
        )
        // Get checkout URL from backend and launch
        lifecycleScope.launch {
            try {
                val checkoutURL = getCheckoutURL("prod_123", "[email protected]", "Customer Name")
                val customTabsIntent = CustomTabsIntent.Builder(customTabsSession)
                    .build()
                customTabsIntent.launchUrl(this@PaymentActivity, Uri.parse(checkoutURL))
            } catch (e: Exception) {
                // Handle error
                Log.e("PaymentActivity", "Failed to get checkout URL", e)
            }
        }
    }
}

Integração iOS

Implementação de SFSafariViewController

import SafariServices
class PaymentViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        Task {
            do {
                let checkoutURL = try await getCheckoutURL(
                    productId: "prod_123",
                    customerEmail: "[email protected]",
                    customerName: "Customer Name"
                )
                if let url = URL(string: checkoutURL) {
                    let safariVC = SFSafariViewController(url: url)
                    present(safariVC, animated: true, completion: nil)
                }
            } catch {
                // Handle error
                print("Failed to get checkout URL: \(error)")
            }
        }
    }
}

Tratamento de Deep Link

Configure esquemas de URL para lidar com redirecionamentos de conclusão de pagamento:1. Configure esquemas de URL em Info.plist:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <string>myapp</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

2. Lide com redirecionamentos em AppDelegate:

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
    if url.scheme == "myapp" && url.host == "payment-status" {
        NotificationCenter.default.post(name: .paymentCompleted, object: url)
        return true
    }
    return false
}

3. Escute a conclusão do pagamento:

NotificationCenter.default.addObserver(self, selector: #selector(handlePaymentCompletion(_:)), name: .paymentCompleted, object: nil)

@objc func handlePaymentCompletion(_ notification: Notification) {
    if let url = notification.object as? URL {
        safariVC?.dismiss(animated: true)
        // Parse payment status from URL parameters
        let components = URLComponents(url: url, resolvingAgainstBaseURL: false)
        let paymentId = components?.queryItems?.first(where: { $0.name == "payment_id" })?.value
        let status = components?.queryItems?.first(where: { $0.name == "status" })?.value
        // Handle payment completion
    }
}

Integração React Native

Usando Links de Checkout (InAppBrowser)

Abra a página de checkout hospedada do Dodo em um navegador dentro do aplicativo.

Implementação de InAppBrowser

import React from 'react';
import { View, TouchableOpacity, Text, Alert } from 'react-native';
import { InAppBrowser } from 'react-native-inappbrowser-reborn';

const PaymentButton = ({ productId, onPaymentComplete }) => {
  const openPaymentLink = async () => {
    try {
      // Get checkout URL from backend
      const checkoutURL = await getCheckoutURL(
        productId,
        '[email protected]',
        'Customer Name'
      );
      
      const result = await InAppBrowser.open(checkoutURL, {
        // iOS options
        dismissButtonStyle: 'cancel',
        preferredBarTintColor: '#453AA4',
        preferredControlTintColor: 'white',
        readerMode: false,
        animated: true,
        modalPresentationStyle: 'fullScreen',
        modalTransitionStyle: 'coverVertical',
        modalEnabled: true,
        enableBarCollapsing: false,
        // Android options
        showTitle: true,
        toolbarColor: '#453AA4',
        secondaryToolbarColor: 'black',
        navigationBarColor: 'black',
        navigationBarDividerColor: 'white',
        enableUrlBarHiding: true,
        enableDefaultShare: true,
        forceCloseOnRedirection: false,
        animations: {
          startEnter: 'slide_in_right',
          startExit: 'slide_out_left',
          endEnter: 'slide_in_left',
          endExit: 'slide_out_right'
        },
        headers: {
          'my-custom-header': 'my custom header value'
        }
      });

      // Handle payment completion based on result
      if (result.type === 'dismiss') {
        // User dismissed the browser
        console.log('Payment browser dismissed');
      }
    } catch (error) {
      Alert.alert('Error', 'Failed to open payment page');
      console.error('InAppBrowser error:', error);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <TouchableOpacity
        style={{
          backgroundColor: '#007AFF',
          padding: 15,
          borderRadius: 8,
          alignItems: 'center'
        }}
        onPress={openPaymentLink}
      >
        <Text style={{ color: 'white', fontSize: 16, fontWeight: 'bold' }}>
          Pay Now
        </Text>
      </TouchableOpacity>
    </View>
  );
};

export default PaymentButton;

Tratamento de Deep Link para Callbacks de Pagamento

// App.js or your main component
import React, { useEffect } from 'react';
import { Linking } from 'react-native';

const App = () => {
  useEffect(() => {
    // Handle deep links when app is already running
    const handleDeepLink = (url) => {
      if (url.includes('payment-status')) {
        const urlParams = new URLSearchParams(url.split('?')[1]);
        const paymentId = urlParams.get('payment_id');
        const status = urlParams.get('status');
        
        // Handle payment completion
        handlePaymentCallback(paymentId, status);
      }
    };

    // Listen for deep links
    const subscription = Linking.addEventListener('url', ({ url }) => {
      handleDeepLink(url);
    });

    // Handle deep link if app was opened from a link
    Linking.getInitialURL().then((url) => {
      if (url) {
        handleDeepLink(url);
      }
    });

    return () => subscription?.remove();
  }, []);

  const handlePaymentCallback = (paymentId, status) => {
    if (status === 'succeeded') {
      // Navigate to success screen or show success message
      console.log('Payment successful:', paymentId);
    } else {
      // Handle payment failure
      console.log('Payment failed:', paymentId);
    }
  };

  // Your app components...
};

export default App;

Dependências de Pacote

Adicione esta dependência ao seu package.json:

{
  "dependencies": {
    "react-native-inappbrowser-reborn": "^6.4.0"
  }
}

Comandos de Instalação

# Install InAppBrowser
npm install react-native-inappbrowser-reborn
cd ios && pod install

Configuração Android

Adicione ao android/app/src/main/AndroidManifest.xml:

<activity
  android:name="com.reactnativeinappbrowserreborn.InAppBrowserActivity"
  android:theme="@style/Theme.AppCompat.Dialog"
  android:exported="false" />

Configuração iOS

Adicione ao ios/YourApp/Info.plist:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLName</key>
    <string>myapp</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>myapp</string>
    </array>
  </dict>
</array>

Use InAppBrowser para uma experiência de navegador nativa. Lide com deep links para callbacks de pagamento.

Alternativa: SDK de Pagamento Nativo

Para uma experiência de pagamento mais integrada com UI nativa e total personalização, o Dodo Payments oferece um SDK para React Native.

Conformidade Regional: SDKs de pagamento em aplicativos têm restrições regionais. No iOS, SDKs de pagamento nativos são legais apenas na UE (sob os termos do DMA). No Android, são legais em mercados de User Choice Billing (UCB). Para outras regiões, use a abordagem de links de checkout acima para garantir conformidade com a App Store e a Play Store.

Guia de Integração do SDK React Native

Guia completo para integrar o SDK React Native do Dodo com folhas de pagamento nativas, opções de personalização total e gerenciamento direto de pagamentos. Inclui instruções de configuração, implementação e testes.

Revise o Guia de Bypass de Taxas da App Store para entender os requisitos de conformidade regional para integrações de pagamento em aplicativos.

Integração Flutter

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

Future<String> getCheckoutURL(String productId, String customerEmail, String customerName) async {
  final response = await http.post(
    Uri.parse('https://your-backend.com/api/create-checkout-session'),
    headers: {'Content-Type': 'application/json'},
    body: json.encode({
      'productId': productId,
      'customerEmail': customerEmail,
      'customerName': customerName,
    }),
  );
  
  if (response.statusCode == 200) {
    final data = json.decode(response.body);
    return data['checkout_url'];
  } else {
    throw Exception('Failed to get checkout URL: ${response.statusCode}');
  }
}
class PaymentScreen extends StatefulWidget {
  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}
class _PaymentScreenState extends State<PaymentScreen> {
  late WebViewController _controller;
  String? checkoutURL;
  
  @override
  void initState() {
    super.initState();
    _getCheckoutURL();
  }
  
  Future<void> _getCheckoutURL() async {
    try {
      final url = await getCheckoutURL('prod_123', '[email protected]', 'Customer Name');
      setState(() {
        checkoutURL = url;
      });
    } catch (e) {
      // Handle error
      print('Failed to get checkout URL: $e');
    }
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Payment')),
      body: checkoutURL == null 
        ? Center(child: CircularProgressIndicator())
        : WebView(
        initialUrl: checkoutURL,
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
        },
        navigationDelegate: (NavigationRequest request) {
          if (request.url.contains('payment_id') && request.url.contains('status')) {
            // Handle payment completion
            final uri = Uri.parse(request.url);
            final paymentId = uri.queryParameters['payment_id'];
            final status = uri.queryParameters['status'];
            handlePaymentCompletion(paymentId, status);
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      ),
    );
  }
  void handlePaymentCompletion(String? paymentId, String? status) {
    if (status == 'succeeded') {
      // Payment successful
    } else {
      // Payment failed
    }
  }
}

Use WebView para links de pagamento. Lide com a URL de redirecionamento para detectar a conclusão do pagamento.

Melhores Práticas

Segurança: Nunca armazene chaves de API no código do seu aplicativo. Use armazenamento seguro e SSL pinning.
Experiência do Usuário: Mostre indicadores de carregamento, trate erros de forma adequada e forneça mensagens claras.
Testes: Use cartões de teste, simule erros de rede e teste em vários dispositivos.

Solução de Problemas

Problemas Comuns

WebView não abrindo link de pagamento: Certifique-se de que o link de pagamento é válido e usa HTTPS.
Callback não recebido: Verifique sua URL de retorno e configuração de webhook.
Erros de chave da API: Verifique se sua chave da API está correta e possui as permissões necessárias.

Recursos Adicionais

Para perguntas ou suporte, entre em contato com [email protected].

Integration Guides

Cookbooks

Início Rápido

Exemplos de Plataforma

Pré-requisitos

Fluxo de Integração

Documentação da API de Sessão de Checkout

Veja exemplos de integração específicos da plataforma

Integração Específica da Plataforma

Integração Android

Implementação de Chrome Custom Tabs

Integração iOS

Implementação de SFSafariViewController

Tratamento de Deep Link

Integração React Native

Usando Links de Checkout (InAppBrowser)

Implementação de InAppBrowser

Tratamento de Deep Link para Callbacks de Pagamento

Dependências de Pacote

Comandos de Instalação

Configuração Android

Configuração iOS

Alternativa: SDK de Pagamento Nativo

Guia de Integração do SDK React Native

Integração Flutter

Melhores Práticas

Solução de Problemas

Problemas Comuns

Recursos Adicionais

Integration Guides

Cookbooks

Início Rápido

Exemplos de Plataforma

​Pré-requisitos

​Fluxo de Integração

Documentação da API de Sessão de Checkout

Veja exemplos de integração específicos da plataforma

​Integração Específica da Plataforma

​Integração Android

​Implementação de Chrome Custom Tabs

​Integração iOS

​Implementação de SFSafariViewController

​Tratamento de Deep Link

​Integração React Native

​Usando Links de Checkout (InAppBrowser)

Implementação de InAppBrowser

​Tratamento de Deep Link para Callbacks de Pagamento

​Dependências de Pacote

​Comandos de Instalação

​Configuração Android

​Configuração iOS

​Alternativa: SDK de Pagamento Nativo

Guia de Integração do SDK React Native

​Integração Flutter

​Melhores Práticas

​Solução de Problemas

​Problemas Comuns

​Recursos Adicionais

Pré-requisitos

Fluxo de Integração

Integração Específica da Plataforma

Integração Android

Implementação de Chrome Custom Tabs

Integração iOS

Implementação de SFSafariViewController

Tratamento de Deep Link

Integração React Native

Usando Links de Checkout (InAppBrowser)

Tratamento de Deep Link para Callbacks de Pagamento

Dependências de Pacote

Comandos de Instalação

Configuração Android

Configuração iOS

Alternativa: SDK de Pagamento Nativo

Integração Flutter

Melhores Práticas

Solução de Problemas

Problemas Comuns

Recursos Adicionais