前端支付集成宝典：主流支付方式全端接入指南与代码实例

最新推荐文章于 2026-06-28 21:24:42 发布

原创最新推荐文章于 2026-06-28 21:24:42 发布 · 440 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端

还在为接入支付发愁？本文汇总了微信、支付宝、PayPal、Stripe、银联五大主流支付的全端接入方法，包含小程序、App（React Native/Flutter/原生）、H5等场景的完整示例代码，助你快速打通支付环节！

主流支付的接入流程虽各有不同，但都遵循“服务端下单 + 前端调起支付”的核心模式。为保障接入顺利，请务必先分清前端（负责发起请求和接收回调）与后端（负责签名、下单等核心逻辑）各自的职责。

💳 微信支付

微信支付根据运行环境的不同，前端接入方式主要分为以下三类。核心流程：后端调用下单接口获取 prepay_id，前端使用该参数调起支付。

场景	核心前端API	关键前置步骤
小程序内支付	`wx.requestPayment`	小程序已上线，并开通微信支付。
公众号内支付（JSAPI）	`WeixinJSBridge.invoke`	在商户平台配置JSAPI支付授权目录。
APP支付	微信OpenSDK / 跨端插件	需在微信开放平台注册应用，获取AppID并完成应用签名校验。

小程序支付示例

wx.request({
  url: 'https://yourdomain.com/api/create-order',
  method: 'POST',
  data: { productId: '12345' },
  success(res) {
    wx.requestPayment({
      timeStamp: res.data.timeStamp,
      nonceStr: res.data.nonceStr,
      package: res.data.package, // 'prepay_id=***'
      signType: 'RSA',
      paySign: res.data.paySign,
      success: (res) => { /* 支付成功，建议查询订单确认 */ },
      fail: (err) => { /* 支付失败或取消 */ }
    });
  }
});

React Native 接入示例 (使用 react-native-wechat)

import * as WeChat from 'react-native-wechat';

// 1. 向后台请求预支付参数
const response = await fetch('https://yourdomain.com/api/create-order', {
  method: 'POST',
  body: JSON.stringify({ productId: '12345' })
});
const { prepayid, noncestr, timestamp, sign } = await response.json();

// 2. 调起微信支付
WeChat.pay({
  partnerId: '你的商户号', // 实际应由后端返回
  prepayId: prepayid,
  nonceStr: noncestr,
  timeStamp: timestamp,
  package: 'Sign=WXPay',
  sign: sign
}).then((result) => {
  console.log('支付成功', result);
}).catch((err) => {
  console.log('支付失败', err);
});

Flutter 接入示例 (使用 fluwx)

import 'package:fluwx/fluwx.dart';

// 1. 初始化 Fluwx
await registerWxApi(appId: "你的AppID");

// 2. 请求后端获取支付参数
final response = await http.post('https://yourdomain.com/api/create-order');
final data = json.decode(response.body);

// 3. 调起支付
var result = await payWithWeChat(
  appId: "你的AppID",
  partnerId: data['partnerId'],
  prepayId: data['prepayId'],
  packageValue: "Sign=WXPay",
  nonceStr: data['nonceStr'],
  timeStamp: int.parse(data['timestamp']),
  sign: data['sign'],
);
if (result) print('支付成功');

💳 支付宝支付

支付宝在移动端（App/网页）的接入逻辑与微信类似，通过后端获取订单信息串，前端唤起支付。

场景	核心前端API	关键前置步骤
APP支付	支付宝SDK / 跨端插件	在支付宝开放平台创建应用，添加APP支付功能，完成签约。
网页/小程序支付	相应的H5或小程序SDK	配置授权回调域名。

uni-app 支付示例

uni.request({
  url: 'https://yourdomain.com/api/alipay/create-order',
  success(res) {
    uni.requestPayment({
      provider: 'alipay',
      orderInfo: res.data.orderInfo, // 后端返回的订单信息串
      success: (res) => { console.log('支付成功', res); },
      fail: (err) => { console.log('支付失败', err); }
    });
  }
});

React Native 接入示例 (使用 react-native-yunpeng-alipay)

import Alipay from 'react-native-yunpeng-alipay';

// 1. 从后端获取订单信息串
const response = await fetch('https://yourdomain.com/api/alipay/create-order');
const { orderInfo } = await response.json();

// 2. 调起支付宝支付
Alipay.pay(orderInfo).then((result) => {
  if (result.resultStatus === '9000') {
    console.log('支付成功');
  } else {
    console.log('支付失败', result.memo);
  }
});

Flutter 接入示例 (使用 flutter_alipay)

import 'package:flutter_alipay/flutter_alipay.dart';

// 1. 请求后端获取订单信息
final response = await http.post('https://yourdomain.com/api/alipay/create-order');
final orderInfo = json.decode(response.body)['orderInfo'];

// 2. 调起支付
var result = await FlutterAlipay.pay(orderInfo);
if (result['resultStatus'] == '9000') {
  print('支付成功');
} else {
  print('支付失败');
}

💳 PayPal支付

PayPal提供JavaScript SDK，前端渲染按钮并处理回调。在React Native/Flutter中可通过WebView或官方SDK集成。

