Panduan Integrasi Mobile

​

Prasyarat

• Akun Dodo Payments: Akun merchant aktif dengan akses API
• Kredensial API: API key dan webhook secret key dari dashboard Anda
• Proyek Aplikasi Mobile: Aplikasi Android, iOS, React Native, atau Flutter
• Server Backend: Untuk menangani pembuatan sesi checkout dengan aman

​

Alur Kerja Integrasi

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")
    request.setValue("Bearer \(userSessionToken)", forHTTPHeaderField: "Authorization")
    
    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")
        .header("Authorization", "Bearer $userSessionToken")
        .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',
        'Authorization': `Bearer ${userSessionToken}`,
      },
      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;
  }
};

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<String> getCheckoutUrl({
  required String productId,
  required String customerEmail,
  required String customerName,
}) async {
  final response = await http.post(
    Uri.parse('https://your-backend.com/api/create-checkout-session'),
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer $userSessionToken',
    },
    body: jsonEncode({
      'productId': productId,
      'customerEmail': customerEmail,
      'customerName': customerName,
    }),
  );

  if (response.statusCode != 200) {
    throw Exception('Failed to get checkout URL: ${response.statusCode}');
  }
  return jsonDecode(response.body)['checkout_url'] as String;
}

​

Pilih SDK Anda

​

Mendaftarkan Skema URL Callback

android {
    defaultConfig {
        manifestPlaceholders["dodoCallbackScheme"] = "myapp"
    }
}

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

{
  "expo": {
    "scheme": "myapp",
    "plugins": [
      [
        "@dodopayments/react-native-checkout",
        { "scheme": "myappcheckout" }
      ]
    ]
  }
}

​

Kustomisasi Tampilan

const result = await DodoCheckout.start({
  checkoutUrl,
  returnUrl: 'myapp://checkout/return',
  customization: {
    android: { toolbarColor: '#6366F1', closeButtonStyle: 'back' },
    ios: { presentationStyle: 'fullScreen', colorScheme: 'dark' },
  },
});

final result = await DodoCheckout.instance.start(
  CheckoutParams(
    checkoutUrl: Uri.parse(checkoutUrl),
    returnUrl: Uri.parse('myapp://checkout/return'),
    customization: BrowserCustomization(
      android: AndroidBrowserOptions(
        toolbarColor: Color(0xFF6366F1),
        closeButtonStyle: CloseButtonStyle.back,
      ),
      ios: IosBrowserOptions(
        presentationStyle: PresentationStyle.fullScreen,
        colorScheme: BrowserColorScheme.dark,
      ),
    ),
  ),
);

val result = DodoCheckout.start(
    activity,
    CheckoutParams(
        checkoutUrl = checkoutUrl,
        returnUrl = "myapp://checkout/return",
        customization = BrowserCustomization(
            toolbarColor = Color.parseColor("#6366F1"),
            closeButtonStyle = BrowserCustomization.CloseButtonStyle.BACK,
        )
    )
) { event -> }

let result = try await DodoCheckout.start(
    checkoutUrl: checkoutUrl,
    returnUrl: URL(string: "myapp://checkout/return")!,
    customization: BrowserCustomization(
        presentationStyle: .fullScreen,
        colorScheme: .dark
    )
)

​

Praktik Terbaik

• Keamanan: Jangan pernah menyertakan API key di aplikasi Anda. Buat checkout session di backend Anda dan teruskan hanya checkout_url yang dihasilkan kepada client.
• Otoritas: Perlakukan CheckoutResult.status sebagai petunjuk UI. Berikan akses hanya setelah backend Anda mengonfirmasi pembayaran.
• Pengalaman Pengguna: Tampilkan status loading saat backend Anda membuat session, dan tangani cancelled sebagai hasil normal, bukan error.
• Pengujian: Gunakan test mode dan test cards, lalu verifikasi round trip return-URL pada perangkat nyata maupun simulator.

​

Pemecahan Masalah

​

Masalah Umum

• Callback tidak pernah diterima: Scheme dalam returnUrl harus sesuai dengan yang Anda daftarkan. Di Android, itu adalah manifest placeholder dodoCallbackScheme; di iOS dan React Native, itu adalah URL type Info.plist.
• Checkout kembali ke browser, bukan ke aplikasi Anda (iOS): Anda belum meneruskan URL yang masuk. Panggil DodoCheckout.handleOpenURL(url) dari .onOpenURL, scene(_:openURLContexts:), atau listener Linking React Native.
• PLATFORM_ERROR di Android: Biasanya disebabkan oleh ketidaksesuaian scheme. Hal ini juga dapat muncul jika MainActivity Anda menetapkan android:taskAffinity="" (default bawaan flutter create), yang menyebabkan beberapa build OEM kehilangan checkout yang sedang berlangsung.
• ALREADY_IN_PROGRESS: Checkout masih terbuka. Tunggu atau tutup checkout sebelumnya sebelum memulai checkout lain.
• Build gagal dengan placeholder yang tidak ter-resolve: Anda telah menambahkan Android SDK tetapi belum menetapkan manifestPlaceholders["dodoCallbackScheme"].
• Pembayaran berhasil tetapi akses tidak diberikan: Hal ini wajar jika Anda mengandalkan hasil mobile. Berikan akses dari webhook payment.succeeded / subscription.active sebagai gantinya.

​

Sumber Daya Tambahan

• Panduan Integrasi Pembayaran
• Dokumentasi Webhook
• Proses Pengujian
• FAQ Teknis