zfc/sub2api
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(payment): 修复支付宝官方扫码二维码生成错误

Browse Source 
支付宝官方服务商在 precreate（当面付）不可用回退到 page.pay 时，
错误地把网页跳转 URL 当作可扫码二维码内容返回。前端用 QRCode 库
把这段 URL 渲染成二维码后，支付宝 APP 无法识别（扫到的只是个 HTTP
URL，不是支付二维码），用户必须点"重新打开支付页面"跳转到支付宝
收银台才能扫到真正可用的二维码。

- 后端 alipay.go：createPagePayTrade 不再把 PayURL 塞给 QRCode；
  createDesktopTrade 在 paymentMode == "redirect" 时跳过 precreate
  直接走 page.pay，避免没开通"当面付"的商户走一次无用的 API 调用
- 前端管理端 PaymentProviderDialog：让支付宝官方实例可在"支付模式"
  中选择"跳转"，开启后始终在新标签页打开支付宝收银台
- ProviderCard 的 modeLabel 增加 redirect 分支
- 补充 TestCreateTradeRedirectModeSkipsPrecreate 单元测试

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yuhao Jiang 2026-05-17 14:58:42 -05:00
parent f5bd25bea0
commit 1b03240515
5 changed files with 130 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
backend/internal/payment/provider/alipay.go
View File

