React应用集成Bambora支付：如何向RedirectCheckout传参预填表单字段

核心实现逻辑 #

RedirectCheckout 构造函数支持传入第二个配置参数，你要预填充的表单字段统一放在该参数的 prefill 属性中即可。

具体实现步骤 #

• 先维护表单状态，收集用户输入的所有需要预填充的字段（比如收件人姓名、邮箱、联系地址、手机号等）
• 表单触发onSubmit时先做本地字段合法性校验，校验不通过直接提示用户修正，校验通过再发起支付流程
• 调用你的后端接口，获取合法的Bambora会话token（该token必须由服务端调用Bambora接口生成，禁止前端硬编码或生成，避免出现支付安全问题）
• 实例化RedirectCheckout时传入会话token和预填充配置，调用实例的redirect方法即可跳转到带预填充内容的Bambora支付页

完整代码示例 #

import { useState } from 'react';
import { RedirectCheckout } from "@bambora/checkout-sdk-web";

function PaymentForm() {
  // 维护表单状态，存储需要预填充的字段
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    phone: '',
    addressLine1: '',
    postalCode: '',
    city: ''
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 1. 本地表单校验，示例省略校验逻辑，可根据你的业务需求补充
    const isFormValid = validateForm(formData);
    if (!isFormValid) return;

    try {
      // 2. 调用你的后端接口获取Bambora会话token
      const sessionToken = await fetch('/api/get-bambora-token', {
        method: 'POST',
        body: JSON.stringify(formData)
      }).then(res => res.json());

      // 3. 实例化RedirectCheckout，传入预填充配置
      const checkout = new RedirectCheckout(sessionToken, {
        prefill: {
          // 消费者基础信息
          customer: {
            firstName: formData.firstName,
            lastName: formData.lastName,
            emailAddress: formData.email,
            mobilePhoneNumber: formData.phone
          },
          // 账单地址信息
          billingAddress: {
            addressLine1: formData.addressLine1,
            postalCode: formData.postalCode,
            city: formData.city
          }
        }
      });

      // 4. 跳转至Bambora支付页
      checkout.redirect();
    } catch (err) {
      console.error('支付初始化失败', err);
    }
  };

  // 表单校验方法示例，可自定义规则
  const validateForm = (data) => {
    return Object.values(data).every(val => val.trim() !== '');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="firstName" value={formData.firstName} onChange={handleInputChange} placeholder="名" required />
      <input name="lastName" value={formData.lastName} onChange={handleInputChange} placeholder="姓" required />
      <input name="email" type="email" value={formData.email} onChange={handleInputChange} placeholder="邮箱" required />
      {/* 其他表单字段省略 */}
      <button type="submit">去支付</button>
    </form>
  )
}

export default PaymentForm;

注意事项 #

• 预填充支持的字段可根据你的业务需求增减，只要和Bambora要求的参数名对应即可
• 会话token的有效期很短，必须在跳转前实时请求获取，不要提前生成缓存

内容的提问来源于stack exchange，提问作者Shayan Noruzi