Web/H5 示例

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&currency=USD"></script>
<div id="paypal-button-container"></div>
<script>
  paypal.Buttons({
    createOrder: function(data, actions) {
      return fetch('https://yourdomain.com/api/paypal/create-order', {
        method: 'post',
        body: JSON.stringify({ /* 商品信息 */ })
      }).then(res => res.json()).then(order => order.id);
    },
    onApprove: function(data, actions) {
      return fetch('https://yourdomain.com/api/paypal/capture-order', {
        method: 'post',
        body: JSON.stringify({ orderId: data.orderID })
      }).then(res => res.json()).then(details => {
        alert('交易成功！' + details.payer.given_name);
      });
    }
  }).render('#paypal-button-container');
</script>

React Native 中使用 WebView

import { WebView } from 'react-native-webview';

// 在 WebView 中加载包含 PayPal 按钮的 HTML 页面，并通过 postMessage 接收支付结果
<WebView
  source={{ uri: 'https://your-paypal-page.com' }}
  onMessage={(event) => {
    const { status, data } = JSON.parse(event.nativeEvent.data);
    if (status === 'success') {
      console.log('支付成功', data);
    }
  }}
/>

Flutter 中使用 webview_flutter

import 'package:webview_flutter/webview_flutter.dart';

WebView(
  initialUrl: 'https://your-paypal-page.com',
  javascriptMode: JavascriptMode.unrestricted,
  onPageFinished: (url) {
    // 可以注入JS监听支付结果
  },
)

💳 Stripe支付

Stripe提供Elements组件和Stripe.js，前端安全收集卡号，配合后端PaymentIntent完成支付。

Web/H5 示例

<script src="https://js.stripe.com/v3/"></script>
<form id="payment-form">
  <div id="card-element"></div>
  <button id="submit-button">支付</button>
</form>

<script>
  const stripe = Stripe('YOUR_PUBLISHABLE_KEY');
  const elements = stripe.elements();
  const cardElement = elements.create('card');
  cardElement.mount('#card-element');

  document.getElementById('payment-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    const response = await fetch('https://yourdomain.com/api/stripe/create-payment-intent', {
      method: 'POST',
      body: JSON.stringify({ amount: 1099, currency: 'usd' })
    });
    const { clientSecret } = await response.json();

    const { error, paymentIntent } = await stripe.confirmCardPayment(clientSecret, {
      payment_method: { card: cardElement }
    });
    if (error) alert(error.message);
    else alert('支付成功！');
  });
</script>

React Native 中使用 tipsi-stripe

import stripe from 'tipsi-stripe';

stripe.setOptions({ publishableKey: 'YOUR_PUBLISHABLE_KEY' });

// 使用 PaymentRequest 或 CardForm 组件
const paymentMethod = await stripe.paymentRequestWithCardForm({
  // 配置项
}).catch(error => console.log(error));

// 从后端获取 clientSecret
const response = await fetch('https://yourdomain.com/api/stripe/create-payment-intent', {
  method: 'POST',
  body: JSON.stringify({ amount: 1099 })
});
const { clientSecret } = await response.json();

// 确认支付
const result = await stripe.confirmPaymentIntent(clientSecret, { paymentMethodId: paymentMethod.id });
if (result.status === 'succeeded') console.log('支付成功');

Flutter 中使用 flutter_stripe

import 'package:flutter_stripe/flutter_stripe.dart';

// 初始化
Stripe.publishableKey = 'YOUR_PUBLISHABLE_KEY';

// 创建支付方法
final paymentMethod = await Stripe.instance.createPaymentMethod(
  params: PaymentMethodParams.card(),
);

// 从后端获取 clientSecret
final response = await http.post('https://yourdomain.com/api/stripe/create-payment-intent');
final clientSecret = json.decode(response.body)['clientSecret'];

// 确认支付
final paymentIntent = await Stripe.instance.confirmPaymentMethod(
  paymentIntentClientSecret: clientSecret,
  data: PaymentMethodParams.card(paymentMethodId: paymentMethod.id),
);
if (paymentIntent.status == PaymentIntentsStatus.Succeeded) {
  print('支付成功');
}

💳 银联支付

银联移动支付通常需要后端获取交易流水号（TN），前端调用支付控件完成。

App (使用API插件) 示例

// 以某Hybrid平台为例
var unPay = api.require('unionPay');
api.ajax({
    url: 'http://your-backend.com/get-tn',
    method: 'post'
}, function(ret, err) {
    if (ret) {
        unPay.pay({
            tn: ret.tn,
            devMode: true  // 测试环境
        }, function(ret, err) {
            if (ret.result == 'success') {
                api.alert({msg: '支付成功'});
            }
        });
    }
});

React Native 接入示例 (使用 react-native-unionpay)

import UnionPay from 'react-native-unionpay';

// 从后端获取TN
const response = await fetch('http://your-backend.com/get-tn');
const { tn } = await response.json();

// 调起银联支付控件
UnionPay.startPay(tn, false) // false表示生产环境
  .then((result) => {
    if (result === 'success') console.log('支付成功');
  })
  .catch((err) => console.log('支付失败', err));

Flutter 接入示例 (使用 flutter_unionpay)

import 'package:flutter_unionpay/flutter_unionpay.dart';

final tn = await getTnFromServer(); // 自定义方法获取TN
var result = await FlutterUnionpay.startUnionPay(
  tn: tn,
  mode: '01', // '00' 生产环境, '01' 测试环境
);
if (result['code'] == 'success') {
  print('支付成功');
}