モバイル決済

Omiseのネイティブモバイル SDK を使用して、iOS、Android、React Native、Flutter 向けに組み込みのトークン化と最適化されたチェックアウトフローで、アプリ内決済を安全に受け付けます。

概要

Omise は、モバイルプラットフォーム向けのネイティブ SDK を提供しており、決済の収集、カードのトークン化、チェックアウトフローをモバイルアプリ内で完全に処理できます。SDK には、事前構築された UI コンポーネントとカスタム統合用の低レベル API が含まれています。

主な機能:

• ✅ ネイティブパフォーマンス - iOS と Android に最適化
• ✅ 安全なトークン化 - カードデータがサーバーに触れることはありません
• ✅ 事前構築 UI - すぐに使える決済フォーム
• ✅ カスタム統合 - UX の完全なコントロール
• ✅ 40以上の決済方法 - カード、ウォレット、QR、バンキング
• ✅ クロスプラットフォーム - React Native と Flutter のサポート
• ✅ 生体認証 - Touch ID、Face ID、指紋認証のサポート

利用可能な SDK

iOS SDK

iPhone および iPad アプリ向けのネイティブ Swift/Objective-C SDK:

機能:

• ネイティブ iOS 決済フォーム
• SwiftUI と UIKit のサポート
• Touch ID / Face ID 認証
• Apple Pay 統合
• iOS 13+ サポート

iOS SDK ガイドを見る →

Android SDK

Android アプリ向けのネイティブ Kotlin/Java SDK:

機能:

• Material Design コンポーネント
• Jetpack Compose のサポート
• 生体認証
• Google Pay 統合
• Android 5.0+ (API 21+) サポート

Android SDK ガイドを見る →

React Native

クロスプラットフォーム React Native モジュール:

機能:

• iOS と Android で動作
• JavaScript/TypeScript API
• 一貫したクロスプラットフォームの動作
• Expo と互換性あり

React Native ガイドを見る →

Flutter

クロスプラットフォーム Flutter プラグイン:

機能:

• Dart API
• iOS と Android のサポート
• ネイティブパフォーマンス
• Flutter アプリとのシームレスな統合

Flutter ガイドを見る →

比較

機能	iOS	Android	React Native	Flutter
言語	Swift	Kotlin	JavaScript	Dart
事前構築 UI	✅	✅	✅	✅
カスタム UI	✅	✅	✅	✅
カードトークン化	✅	✅	✅	✅
3D Secure	✅	✅	✅	✅
Apple Pay	✅	❌	✅ (iOS)	✅ (iOS)
Google Pay	❌	✅	✅ (Android)	✅ (Android)
生体認証	Touch/Face ID	指紋認証	両方	両方
最小バージョン	iOS 13+	API 21+	0.60+	2.0+

仕組み

セキュリティのメリット:

1. カードデータがアプリのサーバーに触れることはありません
2. PCI コンプライアンスが簡素化されます (SAQ A)
3. HTTPS 経由の安全なトークン化
4. デバイスにカードデータが保存されません

クイックスタート

iOS (Swift)

import OmiseSDK

// SDK を設定
let publicKey = "pkey_test_YOUR_PUBLIC_KEY"
OmiseSDK.configure(publicKey: publicKey)

// トークンを作成
let request = OmiseTokenRequest(
    name: "John Doe",
    number: "4242424242424242",
    expirationMonth: 12,
    expirationYear: 2027,
    securityCode: "123"
)

OmiseSDK.createToken(request) { result in
    switch result {
    case .success(let token):
        print("Token created: \(token.id)")
        // トークンをサーバーに送信
        self.chargeCard(tokenId: token.id)
    case .failure(let error):
        print("Error: \(error.localizedDescription)")
    }
}

Android (Kotlin)

import co.omise.android.OmiseSDK
import co.omise.android.models.Token

// SDK を設定
OmiseSDK.initialize("pkey_test_YOUR_PUBLIC_KEY")

// トークンを作成
val request = TokenRequest(
    name = "John Doe",
    number = "4242424242424242",
    expirationMonth = 12,
    expirationYear = 2027,
    securityCode = "123"
)

OmiseSDK.createToken(request) { result ->
    when (result) {
        is Result.Success -> {
            val token = result.data
            println("Token created: ${token.id}")
            // トークンをサーバーに送信
            chargeCard(token.id)
        }
        is Result.Error -> {
            println("Error: ${result.exception.message}")
        }
    }
}

