ข้ามไปยังเนื้อหาหลัก

การชำระเงินบนมือถือ

รับการชำระเงินในแอปอย่างปลอดภัยด้วย SDK มือถือดั้งเดิมของ Omise สำหรับ 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​

SDK Swift/Objective-C ดั้งเดิมสำหรับแอป iPhone และ iPad:

คุณสมบัติ:

  • แบบฟอร์มการชำระเงิน iOS ดั้งเดิม
  • รองรับ SwiftUI และ UIKit
  • การตรวจสอบ Touch ID / Face ID
  • การรวม Apple Pay
  • รองรับ iOS 13+

ดูคู่มือ iOS SDK →

Android SDK​

SDK Kotlin/Java ดั้งเดิมสำหรับแอป Android:

คุณสมบัติ:

  • ส่วนประกอบ Material Design
  • รองรับ Jetpack Compose
  • การตรวจสอบด้วยชีวภาพ
  • การรวม Google Pay
  • รองรับ Android 5.0+ (API 21+)

ดูคู่มือ Android SDK →

React Native​

โมดูล React Native ข้ามแพลตฟอร์ม:

คุณสมบัติ:

  • ทำงานบน iOS และ Android
  • API JavaScript/TypeScript
  • พฤติกรรมข้ามแพลตฟอร์มที่สอดคล้องกัน
  • เข้ากันได้กับ Expo

ดูคู่มือ React Native →

Flutter​

ปลั๊กอิน Flutter ข้ามแพลตฟอร์ม:

คุณสมบัติ:

  • Dart API
  • รองรับ iOS และ Android
  • ประสิทธิภาพดั้งเดิม
  • การรวมที่ราบรื่นกับแอป Flutter

ดูคู่มือ Flutter →

การเปรียบเทียบ​

คุณสมบัติiOSAndroidReact NativeFlutter
ภาษาSwiftKotlinJavaScriptDart
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"
)

Mobile Banking​

รองรับขั้นตอนการเปลี่ยนเส้นทาง mobile banking:

// 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. เก็บ Public Key อย่างปลอดภัย​

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

ดูบัตรทดสอบทั้งหมด →

โหมดทดสอบ​

// เปิดใช้งานโหมดทดสอบ (ใช้ test public key)
let publicKey = "pkey_test_YOUR_TEST_KEY"
OmiseSDK.configure(publicKey: publicKey)

คำถามที่พบบ่อย​

ฉันควรใช้ SDK ไหน?
  • แอปดั้งเดิม (Swift): iOS SDK
  • แอปดั้งเดิม (Kotlin/Java): Android SDK
  • แอป React Native: React Native SDK
  • แอป Flutter: Flutter SDK
SDK ทำงานกับ Expo หรือไม่?

ใช่ React Native SDK เข้ากันได้กับ Expo แต่คุณจะต้องใช้ custom development client (ไม่ใช่ Expo Go) สำหรับคุณสมบัติบางอย่าง

ฉันสามารถปรับแต่ง UI ของแบบฟอร์มการชำระเงินได้หรือไม่?

ได้ SDK ทั้งหมดมีทั้งส่วนประกอบ UI ที่สร้างไว้ล่วงหน้าและ API ระดับต่ำสำหรับ UI แบบกำหนดเองอย่างสมบูรณ์

ฉันต้องปฏิบัติตาม PCI หรือไม่?

การใช้ SDK สำหรับการทำโทเค็นต้องใช้เพียง SAQ A (ระดับที่ง่ายที่สุด) ข้อมูลบัตรไม่ต้องผ่านเซิร์ฟเวอร์ของคุณ

ฉันสามารถบันทึกบัตรสำหรับการชำระเงินแบบเรียกซ้ำได้หรือไม่?

ได้ ใช้โทเค็นเพื่อสร้างลูกค้าและบันทึกบัตรสำหรับการเรียกเก็บเงินในอนาคต:

// สร้างลูกค้าด้วยบัตร
const customer = await omise.customers.create({
    email: 'user@example.com',
    card: tokenFromMobile
});
ฉันจะจัดการ 3D Secure ในแอปมือถือได้อย่างไร?

SDK จัดการ 3DS โดยอัตโนมัติโดยการเปิดหน้าการตรวจสอบใน web view หรือเบราว์เซอร์ คุณเพียงแค่ต้องจัดการ return 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+

แหล่งข้อมูลที่เกี่ยวข้อง​

ขั้นตอนต่อไป​

  1. เลือกแพลตฟอร์มของคุณ
  2. ติดตั้ง SDK
  3. ใช้งานการทำโทเค็น
  4. เพิ่มการเรียกเก็บเงินฝั่งเซิร์ฟเวอร์
  5. ทดสอบด้วยบัตรทดสอบ
  6. เปิดใช้งานจริง