求助：如何在React Native中集成Global Payments API实现支付？

API 探路者

2026-7-2

React Native集成Global Payments API的可行方案

方案一：原生桥接（iOS + Android）

Global Payments没有官方React Native SDK，最可靠的方式是桥接其原生SDK，以下是分步实现：

iOS端操作

配置CocoaPods，在项目Podfile中添加依赖：
```
pod 'GlobalPayments-iOS'
```
执行pod install完成安装。

创建原生模块封装支付逻辑，示例代码（Swift）：

import GlobalPayments_iOS
import React

@objc(GlobalPaymentsModule)
class GlobalPaymentsModule: NSObject, RCTBridgeModule {
  static func moduleName() -> String { "GlobalPaymentsModule" }
  static func requiresMainQueueSetup() -> Bool { true }

  @objc func createPaymentToken(_ cardNumber: String, expiryMonth: String, expiryYear: String, cvv: String, resolver resolve: RCTPromiseResolveBlock, rejecter reject: RCTPromiseRejectBlock) {
    let card = CreditCardData()
    card.number = cardNumber
    card.expMonth = expiryMonth
    card.expYear = expiryYear
    card.cvn = cvv

    ServicesConfig.configure { config in
      config.secretApiKey = "YOUR_SECRET_API_KEY"
      config.environment = .sandbox // 生产环境切换为.production
    }

    card.tokenize { response, error in
      if let err = error {
        reject("TOKEN_ERROR", err.localizedDescription, err)
        return
      }
      resolve(response?.token ?? "")
    }
  }
}

在AppDelegate.m或Swift桥接文件中注册模块，确保React Native能调用到该模块。

Android端操作

在app级build.gradle中添加依赖：

implementation 'com.globalpayments:gp-android-sdk:2.+'

创建原生模块封装支付逻辑，示例代码（Java）：

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;
import com.global.api.ServicesContainer;
import com.global.api.entities.CreditCardData;
import com.global.api.enums.Environment;

public class GlobalPaymentsModule extends ReactContextBaseJavaModule {
  public GlobalPaymentsModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() { return "GlobalPaymentsModule"; }

  @ReactMethod
  public void createPaymentToken(String cardNumber, String expiryMonth, String expiryYear, String cvv, Promise promise) {
    try {
      ServicesContainer.configureService(config -> {
        config.setSecretApiKey("YOUR_SECRET_API_KEY");
        config.setEnvironment(Environment.SANDBOX);
      });

      CreditCardData card = new CreditCardData();
      card.setNumber(cardNumber);
      card.setExpMonth(expiryMonth);
      card.setExpYear(expiryYear);
      card.setCvn(cvv);

      card.tokenize(response -> promise.resolve(response.getToken()), error -> promise.reject("TOKEN_ERROR", error.getMessage()));
    } catch (Exception e) {
      promise.reject("EXCEPTION", e.getMessage());
    }
  }
}

创建GlobalPaymentsPackage.java注册模块，并在MainApplication.java的getPackages方法中添加该Package。

React Native端调用

import { NativeModules } from 'react-native';
const { GlobalPaymentsModule } = NativeModules;

// 调用示例
const generatePaymentToken = async () => {
  try {
    const token = await GlobalPaymentsModule.createPaymentToken(
      "4111111111111111", // 测试卡号
      "12",
      "25",
      "123"
    );
    console.log("获取到支付Token：", token);
    // 将Token传给后端完成支付流程
  } catch (err) {
    console.error("Token生成失败：", err);
  }
};

方案二：WebView调用Web API

如果不想做原生桥接，可通过WebView加载Global Payments的Web SDK实现：

创建本地HTML文件payment.html（放在项目assets目录）：

<!DOCTYPE html>
<html>
<head>
  <script src="https://api.globalpay.com/js/globalpayments.js"></script>
</head>
<body>
  <script>
    window.addEventListener('message', async (event) => {
      if (event.data.type === 'GENERATE_TOKEN') {
        const { cardNumber, expiryMonth, expiryYear, cvv } = event.data.payload;
        try {
          GlobalPayments.configure({
            apiKey: 'YOUR_PUBLIC_API_KEY',
            environment: 'sandbox'
          });

          const card = new GlobalPayments.CreditCardData();
          card.number = cardNumber;
          card.expMonth = expiryMonth;
          card.expYear = expiryYear;
          card.cvn = cvv;

          const res = await card.tokenize();
          window.ReactNativeWebView.postMessage(JSON.stringify({
            success: true,
            token: res.token
          }));
        } catch (err) {
          window.ReactNativeWebView.postMessage(JSON.stringify({
            success: false,
            error: err.message
          }));
        }
      }
    });
  </script>
</body>
</html>

React Native端使用WebView交互：

import { WebView, Button } from 'react-native';
import { useRef } from 'react';

const PaymentWebView = () => {
  const webViewRef = useRef(null);

  const handleMessage = (event) => {
    const data = JSON.parse(event.nativeEvent.data);
    if (data.success) {
      console.log("WebView获取Token：", data.token);
    } else {
      console.error("WebView生成Token失败：", data.error);
    }
  };

  const sendCardData = () => {
    webViewRef.current.postMessage(JSON.stringify({
      type: 'GENERATE_TOKEN',
      payload: {
        cardNumber: '4111111111111111',
        expiryMonth: '12',
        expiryYear: '25',
        cvv: '123'
      }
    }));
  };

  return (
    <>
      <WebView
        ref={webViewRef}
        source={require('./assets/payment.html')}
        onMessage={handleMessage}
        javaScriptEnabled={true}
      />
      <Button title="生成支付Token" onPress={sendCardData} />
    </>
  );
};

export default PaymentWebView;

关键注意事项

密钥安全：原生SDK用的是Secret Key，绝对不能在前端代码硬编码，建议通过环境变量或后端下发；Web SDK用的是Public Key，可安全暴露在前端。
环境切换：测试用sandbox环境，上线前切换为production。
合规要求：不要存储用户卡号、CVV等敏感信息，仅用生成的Token完成后续交易，符合PCI-DSS规范。
错误处理：务必捕获并处理网络异常、卡号格式错误、过期等场景的错误信息，提升用户体验。

内容的提问来源于stack exchange，提问作者Ahmad Fahim