@ -105,10 +105,16 @@ func (a *Alipay) MerchantIdentityMetadata() map[string]string {
// CreatePayment creates an Alipay payment using the following routing:
// - Mobile (H5): alipay.trade.wap.pay — browser redirect into Alipay.
// - Desktop: prefer alipay.trade.precreate to get a scan payload directly.
// - Desktop fallback: if precreate is unavailable for the merchant, fall back
// to alipay.trade.page.pay and expose both pay_url and qr_code so the
// frontend can render a QR while still allowing direct page open.
// - Desktop, default: prefer alipay.trade.precreate (FACE_TO_FACE_PAYMENT) to
// get a scannable QR payload. If precreate is unavailable for the merchant,
// fall back to alipay.trade.page.pay and expose pay_url only — the frontend
// opens the Alipay checkout in a new tab.
// - Desktop, paymentMode == "redirect": skip precreate and go straight to
// alipay.trade.page.pay so the frontend always opens the Alipay checkout
// in a new tab. Use this when the merchant has not enabled FACE_TO_FACE_PAYMENT.
//
// Note: alipay.trade.page.pay returns a checkout page URL, not a scannable
// payment QR. Never expose it via the QRCode field.
func (a *Alipay) CreatePayment(ctx context.Context, req payment.CreatePaymentRequest) (*payment.CreatePaymentResponse, error) {
client, err := a.getClient()
if err != nil {
@ -150,6 +156,13 @@ func (a *Alipay) createWapTrade(client *alipay.Client, req payment.CreatePayment
}
func (a *Alipay) createDesktopTrade(ctx context.Context, client *alipay.Client, req payment.CreatePaymentRequest, notifyURL, returnURL string) (*payment.CreatePaymentResponse, error) {
// Explicit redirect mode: merchant opted into "always open the Alipay
// checkout page in a new tab" via the provider instance's payment_mode.
// Skip precreate to avoid a wasted API call.
if strings.EqualFold(strings.TrimSpace(a.config["paymentMode"]), "redirect") {
return a.createPagePayTrade(client, req, notifyURL, returnURL)
}
resp, precreateErr := a.createPrecreateTrade(ctx, client, req, notifyURL)
if precreateErr == nil {
return resp, nil
@ -204,10 +217,12 @@ func (a *Alipay) createPagePayTrade(client *alipay.Client, req payment.CreatePay
if err != nil {
return nil, fmt.Errorf("alipay TradePagePay: %w", err)
}
// Only PayURL is exposed: alipay.trade.page.pay returns a checkout page URL
// that must be opened in a browser, not a scannable payment QR. Setting it
// as QRCode would let the frontend render an unscannable image.
return &payment.CreatePaymentResponse{
TradeNo: req.OrderID,
PayURL: payURL.String(),
QRCode: payURL.String(),
}, nil
}

59
backend/internal/payment/provider/alipay_test.go
View File

@ -189,8 +189,63 @@ func TestCreateTradeUsesPagePayForDesktop(t *testing.T) {
if resp.PayURL == "" {
t.Fatal("expected pay_url for desktop page pay")
}
if resp.QRCode != resp.PayURL {
t.Fatalf("qr_code = %q, want same as pay_url %q", resp.QRCode, resp.PayURL)
// page.pay returns a checkout page URL, not a scannable QR payload —
// it must never be exposed via QRCode (the frontend would render an
// unscannable image from it).
if resp.QRCode != "" {
t.Fatalf("qr_code = %q, want empty for page pay", resp.QRCode)
}
}
// When the provider instance is configured with paymentMode == "redirect",
// the desktop flow must skip precreate and go straight to page.pay.
func TestCreateTradeRedirectModeSkipsPrecreate(t *testing.T) {
origPreCreate := alipayTradePreCreate
origPagePay := alipayTradePagePay
t.Cleanup(func() {
alipayTradePreCreate = origPreCreate
alipayTradePagePay = origPagePay
})
preCreateCalls := 0
pagePayCalls := 0
alipayTradePreCreate = func(ctx context.Context, client *alipay.Client, param alipay.TradePreCreate) (*alipay.TradePreCreateRsp, error) {
preCreateCalls++
return &alipay.TradePreCreateRsp{
Error: alipay.Error{Code: alipay.CodeSuccess},
QRCode: "https://qr.alipay.example.com/precreate-token",
}, nil
}
alipayTradePagePay = func(client *alipay.Client, param alipay.TradePagePay) (*url.URL, error) {
pagePayCalls++
if param.ProductCode != alipayProductCodePagePay {
t.Fatalf("product_code = %q, want %q", param.ProductCode, alipayProductCodePagePay)
}
return url.Parse("https://openapi.alipay.com/gateway.do?page-pay")
}
provider := &Alipay{
config: map[string]string{"paymentMode": "redirect"},
}
resp, err := provider.createDesktopTrade(context.Background(), &alipay.Client{}, payment.CreatePaymentRequest{
OrderID: "sub2_103",
Amount: "12.00",
Subject: "Balance recharge",
}, "https://merchant.example.com/api/v1/payment/webhook/alipay", "https://merchant.example.com/payment/result")
if err != nil {
t.Fatalf("unexpected error: %v", err)
}
if preCreateCalls != 0 {
t.Fatalf("precreate calls = %d, want 0 (redirect mode must skip precreate)", preCreateCalls)
}
if pagePayCalls != 1 {
t.Fatalf("page pay calls = %d, want 1", pagePayCalls)
}
if resp.PayURL == "" {
t.Fatal("expected pay_url for redirect mode")
}
if resp.QRCode != "" {
t.Fatalf("qr_code = %q, want empty for redirect mode", resp.QRCode)
}
}

50
frontend/src/components/payment/PaymentProviderDialog.vue
View File

@ -34,7 +34,7 @@
<ToggleSwitch :label="t('common.enabled')" :checked="form.enabled" @toggle="form.enabled = !form.enabled" />
<ToggleSwitch :label="t('admin.settings.payment.refundEnabled')" :checked="form.refund_enabled" @toggle="form.refund_enabled = !form.refund_enabled; if (!form.refund_enabled) form.allow_user_refund = false" />
<ToggleSwitch v-if="form.refund_enabled" :label="t('admin.settings.payment.allowUserRefund')" :checked="form.allow_user_refund" @toggle="form.allow_user_refund = !form.allow_user_refund" />
<div v-if="form.provider_key === 'easypay'" class="flex items-center gap-2">
<div v-if="supportsPaymentMode" class="flex items-center gap-2">
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('admin.settings.payment.paymentMode') }}</span>
<div class="flex gap-1.5">
<button
@ -278,11 +278,37 @@ import {
WEBHOOK_PATHS,
PAYMENT_MODE_QRCODE,
PAYMENT_MODE_POPUP,
PAYMENT_MODE_REDIRECT,
STRIPE_SDK_API_VERSION,
getAvailableTypes,
extractBaseUrl,
} from './providerConfig'
/** Default payment_mode per provider key — "" means "no preference, use
* provider's built-in default behavior". */
function defaultPaymentMode(providerKey: string): string {
if (providerKey === 'easypay') return PAYMENT_MODE_QRCODE
return ''
}
/** Provider keys whose admin UI exposes a payment_mode selector.
* Other providers always send payment_mode = ''. */
function providerSupportsPaymentMode(providerKey: string): boolean {
return providerKey === 'easypay' || providerKey === 'alipay'
}
/** Allowed payment_mode values per provider. Used to coerce DB values
* from a different provider (or stale data) back to the default. */
function isValidPaymentMode(providerKey: string, mode: string): boolean {
if (providerKey === 'easypay') {
return mode === PAYMENT_MODE_QRCODE || mode === PAYMENT_MODE_POPUP
}
if (providerKey === 'alipay') {
return mode === '' || mode === PAYMENT_MODE_REDIRECT
}
return mode === ''
}
const props = defineProps<{
show: boolean
saving: boolean
@ -359,7 +385,17 @@ const providerWebhookHint = computed(() =>
const callbackPaths = computed(() => PROVIDER_CALLBACK_PATHS[form.provider_key] || null)
const supportsPaymentMode = computed(() => providerSupportsPaymentMode(form.provider_key))
const paymentModeOptions = computed(() => {
if (form.provider_key === 'alipay') {
// For Alipay official: "" = default (precreate → page.pay fallback);
// "redirect" = always open the Alipay checkout page in a new tab.
return [
{ value: '', label: t('admin.settings.payment.modeQRCode') },
{ value: PAYMENT_MODE_REDIRECT, label: t('admin.settings.payment.modeRedirect') },
]
}
return [
{ value: PAYMENT_MODE_QRCODE, label: t('admin.settings.payment.modeQRCode') },
{ value: PAYMENT_MODE_POPUP, label: t('admin.settings.payment.modePopup') },
@ -476,6 +512,7 @@ function toggleType(type: string) {
function onKeyChange() {
form.supported_types = [...(PROVIDER_SUPPORTED_TYPES[form.provider_key] || [])]
form.payment_mode = defaultPaymentMode(form.provider_key)
clearConfig()
applyDefaults()
}
@ -591,7 +628,7 @@ function handleSave() {
name: form.name,
supported_types: form.supported_types,
enabled: form.enabled,
payment_mode: form.provider_key === 'easypay' ? form.payment_mode : '',
payment_mode: supportsPaymentMode.value ? form.payment_mode : '',
refund_enabled: form.refund_enabled,
allow_user_refund: form.refund_enabled ? form.allow_user_refund : false,
config: filteredConfig,
@ -611,7 +648,7 @@ function reset(defaultKey: string) {
form.provider_key = defaultKey
form.supported_types = [...(PROVIDER_SUPPORTED_TYPES[defaultKey] || [])]
form.enabled = true
form.payment_mode = defaultKey === 'easypay' ? PAYMENT_MODE_QRCODE : ''
form.payment_mode = defaultPaymentMode(defaultKey)
form.refund_enabled = false
form.allow_user_refund = false
clearConfig()
@ -623,7 +660,12 @@ function loadProvider(provider: ProviderInstance) {
form.provider_key = provider.provider_key
form.supported_types = provider.supported_types
form.enabled = provider.enabled
form.payment_mode = provider.payment_mode || (provider.provider_key === 'easypay' ? PAYMENT_MODE_QRCODE : '')
// Coerce to a valid value for this provider. Guards against stale data
// (e.g. "popup" written by an older client) showing up as an unselected
// button in the dialog.
form.payment_mode = isValidPaymentMode(provider.provider_key, provider.payment_mode || '')
? (provider.payment_mode || '')
: defaultPaymentMode(provider.provider_key)
form.refund_enabled = provider.refund_enabled
form.allow_user_refund = provider.allow_user_refund
clearConfig()

3
frontend/src/components/payment/ProviderCard.vue
View File

@ -69,7 +69,7 @@ import Icon from '@/components/icons/Icon.vue'
import ToggleSwitch from './ToggleSwitch.vue'
import type { ProviderInstance } from '@/types/payment'
import type { TypeOption } from './providerConfig'
import { PAYMENT_MODE_QRCODE, PAYMENT_MODE_POPUP } from './providerConfig'
import { PAYMENT_MODE_QRCODE, PAYMENT_MODE_POPUP, PAYMENT_MODE_REDIRECT } from './providerConfig'
const PROVIDER_KEY_LABELS: Record<string, string> = {
easypay: 'admin.settings.payment.providerEasypay',
@ -99,6 +99,7 @@ const keyLabel = computed(() => t(PROVIDER_KEY_LABELS[props.provider.provider_ke
const modeLabel = computed(() => {
if (props.provider.payment_mode === PAYMENT_MODE_QRCODE) return t('admin.settings.payment.modeQRCode')
if (props.provider.payment_mode === PAYMENT_MODE_POPUP) return t('admin.settings.payment.modePopup')
if (props.provider.payment_mode === PAYMENT_MODE_REDIRECT) return t('admin.settings.payment.modeRedirect')
return ''
})

5
frontend/src/components/payment/providerConfig.ts
View File

@ -47,6 +47,11 @@ export const METHOD_ORDER = ['alipay', 'alipay_direct', 'wxpay', 'wxpay_direct',
/** Payment mode constants */
export const PAYMENT_MODE_QRCODE = 'qrcode'
export const PAYMENT_MODE_POPUP = 'popup'
/** Alipay-only: skip FACE_TO_FACE_PAYMENT precreate and open the Alipay
* checkout page in a new tab instead. Backend `alipay.go` matches on this
* literal (case-insensitive); other values fall back to the default
* precreate→pagepay flow. */
export const PAYMENT_MODE_REDIRECT = 'redirect'
export const PAYMENT_CURRENCY_OPTIONS: TypeOption[] = [
{ value: 'CNY', label: 'CNY' },