React Native

import Omise from 'omise-react-native';

// SDK を設定
Omise.configure('pkey_test_YOUR_PUBLIC_KEY');

// トークンを作成
const cardData = {
    name: 'John Doe',
    number: '4242424242424242',
    expirationMonth: 12,
    expirationYear: 2027,
    securityCode: '123'
};

try {
    const token = await Omise.createToken(cardData);
    console.log('Token created:', token.id);
    // サーバーに送信
    await chargeCard(token.id);
} catch (error) {
    console.error('Error:', error.message);
}

Flutter

import 'package:omise_flutter/omise_flutter.dart';

// SDK を設定
OmiseFlutter.initialize(publicKey: 'pkey_test_YOUR_PUBLIC_KEY');

// トークンを作成
final cardData = CardData(
  name: 'John Doe',
  number: '4242424242424242',
  expirationMonth: 12,
  expirationYear: 2027,
  securityCode: '123',
);

try {
  final token = await OmiseFlutter.createToken(cardData);
  print('Token created: ${token.id}');
  // サーバーに送信
  await chargeCard(token.id);
} catch (e) {
  print('Error: $e');
}

サーバーサイド統合

モバイルアプリからトークンを受け取った後、サーバーでカードをチャージします:

// Node.js サーバー
const omise = require('omise')({
    secretKey: process.env.OMISE_SECRET_KEY
});

app.post('/charge', async (req, res) => {
    try {
        const { token, amount } = req.body;

        const charge = await omise.charges.create({
            amount: amount,
            currency: 'THB',
            card: token
        });

        res.json({
            success: true,
            charge_id: charge.id,
            status: charge.status
        });
    } catch (error) {
        res.status(500).json({
            success: false,
            error: error.message
        });
    }
});

決済方法

クレジット/デビットカード

すべての SDK はクレジットカードとデビットカードのトークン化をサポートしています:

// iOS
let card = OmiseCardRequest(
    name: "John Doe",
    number: "4242424242424242",
    expirationMonth: 12,
    expirationYear: 2027,
    securityCode: "123"
)

モバイルバンキング

モバイルバンキングリダイレクトフローのサポート:

// Android
val source = SourceRequest(
    type = "mobile_banking_kbank",
    amount = 100000,
    currency = "THB"
)

デジタルウォレット

ウォレット決済の統合:

// React Native
const source = await Omise.createSource({
    type: 'truemoney',
    amount: 50000,
    currency: 'THB',
    phoneNumber: '+66876543210'
});

Apple Pay (iOS のみ)

import PassKit

let paymentRequest = PKPaymentRequest()
paymentRequest.merchantIdentifier = "merchant.your.app"
paymentRequest.supportedNetworks = [.visa, .masterCard, .amex]
paymentRequest.merchantCapabilities = .capability3DS
paymentRequest.countryCode = "TH"
paymentRequest.currencyCode = "THB"
paymentRequest.paymentSummaryItems = [
    PKPaymentSummaryItem(label: "Total", amount: NSDecimalNumber(value: 100.00))
]

let controller = PKPaymentAuthorizationViewController(paymentRequest: paymentRequest)
controller?.delegate = self
present(controller!, animated: true)

Google Pay (Android のみ)

val paymentDataRequest = PaymentDataRequest.newBuilder()
    .setTransactionInfo(
        TransactionInfo.newBuilder()
            .setTotalPrice("100.00")
            .setTotalPriceStatus(WalletConstants.TOTAL_PRICE_STATUS_FINAL)
            .setCurrencyCode("THB")
            .build()
    )
    .build()

val task = paymentsClient.loadPaymentData(paymentDataRequest)

3D Secure サポート

すべての SDK は 3D Secure 認証をサポートしています:

iOS

// 3DS は自動的に処理されます
let charge = try await createCharge(tokenId: token.id)

if let authorizeUri = charge.authorizeUri {
    // 3DS 認証を表示
    let safariVC = SFSafariViewController(url: authorizeUri)
    present(safariVC, animated: true)
}

Android

// 3DS は自動的に処理されます
val charge = createCharge(token.id)

charge.authorizeUri?.let { uri ->
    // 3DS 認証を表示
    val intent = Intent(Intent.ACTION_VIEW, Uri.parse(uri))
    startActivity(intent)
}

ベストプラクティス

1. 公開鍵を安全に保存する

