「支払い作成時の 3Dセキュア」「顧客カードに対する 3Dセキュア」に対応

android/src/main/java/jp/pay/reactnative/PayjpReactNativePackage.kt

@@ -31,9 +31,11 @@ import com.facebook.react.uimanager.ViewManager
 class PayjpReactNativePackage : ReactPackage {
   override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
     val cardFormModule = PayjpCardFormModule(reactContext)
+    val threeDSecureProcessHandlerModule = PayjpThreeDSecureProcessHandlerModule(reactContext)
     return listOf<NativeModule>(
         PayjpModule(reactContext, cardFormModule),
-        cardFormModule
+        cardFormModule,
+        threeDSecureProcessHandlerModule
     )
   }
 

android/src/main/java/jp/pay/reactnative/PayjpThreeDSecureProcessHandlerModule.kt

@@ -0,0 +1,83 @@
+package jp.pay.reactnative
+
+import android.app.Activity
+import android.content.Intent
+import com.facebook.react.bridge.ActivityEventListener
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.module.annotations.ReactModule
+import jp.pay.android.verifier.PayjpVerifier
+import jp.pay.android.verifier.ui.PayjpThreeDSecureResult
+import jp.pay.android.verifier.ui.PayjpThreeDSecureResultCallback
+
+
+@ReactModule(name = PayjpThreeDSecureProcessHandlerModule.MODULE_NAME)
+class PayjpThreeDSecureProcessHandlerModule(
+  private val reactContext: ReactApplicationContext
+) : ReactContextBaseJavaModule(reactContext), ActivityEventListener {
+
+  companion object {
+    const val MODULE_NAME = "RNPAYThreeDSecureProcessHandler"
+  }
+
+  private var pendingPromise: Promise? = null
+
+  override fun getName(): String = MODULE_NAME
+
+  init {
+    reactContext.addActivityEventListener(this)
+  }
+
+  @ReactMethod
+  fun startThreeDSecureProcess(resourceId: String, promise: Promise) {
+    val activity: Activity? = reactContext.currentActivity
+    if (activity == null) {
+      promise.reject("NO_ACTIVITY", "Current activity is null")
+      return
+    }
+    if (pendingPromise != null) {
+      promise.reject("PENDING_OPERATION", "Another 3DS process is already in progress.")
+      return
+    }
+    this.pendingPromise = promise
+    PayjpVerifier.startThreeDSecureFlow(resourceId, activity)
+  }
+
+  override fun onActivityResult(
+    activity: Activity,
+    requestCode: Int,
+    resultCode: Int,
+    data: Intent?
+  ) {
+    pendingPromise?.let { promise ->
+      PayjpVerifier.handleThreeDSecureResult(requestCode, object : PayjpThreeDSecureResultCallback {
+        override fun onResult(result: PayjpThreeDSecureResult) {
+          when (result) {
+            is PayjpThreeDSecureResult.SuccessResourceId -> {
+              val resultMap = Arguments.createMap().apply {
+                putString("status", "completed")
+              }
+              promise.resolve(resultMap)
+            }
+            PayjpThreeDSecureResult.Canceled -> {
+              val resultMap = Arguments.createMap().apply {
+                putString("status", "canceled")
+              }
+              promise.resolve(resultMap)
+            }
+            else -> {
+              promise.reject("THREE_D_SECURE_FAILED", "Unknown ThreeDSecure result.")
+            }
+          }
+          pendingPromise = null
+        }
+      })
+    }
+  }
+
+  override fun onNewIntent(intent: Intent?) {}
+}

example/app.json

@@ -5,7 +5,7 @@
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
-    "scheme": "myapp",
+    "scheme": "jp.pay.example",
     "userInterfaceStyle": "automatic",
     "splash": {
       "image": "./assets/images/splash.png",
@@ -14,7 +14,7 @@
     },
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.anonymous.PAYJPExample",
+      "bundleIdentifier": "jp.pay.example.PAYJPExample",
       "infoPlist": {
         "NSCameraUsageDescription": "This app uses the camera to scan QR codes."
       },
