Mobilintegrationsguide

Quick Start

Få din mobilbetalningsintegration igång i 4 enkla steg

Platform Examples

Fullständiga kodexempel för Android, iOS, React Native och Flutter

Förutsättningar

Innan du integrerar Dodo Payments i din mobilapp, se till att du har:

Dodo Payments-konto: Aktivt handelskonto med API-åtkomst
API-referenser: API-nyckel och webhook-hemlig nyckel från din instrumentpanel
Mobilapp-projekt: Android, iOS, React Native eller Flutter-applikation
Backend-server: För att säkert hantera skapandet av kassa-sessioner

Integrationsarbetsflöde

Mobilintegrationen följer en säker 4-stegsprocess där din backend hanterar API-anrop och din mobilapp hanterar användarupplevelsen.

Backend: Create Checkout Session

Checkout Session API Docs

Lär dig hur du skapar en kassa-session i din backend med Node.js, Python och mer. Se fullständiga exempel och parameterreferenser i den avsedda Checkout Sessions API-dokumentationen.

Säkerhet: Kassa-sessioner måste skapas på din backend-server, aldrig i mobilappen. Detta skyddar dina API-nycklar och säkerställer korrekt validering.

Mobil: Hämta kassa-URL

Din mobilapp anropar din backend för att hämta kassa-URL:en:

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

Säkerhet: Mobilappar kommunicerar endast med din backend, aldrig direkt med Dodo Payments API.

Mobile: Open Checkout in Browser

Öppna kassa-URL:en i en säker in-app-webbläsare för att hantera betalningar.

See platform-specific integration examples

Visa fullständig kod och installationsinstruktioner för mobilbetalningar på Android, iOS och Flutter.

Backend: Handle Payment Completion

Behandla betalningsslut via webhooks och omdirigeringsadresser för att bekräfta betalningsstatus.

Plattformspecifik integration

Välj din mobilplattform nedan för fullständiga implementations exempel:

Android
iOS
React Native
Flutter

Android-integration

Implementering av 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)
            }
        }
    }
}

iOS-integration

Implementering av 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)")
            }
        }
    }
}

Hantering av djup länkning

Konfigurera URL-scheman för att hantera omdirigeringar vid betalningsslutförande:1. Ställ in URL-scheman i Info.plist:

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

2. Hantera omdirigeringar i 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. Lyssna efter betalningsslutförande:

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

React Native-integration

Använda kassa-länkar (InAppBrowser)

Öppna Dodos värd kassa-sida i en in-app webbläsare.

Implementering av 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;

Hantering av djup länkning för betalningsåterkopplingar

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

Paketberoenden

Add this dependency to your package.json:

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

Installationskommandon

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

Android-konfiguration

Lägg till i android/app/src/main/AndroidManifest.xml:

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

iOS-konfiguration

Lägg till i 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>

Använd InAppBrowser för en inbyggd webbläsarupplevelse. Hantera djupa länkar för betalningsåterkopplingar.

Alternativ: Native Payment SDK

För en mer integrerad betalningsupplevelse med inbyggd UI och full anpassning erbjuder Dodo Payments ett React Native SDK.

Regional efterlevnad: In-app payment SDKs har regionala begränsningar. På iOS är inbyggda betalsdk endast lagliga inom EU (enligt DMA-villkor). På Android är de lagliga på User Choice Billing (UCB)-marknader. För andra regioner, använd checkout-länkarna ovan för att säkerställa efterlevnad av App Store och Play Store.

React Native SDK Integration Guide

Komplett guide för att integrera Dodos React Native SDK med inbyggda betalningsblad, fulla anpassningsmöjligheter och direkt betalningshantering. Inkluderar installation, implementering och testinstruktioner.

Granska App Store Fee Bypass Guide för att förstå regionala efterlevnadskrav för in-app-payment-integrationer.

Flutter-integration

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

Använd WebView för betalningslänkar. Hantera omdirigerings-URL:en för att upptäcka när betalning är slutförd.

Bästa praxis

Säkerhet: Spara aldrig API-nycklar i din appkod. Använd säker lagring och SSL-pinning.
Användarupplevelse: Visa laddningsindikatorer, hantera fel på ett smidigt sätt och ge tydliga meddelanden.
Testning: Använd testkort, simulera nätverksfel och testa på olika enheter.

Felsökning

Vanliga problem

WebView öppnar inte betalningslänken: Se till att betalningslänken är giltig och använder HTTPS.
Återkoppling mottagen inte: Kontrollera din återvändande URL och webhook-konfiguration.
API-nyckelfel: Verifiera att din API-nyckel är korrekt och har nödvändiga behörigheter.

Ytterligare resurser

För frågor eller support, kontakta support@dodopayments.com.

Integration Guides

Billing Deconstructions

Cookbooks

Quick Start

Platform Examples

Förutsättningar

Integrationsarbetsflöde

Checkout Session API Docs

See platform-specific integration examples

Plattformspecifik integration

Android-integration

Implementering av Chrome Custom Tabs

iOS-integration

Implementering av SFSafariViewController

Hantering av djup länkning

React Native-integration

Använda kassa-länkar (InAppBrowser)

Implementering av InAppBrowser

Hantering av djup länkning för betalningsåterkopplingar

Paketberoenden

Installationskommandon

Android-konfiguration

iOS-konfiguration

Alternativ: Native Payment SDK

React Native SDK Integration Guide

Flutter-integration

Bästa praxis

Felsökning

Vanliga problem

Ytterligare resurser

Integration Guides

Billing Deconstructions

Cookbooks

Documentation Index

Quick Start

Platform Examples

​Förutsättningar

​Integrationsarbetsflöde

Checkout Session API Docs

See platform-specific integration examples

​Plattformspecifik integration

​Android-integration

​Implementering av Chrome Custom Tabs

​iOS-integration

​Implementering av SFSafariViewController

​Hantering av djup länkning

​React Native-integration

​Använda kassa-länkar (InAppBrowser)

Implementering av InAppBrowser

​Hantering av djup länkning för betalningsåterkopplingar

​Paketberoenden

​Installationskommandon

​Android-konfiguration

​iOS-konfiguration

​Alternativ: Native Payment SDK

React Native SDK Integration Guide

​Flutter-integration

​Bästa praxis

​Felsökning

​Vanliga problem

​Ytterligare resurser

Förutsättningar

Integrationsarbetsflöde

Plattformspecifik integration

Android-integration

Implementering av Chrome Custom Tabs

iOS-integration

Implementering av SFSafariViewController

Hantering av djup länkning

React Native-integration

Använda kassa-länkar (InAppBrowser)

Hantering av djup länkning för betalningsåterkopplingar

Paketberoenden

Installationskommandon

Android-konfiguration

iOS-konfiguration

Alternativ: Native Payment SDK

Flutter-integration

Bästa praxis

Felsökning

Vanliga problem

Ytterligare resurser