求助：如何在Ionic 6 Angular项目中集成多种支付网关？

一、选择印度可用的替代支付网关 #

先挑选当前可正常注册使用的网关，推荐以下几个选项：

• PhonePe：支持UPI、钱包等多种支付方式，新用户注册流程顺畅，提供完整的沙箱测试环境
• Google Pay（UPI集成）：可通过UPI Deep Link或官方SDK快速集成，无需复杂商户注册流程
• Amazon Pay：印度地区支持完善，商户注册门槛较低

二、通用集成步骤（以PhonePe为例） #

1. 安装必要依赖 #

如果使用Capacitor构建项目，先安装HTTP请求和内嵌浏览器插件：

# 安装Capacitor HTTP插件
npm install @capacitor/http
# 安装内嵌浏览器插件
npm install @capacitor/in-app-browser
# 同步到原生项目
npx cap sync

2. 配置网关密钥参数 #

在PhonePe开发者平台注册账号后，获取merchantId、saltKey、saltIndex等信息，在项目环境配置文件src/environments/environment.ts中添加：

export const environment = {
  production: false,
  phonePe: {
    merchantId: '你的商户ID',
    saltKey: '你的Salt密钥',
    saltIndex: '你的Salt索引',
    baseUrl: 'https://api-preprod.phonepe.com/apis/pg-sandbox/pg/v1/pay' // 沙箱环境地址
  }
};

3. 创建支付服务 #

生成一个专属服务处理支付逻辑：

ng generate service services/payment

在payment.service.ts中编写核心代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { Observable } from 'rxjs';
import * as CryptoJS from 'crypto-js';

@Injectable({
  providedIn: 'root'
})
export class PaymentService {

  constructor(private http: HttpClient) { }

  // 发起PhonePe支付请求
  initiatePhonePePayment(amount: number, orderId: string): Observable<any> {
    const payload = {
      merchantId: environment.phonePe.merchantId,
      merchantTransactionId: orderId,
      merchantUserId: 'USER_' + Date.now(), // 替换为实际用户ID
      amount: amount * 100, // PhonePe要求金额以派士为单位
      redirectUrl: '/payment-status', // 应用内跳转路由
      redirectMode: 'POST',
      callbackUrl: 'https://你的后端域名/payment-callback', // 后端回调地址
      paymentInstrument: { type: 'UPI_INTENT' }
    };

    // 生成签名
    const payloadStr = JSON.stringify(payload);
    const hash = CryptoJS.SHA256(payloadStr + '/pg/v1/pay' + environment.phonePe.saltKey).toString(CryptoJS.enc.Hex);
    const signature = `${hash}###${environment.phonePe.saltIndex}`;

    const headers = {
      'Content-Type': 'application/json',
      'X-VERIFY': signature
    };

    return this.http.post(environment.phonePe.baseUrl, payload, { headers });
  }
}

4. 在页面中调用支付服务 #

在支付页面payment.page.ts中实现触发逻辑：

import { Component } from '@angular/core';
import { PaymentService } from '../services/payment.service';
import { InAppBrowser } from '@capacitor/in-app-browser';

@Component({
  selector: 'app-payment',
  templateUrl: './payment.page.html',
  styleUrls: ['./payment.page.scss'],
})
export class PaymentPage {
  amount = 100; // 示例支付金额

  constructor(private paymentService: PaymentService) { }

  async startPhonePePayment() {
    const orderId = 'ORDER_' + Date.now(); // 生成唯一订单ID
    this.paymentService.initiatePhonePePayment(this.amount, orderId).subscribe(async (res) => {
      if (res.success) {
        // 打开支付页面
        await InAppBrowser.open({
          url: res.data.instrumentResponse.redirectInfo.url,
          windowName: '_blank'
        });
      } else {
        console.error('支付初始化失败:', res);
      }
    });
  }
}

页面模板payment.page.html添加触发按钮：

<ion-content class="ion-padding">
  <ion-button expand="block" (click)="startPhonePePayment()">使用PhonePe支付</ion-button>
</ion-content>

三、快速集成Google Pay（UPI Deep Link方式） #

无需SDK，直接构造UPI链接调用系统支付：

async startGooglePayPayment() {
  // 替换为你的商户VPA地址和信息
  const upiUrl = `upi://pay?pa=你的商户VPA@googlepay&pn=你的商户名称&am=${this.amount}&cu=INR&tn=订单描述`;
  await InAppBrowser.open({ url: upiUrl, windowName: '_system' });
}

四、关键注意事项 #

• 所有网关需先完成商户注册，获取合法密钥后再进行开发
• 优先在沙箱环境完成测试，确认流程无误后切换到生产环境
• 支付结果必须通过后端接口校验，禁止仅依赖前端返回值更新订单状态
• 确保Capacitor项目配置中允许访问网关API域名，避免跨域问题

内容的提问来源于stack exchange，提问作者Vinay Mali