Panduan Integrasi Mobile

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

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

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
}

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

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;

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

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

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

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

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

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