Guia de Integração Móvel

Quick Start

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

Platform Examples

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: Create Checkout Session

Checkout Session API Docs

Aprenda como criar uma sessão de checkout no 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: Sessões de checkout devem ser criadas no servidor backend, nunca no aplicativo móvel. Isso protege suas chaves de API e garante validação adequada.

Mobile: Get Checkout URL

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: Apps móveis se comunicam apenas com seu backend, nunca diretamente com a API da Dodo Payments.

Mobile: Open Checkout in Browser

Abra a URL de checkout em um navegador seguro dentro do app para processar o pagamento.

See platform-specific integration examples

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

Backend: Handle Payment Completion

Processe 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", "customer@example.com", "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: "customer@example.com",
                    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 com 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,
        'customer@example.com',
        '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 essa 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 nativo. Trate 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 in-app têm restrições regionais. No iOS, os SDKs de pagamento nativos são legais apenas na UE (sob os termos da DMA). No Android, eles são permitidos nos mercados com 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.

React Native SDK Integration Guide

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

Review the App Store Fee Bypass Guide to understand regional compliance requirements for in-app payment integrations.

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', 'customer@example.com', '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. Trate 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 dúvidas ou suporte, entre em contato com support@dodopayments.com.

Integration Guides

Billing Deconstructions

Cookbooks

Quick Start

Platform Examples

Pré-requisitos

Fluxo de Integração

Checkout Session API Docs

See platform-specific integration examples

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 com 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

React Native SDK Integration Guide

Integração Flutter

Melhores Práticas

Solução de Problemas

Problemas Comuns

Recursos Adicionais

Integration Guides

Billing Deconstructions

Cookbooks

Documentation Index

Quick Start

Platform Examples

​Pré-requisitos

​Fluxo de Integração

Checkout Session API Docs

See platform-specific integration examples

​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 com 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

React Native SDK Integration Guide

​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 com 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