咨询Episerver表单提交后跳转至支付页面并携带字段信息的方案

Episerver Forms本身没有内置的直接跳转支付网关的机制，你需要通过自定义开发实现。下面分两种常用方案，根据你的场景选择：

1. 前端拦截表单提交（适合无需后端验证/处理的场景） #

Episerver Forms默认是异步AJAX提交，你可以拦截提交事件，收集表单字段后直接跳转或提交到支付网关：

• 步骤：
  • 监听表单的submit事件，阻止默认AJAX提交行为
  • 获取表单中的金额、编号等字段值
  • 构造支付网关的请求（GET参数拼接或POST隐藏表单提交）

示例代码（原生JS）：

document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('.epi-forms__form');
  if (form) {
    form.addEventListener('submit', function(e) {
      // 阻止默认的Episerver表单AJAX提交
      e.preventDefault();
      
      // 获取表单字段值（替换为你的实际字段name属性）
      const amount = document.querySelector('input[name="Amount"]').value;
      const orderNumber = document.querySelector('input[name="OrderNumber"]').value;
      
      // 方式1：GET跳转（适合非敏感参数）
      const paymentUrl = `https://your-payment-gateway.com/pay?amount=${encodeURIComponent(amount)}&order=${encodeURIComponent(orderNumber)}`;
      window.location.href = paymentUrl;
      
      // 方式2：POST提交（适合敏感参数，避免URL暴露）
      // const hiddenForm = document.createElement('form');
      // hiddenForm.method = 'POST';
      // hiddenForm.action = 'https://your-payment-gateway.com/pay';
      // ['Amount', 'OrderNumber'].forEach(fieldName => {
      //   const input = document.createElement('input');
      //   input.type = 'hidden';
      //   input.name = fieldName;
      //   input.value = document.querySelector(`input[name="${fieldName}"]`).value;
      //   hiddenForm.appendChild(input);
      // });
      // document.body.appendChild(hiddenForm);
      // hiddenForm.submit();
    });
  }
});

2. 后端自定义提交处理（适合需要验证/预处理数据的场景） #

如果需要先在后端验证表单数据、生成订单号、记录提交日志等，推荐使用Episerver的ISubmissionHandler扩展点：

• 步骤：
  • 创建自定义ISubmissionHandler实现类
  • 在Execute方法中处理表单数据，生成支付跳转URL
  • 通过RedirectResult触发前端跳转

示例代码（C#）：

using EPiServer.Forms.Core;
using EPiServer.Forms.Core.SubmissionHandling;
using Microsoft.AspNetCore.Mvc;

public class PaymentRedirectSubmissionHandler : ISubmissionHandler
{
    public bool Execute(Submission submission, object model)
    {
        // 获取表单字段值（替换为你的字段名称）
        var amountField = submission.Data.FirstOrDefault(f => f.ElementName == "Amount");
        var orderNumberField = submission.Data.FirstOrDefault(f => f.ElementName == "OrderNumber");
        
        if (amountField == null || orderNumberField == null)
        {
            // 字段缺失，可返回false终止提交或自定义处理
            return false;
        }
        
        string amount = amountField.Value?.ToString();
        string orderNumber = orderNumberField.Value?.ToString();
        
        // 构造支付网关URL（可加入后端生成的签名等安全参数）
        string paymentUrl = $"https://your-payment-gateway.com/pay?amount={Uri.EscapeDataString(amount)}&order={Uri.EscapeDataString(orderNumber)}";
        
        // 通过HttpContext触发跳转
        var httpContext = submission.HttpContext;
        httpContext.Response.Redirect(paymentUrl);
        
        // 返回true表示提交处理完成
        return true;
    }
}

然后在Startup.cs中注册这个处理器：

services.AddTransient<ISubmissionHandler, PaymentRedirectSubmissionHandler>();

为什么Webhook不适用？ #

Episerver Forms的"Trigger webhook after submission"是后台异步调用第三方接口，不会触发前端页面跳转，仅适合后台数据同步场景，无法满足你需要用户立即跳转支付页面的需求。

内容的提问来源于stack exchange，提问作者Farhin Shaikh