SumUp在线结账组件调用失败及checkoutId传递问题求助

一、先解决checkoutId后端到前端的传递问题 #

你的代码里存在两个明显问题：

1. 注释里的变量名拼写错误：$chekoutId → $checkoutId
2. 前端硬编码了checkoutId，没有使用后端生成的真实值

修正方案：直接通过PHP将变量注入到前端JS中 #

修改后的完整代码片段：

include 'vendor/autoload.php';

// 初始化变量，避免未定义报错
$checkoutId = '';

try {
  $sumup = new \SumUp\SumUp([
    'app_id' => 'cc_classic_*****************',
    'app_secret' => 'sup_sk_*****************',
  ]);
  $checkoutService = $sumup->getCheckoutService();
  // 注意：SumUp的amount参数必须是最小单位的整数（例如100代表£1.00）
  $checkoutResponse = $checkoutService->create($amount, $currency, $checkoutRef, $payToEmail);
  $checkoutId = $checkoutResponse->getBody()->id;
} catch (\SumUp\Exceptions\SumUpAuthenticationException $e) {
  echo 'Authentication error: ' . $e->getMessage();
} catch (\SumUp\Exceptions\SumUpResponseException $e) {
  // 输出更详细的错误响应，便于排查
  echo 'Response error: ' . $e->getMessage() . '<br>';
  echo 'Detailed response: ' . json_encode($e->getResponseBody());
} catch(\SumUp\Exceptions\SumUpSDKException $e) {
  echo 'SumUp SDK error: ' . $e->getMessage();
}
?>

<div id="sumup-card"></div>
<script
  type="text/javascript"
  src="https://gateway.sumup.com/gateway/ecom/card/v2/sdk.js"
></script>
<script type="text/javascript">
  SumUpCard.mount({
    id: 'sumup-card',
    currency: 'GBP',
    locale: 'en-GB', // 注意：SumUp的locale格式应为en-GB而非UK
    amount: '<?php echo $amount; ?>', // 必须与后端create时的amount完全一致（最小单位整数）
    email: '<?php echo $email; ?>',
    checkout_reference: '<?php echo $checkoutRef; ?>', // 必须与后端create时的checkoutRef完全一致
    showEmail: true,
    showFooter: true,
    showAmount: true,
    checkoutId: '<?php echo $checkoutId; ?>', // 使用后端生成的真实checkoutId
    onResponse: function (type, body) {
      console.log('Type', type);
      console.log('Body', body);
    },
  });
</script>

二、排查「Response error: Client error」的核心原因 #

这个错误是泛型客户端错误，结合SumUp SDK的特性，常见原因包括：

• 金额参数格式错误：SumUp要求amount为对应货币最小单位的整数（例如£5.99需传599），如果传入小数会直接报错。
• 前后端参数不匹配：前端mount的currency、amount、checkout_reference必须与后端create结账时的参数完全一致，否则会触发校验错误。
• Checkout Reference重复：$checkoutRef必须是唯一值，重复使用会导致创建结账失败。
• 测试账号权限问题：确认你的测试账号已激活，且App ID/Secret对应测试环境（而非生产环境）。
• 收款邮箱错误：$payToEmail必须是SumUp平台上已验证的收款账号邮箱，否则无法创建结账链接。

三、额外调试技巧 #

在SumUpResponseException中添加$e->getResponseBody()输出，能获取SumUp返回的具体错误详情（比如参数格式错误、权限不足等），这是排查Client error的关键。

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