// iOS - Configuration を使用
struct Config {
    static let omisePublicKey = "pkey_test_YOUR_KEY"
}

// Android - BuildConfig を使用
val publicKey = BuildConfig.OMISE_PUBLIC_KEY

2. 入力を検証する

// React Native の検証
function validateCard(cardData) {
    if (cardData.number.length < 13) {
        throw new Error('Invalid card number');
    }

    if (cardData.expirationMonth < 1 || cardData.expirationMonth > 12) {
        throw new Error('Invalid expiration month');
    }

    const currentYear = new Date().getFullYear();
    if (cardData.expirationYear < currentYear) {
        throw new Error('Card expired');
    }

    return true;
}

3. エラーを適切に処理する

// iOS のエラー処理
OmiseSDK.createToken(request) { result in
    switch result {
    case .success(let token):
        self.processPayment(token: token)
    case .failure(let error):
        self.showError(message: self.userFriendlyMessage(for: error))
    }
}

func userFriendlyMessage(for error: Error) -> String {
    switch error {
    case OmiseError.invalidCard:
        return "カード情報を確認してください"
    case OmiseError.networkError:
        return "ネットワークエラー。もう一度お試しください"
    default:
        return "決済に失敗しました。もう一度お試しください"
    }
}

4. ローディング状態を表示する

// Android のローディング状態
viewModel.isLoading.observe(this) { isLoading ->
    if (isLoading) {
        progressBar.visibility = View.VISIBLE
        submitButton.isEnabled = false
    } else {
        progressBar.visibility = View.GONE
        submitButton.isEnabled = true
    }
}

5. 生体認証を使用する

// iOS の生体認証
import LocalAuthentication

func authenticateUser() {
    let context = LAContext()
    var error: NSError?

    if context.canEvaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, error: &error) {
        context.evaluatePolicy(.deviceOwnerAuthenticationWithBiometrics,
                               localizedReason: "決済を完了するために認証してください") { success, error in
            if success {
                self.processPayment()
            }
        }
    }
}

テスト

テストカード

テストモードでテストカードを使用します:

// 成功カード
let testCard = CardData(
    name: "Test Card",
    number: "4242424242424242",
    expirationMonth: 12,
    expirationYear: 2027,
    securityCode: "123"
)

すべてのテストカードを見る →

テストモード

// テストモードを有効にする (テスト公開鍵を使用)
let publicKey = "pkey_test_YOUR_TEST_KEY"
OmiseSDK.configure(publicKey: publicKey)

FAQ

どの SDK を使用すべきですか?

• ネイティブアプリ (Swift): iOS SDK
• ネイティブアプリ (Kotlin/Java): Android SDK
• React Native アプリ: React Native SDK
• Flutter アプリ: Flutter SDK

SDK は Expo で動作しますか?

はい、React Native SDK は Expo と互換性がありますが、一部の機能にはカスタム開発クライアント (Expo Go ではない) が必要です。

決済フォームの UI をカスタマイズできますか?

はい、すべての SDK には事前構築された UI コンポーネントと、完全にカスタムな UI 用の低レベル API の両方が用意されています。

PCI コンプライアンスが必要ですか?

トークン化に SDK を使用する場合、SAQ A (最も簡単なレベル) のみが必要です。カードデータがサーバーに触れることはありません。

定期決済用にカードを保存できますか?

はい、トークンを使用して顧客を作成し、将来のチャージ用にカードを保存できます:

// カードで顧客を作成
const customer = await omise.customers.create({
    email: 'user@example.com',
    card: tokenFromMobile
});

モバイルアプリで 3D Secure を処理するにはどうすればよいですか?

SDK は、Web ビューまたはブラウザで認証ページを開くことで、3DS を自動的に処理します。返り URL を処理するだけです。

iOS/Android の最小バージョンは何ですか?

• iOS SDK: iOS 13.0+
• Android SDK: Android 5.0 (API 21)+
• React Native: React Native 0.60+
• Flutter: Flutter 2.0+

関連リソース

• iOS SDK - 詳細な iOS 統合
• Android SDK - 詳細な Android 統合
• React Native SDK - React Native ガイド
• Flutter SDK - Flutter 統合
• テスト - モバイル統合のテスト
• 3D Secure - モバイル 3DS 実装

次のステップ

1. プラットフォームを選択
2. SDK をインストール
3. トークン化を実装
4. サーバーサイドチャージを追加
5. テストカードでテスト
6. 本番環境に移行