能否将PayOne API及JS SDK集成到Expo React Native应用中？

由于PayOne官方暂未提供针对Expo React Native的专用SDK，你可以通过以下两种方式实现集成：

一、直接调用PayOne REST API + WebView处理支付流程 #

这种方式通过请求PayOne接口生成支付跳转链接，再用WebView打开完成支付，最后监听回调结果。

代码示例： #

import { View, Button, Alert } from 'react-native';
import { WebView } from 'react-native-webview';
import { useState } from 'react';
import Constants from 'expo-constants';

export default function PayOnePaymentScreen() {
  const [paymentUrl, setPaymentUrl] = useState(null);
  const [showWebView, setShowWebView] = useState(false);

  const startPayment = async () => {
    try {
      // 从环境变量读取商户信息，建议在Expo的.env文件或app.json中配置
      const merchantId = Constants.expoConfig.extra.PAYONE_MERCHANT_ID;
      const apiKey = Constants.expoConfig.extra.PAYONE_API_KEY;
      const isTestMode = true; // 测试环境开关，生产环境改为false

      const apiEndpoint = isTestMode 
        ? 'https://api.pay1.de/v1/transactions' 
        : 'https://api.payone.com/v1/transactions';

      const response = await fetch(apiEndpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({
          merchantId,
          amount: 1000, // 金额单位为分，此处代表10.00欧元
          currency: 'EUR',
          reference: `ORDER-${Date.now()}`, // 自定义订单编号
          returnUrl: 'exp://your-app-url/payment-success', // 支付成功回调地址
          cancelUrl: 'exp://your-app-url/payment-cancel' // 支付取消回调地址
        })
      });

      const result = await response.json();
      if (result.status === 'success' && result.redirectUrl) {
        setPaymentUrl(result.redirectUrl);
        setShowWebView(true);
      } else {
        Alert.alert('支付初始化失败', result.message || '未知错误');
      }
    } catch (err) {
      Alert.alert('请求失败', '无法连接到支付服务器，请检查网络');
      console.error(err);
    }
  };

  const handlePaymentCallback = (navState) => {
    const currentUrl = navState.url;
    if (currentUrl.includes('payment-success')) {
      setShowWebView(false);
      Alert.alert('支付成功', '订单已完成支付');
      // 此处可添加：更新本地订单状态、跳转到订单详情页等逻辑
    } else if (currentUrl.includes('payment-cancel')) {
      setShowWebView(false);
      Alert.alert('支付取消', '你已取消本次支付');
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {!showWebView ? (
        <Button title="发起PayOne支付" onPress={startPayment} />
      ) : (
        <WebView
          source={{ uri: paymentUrl }}
          onNavigationStateChange={handlePaymentCallback}
          style={{ flex: 1, width: '100%' }}
        />
      )}
    </View>
  );
}

注意事项： #

• 密钥安全：生产环境下建议通过后端接口转发PayOne请求，避免在前端暴露API密钥。
• 环境配置：使用expo-constants读取环境变量，需在app.json的extra字段中配置相关参数，或使用dotenv管理.env文件。
• 回调验证：支付成功后，务必在后端调用PayOne的查询API验证交易状态，防止前端伪造回调。
• 深链接配置：确保returnUrl和cancelUrl是Expo应用可识别的深链接，需在app.json中配置scheme字段。

二、嵌入PayOne Hosted Payment Page #

如果不需要自定义支付界面，可直接在WebView中加载PayOne的托管支付页面：

1. 调用PayOne API获取支付会话令牌
2. 在WebView中加载https://checkout.payone.com/v2/?sessionToken=XXX（测试环境为https://checkout.pay1.de/v2/?sessionToken=XXX）
3. 监听WebView的导航变化，处理成功/取消回调

内容的提问来源于stack exchange，提问作者Haseeb Rajpoot