如何在无头Shopware 6商店完成PayPal Express Checkout无需二次确认跳转

安全阿岳

2026-6-16

问题

我按照Shopware官方示例实现了无头Shopware 6商店的PayPal Express Checkout，但最后一步遇到问题：官方示例用fetch()调用redirectUrl，但该接口返回HTML，没法正常跳转PayPal。

目前临时方案是直接重定向到redirectUrl，但这会让用户再次进入PayPal界面二次确认。虽然能让Shopware把订单标记为已支付，但多了不必要的操作步骤。

请问怎么不用跳转redirectUrl做二次确认就能完成PayPal Express Checkout流程？调用handlePayment后，该执行哪些步骤让Shopware标记订单为已支付，同时避免这个额外跳转？

代码如下：

<PayPalScriptProvider
  options={{
    clientId: "<myClientId>",
  }}
>
  <PayPalButtons
    createOrder={async () => {
      // Create order --> PayPal
      // POST /store-api/paypal/express/create-order
      // return response.data.token
    }}
    onApprove={async (data, actions) => {
      // Prepare Checkout --> PayPal
      // POST /store-api/paypal/express/prepare-checkout { body: { token: data.orderId }}
      
      // Update context --> set paymentMethodId to PayPal
      // POST /store-api/account/register { body: { paymentMethodId: <paypalPaymentMethodId> }}
      
      // Create order --> Shopware
      // POST /store-api/checkout/order
      
      // Handle Payment --> Shopware/PayPal
      // POST /store-api/handlePayment 
      // { query: {isPayPalExpressCheckout: true, paypalOrderId: data.orderId } body: { orderId: <shopwareOrderId>, finishUrl: 'https://...', errorUrl: 'https://...' } }
      
      // Redirect to the redirectUrl from the handlePayment endpoint --> re-confirmation at PayPal
    }}
  ></PayPalButtons>
</PayPalScriptProvider>

当前配置下，调用handlePayment后重定向到redirectUrl会再次打开PayPal，要求用户二次确认支付，只有完成这个确认，Shopware才会把订单从“未确认”改成“已支付”。

解决方案

核心原因

你遇到的二次确认是因为当前流程重复触发了PayPal的授权环节——在onApprove里已经完成了PayPal订单的用户确认，后续调用handlePayment后跳转redirectUrl相当于再次发起授权，导致重复操作。

调整后的正确流程

直接移除handlePayment后的重定向步骤
调用handlePayment接口时，确保参数传递正确：
- 携带isPayPalExpressCheckout: true和paypalOrderId: data.orderId查询参数
- 请求体传入正确的orderId、finishUrl和errorUrl
  该接口本身会完成PayPal订单与Shopware订单的关联，并触发支付验证，完全不需要额外跳转。
替换错误的支付方式更新接口
你当前用account/register设置支付方式是错的，正确做法是调用POST /store-api/context/payment-method更新购物车上下文的支付方式，请求体只传paymentMethodId即可，不需要走注册接口。

在onApprove中完成PayPal订单捕获（推荐）
若使用PayPal订单捕获模式，在onApprove里通过actions.order.capture()完成支付捕获，再调用Shopware的handlePayment，确保PayPal端支付状态同步到Shopware：

onApprove={async (data, actions) => {
  // 1. 捕获PayPal订单支付
  const captureData = await actions.order.capture();
  
  // 2. 调用Shopware PayPal准备接口
  await fetch('/store-api/paypal/express/prepare-checkout', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ token: data.orderId })
  });
  
  // 3. 更新上下文支付方式
  await fetch('/store-api/context/payment-method', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ paymentMethodId: '<paypalPaymentMethodId>' })
  });
  
  // 4. 创建Shopware订单
  const orderResponse = await fetch('/store-api/checkout/order', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' }
  });
  const orderData = await orderResponse.json();
  const shopwareOrderId = orderData.id;
  
  // 5. 调用handlePayment完成关联
  const handlePaymentResponse = await fetch(`/store-api/handlePayment?isPayPalExpressCheckout=true&paypalOrderId=${data.orderId}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ 
      orderId: shopwareOrderId, 
      finishUrl: 'https://your-finish-url.com', 
      errorUrl: 'https://your-error-url.com' 
    })
  });
  
  // 6. 直接跳转到自定义完成页/错误页
  if (handlePaymentResponse.ok) {
    window.location.href = 'https://your-finish-url.com';
  } else {
    window.location.href = 'https://your-error-url.com';
  }
}}

检查Shopware PayPal插件配置
确保后台PayPal插件的「Express Checkout」模式设置为无需二次确认（具体选项名称可能因插件版本略有差异），并且已正确配置Webhook——PayPal会通过Webhook把支付状态同步给Shopware，确保订单状态自动更新，不依赖前端跳转触发。

关键说明

redirectUrl是为传统服务器端渲染场景设计的，无头架构下完全不需要前端跳转该地址。
依赖PayPal Webhook同步支付状态，即使前端流程完成后有延迟，Shopware也会通过Webhook收到PayPal的支付确认，自动更新订单状态。

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

如何在无头Shopware 6商店完成PayPal Express Checkout无需二次确认跳转

问题 #

解决方案 #

核心原因 #

调整后的正确流程 #

关键说明 #

问题

解决方案

核心原因

调整后的正确流程

关键说明