@@ -29,15 +29,20 @@
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "package": "com.anonymous.PAYJPExample"
+      "package": "jp.pay.example.PAYJPExample"
     },
     "web": {
       "bundler": "metro",
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
-      "expo-router",
+      [
+        "expo-router",
+        {
+          "origin": "jp.pay.example://"
+        }
+      ],
       "@config-plugins/detox",
       "./config/add-android-dependencies",
       "./config/payjp-three-d-secure"

example/app/(tabs)/_layout.tsx

@@ -33,6 +33,21 @@ export default function TabLayout() {
                     ),
                 }}
             />
+            <Tabs.Screen
+                name="tds/index"
+                options={{
+                    title: '3Dセキュア',
+                    tabBarIcon: ({ color, focused }) => (
+                        <TabBarIcon name={focused ? 'shield' : 'shield-outline'} color={color} />
+                    ),
+                }}
+            />
+            <Tabs.Screen
+                name="tds/finish"
+                options={{
+                    href: null,
+                }}
+            />
         </Tabs>
     );
 }

example/app/(tabs)/index.tsx

@@ -54,6 +54,7 @@ export default function HomeScreen() {
                 PayjpCardForm.startCardForm({
                     cardFormType: formType,
                     extraAttributes: selectedOption.attributes,
+                    useThreeDSecure: true,
                 });
             },
         );

example/app/(tabs)/tds/finish.tsx

@@ -0,0 +1,67 @@
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+import React from 'react';
+import { useRouter } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function ThreeDSecureFinishScreen() {
+    const router = useRouter();
+
+    const handleReturn = () => {
+        router.replace('/');
+    };
+
+    return (
+        <SafeAreaView style={{ flex: 1 }}>
+            <ThemedView style={styles.container}>
+                <ThemedView style={styles.resultContainer}>
+                    <ThemedText style={styles.resultText}>3Dセキュア認証が終了しました。</ThemedText>
+                    <ThemedText>
+                        この結果をサーバーサイドに伝え、完了処理や結果のハンドリングをおこなってください。
+                    </ThemedText>
+                    <TouchableOpacity style={styles.button} onPress={handleReturn}>
+                        <ThemedText style={styles.buttonText}>戻る</ThemedText>
+                    </TouchableOpacity>
+                </ThemedView>
+            </ThemedView>
+            <StatusBar style="auto" />
+        </SafeAreaView>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 20,
+        paddingTop: 15,
+        justifyContent: 'center',
+    },
+    resultContainer: {
+        gap: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1,
+        paddingVertical: 40,
+    },
+    button: {
+        backgroundColor: '#4287f5',
+        padding: 14,
+        borderRadius: 8,
+        alignItems: 'center',
+        marginVertical: 8,
+        minWidth: 200,
+    },
+    buttonText: {
+        color: '#fff',
+        fontWeight: 'bold',
+        fontSize: 16,
+    },
+    resultText: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        textAlign: 'center',
+        marginBottom: 8,
+    },
+});

example/app/(tabs)/tds/index.tsx

@@ -0,0 +1,159 @@
+import { StyleSheet, TextInput, TouchableOpacity, View, ScrollView, SafeAreaView } from 'react-native';
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+import React, { useState } from 'react';
+import { PayjpThreeDSecure } from 'payjp-react-native';
+import { Linking } from 'react-native';
+import { StatusBar } from 'expo-status-bar';
+import { useRouter } from 'expo-router';
+
+export default function ThreeDSecureScreen() {
+    const [resourceId, setResourceId] = useState('');
+    const [resultMessage, setResultMessage] = useState('');
+    const router = useRouter();
+
+    const startThreeDSecure = async () => {
+        try {
+            if (!resourceId) {
+                setResultMessage('リソースIDを入力してください');
+                return;
+            }
+
+            setResultMessage('3Dセキュア認証を開始します...');
+            await PayjpThreeDSecure.startThreeDSecureProcess(
+                resourceId,
+                status => {
+                    if (status === PayjpThreeDSecure.ThreeDSecureProcessStatus.COMPLETED) {
+                        setResultMessage('3Dセキュア認証が完了しました');
+                        router.push('/tds/finish');
+                    } else if (status === PayjpThreeDSecure.ThreeDSecureProcessStatus.CANCELED) {
+                        setResultMessage('3Dセキュア認証がキャンセルされました');
+                    }
+                },
+                (error: { message: string; code: number }) => {
+                    console.error('3Dセキュア認証が失敗しました', error);
+                    setResultMessage(`エラー: ${error.message}`);
+                },
+            );
+        } catch (e: any) {
+            console.error('The 3D Secure process promise was rejected:', e);
+        }
+    };
+
+    const handleChargeTDSLink = () => {
+        Linking.openURL('https://pay.jp/docs/charge-tds');
+    };
+
+    const handleCustomerCardTDSLink = () => {
+        Linking.openURL('https://pay.jp/docs/customer-card-tds');
+    };
+
+    return (
+        <SafeAreaView style={{ flex: 1 }}>
+            <ScrollView>
+                <ThemedView style={styles.container}>
+                    <ThemedText type="subtitle" style={styles.title}>
+                        3Dセキュア
+                    </ThemedText>
+                    <ThemedView style={styles.formContainer}>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="リソースID (charge_xxxまたはcus_xxx_cad_xxx)"
+                            value={resourceId}
+                            onChangeText={setResourceId}
+                        />
+
+                        <TouchableOpacity style={styles.button} onPress={startThreeDSecure}>
+                            <ThemedText style={styles.buttonText}>3Dセキュア開始</ThemedText>
+                        </TouchableOpacity>
+
+                        {resultMessage ? <ThemedText style={styles.statusText}>{resultMessage}</ThemedText> : null}
+                        <ThemedText style={styles.instruction}>
+                            1. 下記を参考に、先にサーバーサイドで支払い、または3Dセキュアリクエストを作成してください。
+                        </ThemedText>
+
+                        <View style={styles.linkContainer}>
+                            <ThemedText style={styles.linkLabel}>支払い作成時の3Dセキュア：</ThemedText>
+                            <TouchableOpacity onPress={handleChargeTDSLink}>
+                                <ThemedText style={styles.urlText}>https://pay.jp/docs/charge-tds</ThemedText>
+                            </TouchableOpacity>
+                        </View>
+
+                        <View style={styles.linkContainer}>
+                            <ThemedText style={styles.linkLabel}>顧客カードに対する3Dセキュア：</ThemedText>
+                            <TouchableOpacity onPress={handleCustomerCardTDSLink}>
+                                <ThemedText style={styles.urlText}>https://pay.jp/docs/customer-card-tds</ThemedText>
+                            </TouchableOpacity>
+                        </View>
+
+                        <ThemedText style={styles.instruction}>
+                            2. 作成したリソースのIDを上記に入力して3Dセキュアを開始してください。
+                        </ThemedText>
+
+                        <ThemedText style={styles.instruction}>
+                            3.
+                            立ち上がった画面が閉じ、認証が終了したら、ドキュメントを参考にサーバーサイドにて結果を確認してください。
+                        </ThemedText>
+                    </ThemedView>
+                </ThemedView>
+            </ScrollView>
+            <StatusBar style="auto" />
+        </SafeAreaView>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 20,
+        paddingTop: 15,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        marginBottom: 16,
+    },
+    formContainer: {
+        gap: 20,
+    },
+    instruction: {
+        fontSize: 15,
+        lineHeight: 22,
+        marginBottom: 4,
+    },
+    linkContainer: {
+        marginBottom: 8,
+    },
+    linkLabel: {
+        marginBottom: 4,
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 8,
+        padding: 12,
+        backgroundColor: '#fff',
+        fontSize: 14,
+        marginVertical: 8,
+    },
+    button: {
+        backgroundColor: '#4287f5',
+        padding: 14,
+        borderRadius: 8,
+        alignItems: 'center',
+        marginVertical: 8,
+    },
+    buttonText: {
+        color: '#fff',
+        fontWeight: 'bold',
+        fontSize: 16,
+    },
+    urlText: {
+        color: '#4287f5',
+        textDecorationLine: 'underline',
+    },
+    statusText: {
+        marginTop: 8,
+        color: '#f44336',
+    },
+});