Next.js中PayPal SDK切换EUR报错，USD正常的问题求助

问题描述 #

使用@paypal/react-paypal-js组件时，USD支付功能正常，但切换为EUR后出现以下错误：

Error: Unexpected currency: EUR passed to order.create. Please ensure you are passing /sdk/js?currency=EUR in the paypal script tag. ...

已完成的修改：

• 将PayPal脚本src更新为https://www.paypal.com/sdk/js?client-id=${clientId}&currency=EUR
• 将createOrder中的currency_code从'USD'改为'EUR'

额外确认信息：EUR为PayPal支持货币，沙箱测试用户为德国区域，React已降级至18，环境变量配置正确，USD支付无异常。目标是让欧洲用户显示EUR价格及兑换率。

问题原因 #

手动添加PayPal脚本与PayPalScriptProvider组件的自动加载逻辑冲突。PayPalScriptProvider会自行加载SDK脚本，手动插入的脚本可能未正确传递currency参数，或两者加载的脚本参数不一致，导致SDK检测到货币不匹配。

解决方案 #

移除手动添加脚本的逻辑，完全通过PayPalScriptProvider配置SDK参数，确保currency参数统一传递。

修改后的完整代码（EUR版本） #

'use client'

import { useState } from 'react';
import { PayPalScriptProvider, PayPalButtons } from '@paypal/react-paypal-js';

const PayPalPage = () => {
  const [paymentSuccess, setPaymentSuccess] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  const clientId = process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID;
  
  // 统一配置PayPal SDK参数
  const paypalOptions = {
    clientId,
    currency: 'EUR'
  };

  if (!clientId) {
    return (
      <div className="bg-gray-100 min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-xl w-full bg-white p-8 rounded-lg shadow-lg">
          <h1 className="text-3xl font-bold text-center text-gray-800 mb-6">
            PayPal client ID fehlt
          </h1>
          <p className="text-center text-gray-600 mb-8">
            Bitte überprüfen Sie die Umgebungsvariable für die PayPal-Client-ID.
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-gray-100 min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-xl w-full bg-white p-8 rounded-lg shadow-lg">
        <h1 className="text-3xl font-bold text-center text-gray-800 mb-6">
          Test PayPal Kauf
        </h1>
        <p className="text-center text-gray-600 mb-8">
          Bitte tätigen Sie einen Testkauf von 100€ über PayPal.
        </p>

        {/* Erfolgsnachricht */}
        {paymentSuccess && (
          <div className="bg-green-100 text-green-800 p-4 mb-4 rounded-lg text-center">
            <h2 className="text-lg font-bold">Vielen Dank für Ihren Testkauf!</h2>
            <p>Ihre Zahlung von 100€ wurde erfolgreich abgeschlossen. Vielen Dank!</p>
          </div>
        )}

        {/* Fehlermeldung */}
        {errorMessage && (
          <div className="bg-red-100 text-red-800 p-4 mb-4 rounded-lg text-center">
            <h2 className="text-lg font-bold">Ups! Etwas ist schiefgelaufen.</h2>
            <p>{errorMessage}</p>
          </div>
        )}

        <PayPalScriptProvider options={paypalOptions}>
          <div className="flex justify-center">
            <PayPalButtons
              style={{
                layout: 'vertical',
                color: 'blue',
                shape: 'rect',
                label: 'paypal',
              }}
              createOrder={(data, actions) => {
                if (!actions || !actions.order) {
                  console.error('Fehler: actions.order ist nicht definiert');
                  return Promise.reject('Fehler bei der Erstellung der Bestellung');
                }

                return actions.order.create({
                  purchase_units: [
                    {
                      amount: {
                        currency_code: 'EUR',
                        value: '100.00',
                      },
                    },
                  ],
                  intent: 'CAPTURE'
                });
              }}
              onApprove={(data, actions) => {
                if (!actions || !actions.order) {
                  console.error('Fehler: actions.order ist nicht definiert');
                  return Promise.reject('Fehler bei der Genehmigung der Bestellung');
                }

                return actions.order.capture().then((details) => {
                  console.log('Zahlung erfolgreich abgeschlossen:', details);
                  setPaymentSuccess(true);
                  setErrorMessage('');
                  return Promise.resolve();
                });
              }}
              onError={(err) => {
                console.error('Fehler bei der PayPal-Zahlung:', err);
                setErrorMessage('Es gab ein Problem bei Ihrer Zahlung. Bitte versuchen Sie es erneut.');
                setPaymentSuccess(false);
              }}
            />
          </div>
        </PayPalScriptProvider>
      </div>
    </div>
  );
};

export default PayPalPage;

关键修改点 #

1. 移除了手动添加PayPal脚本的useEffect逻辑，避免重复加载脚本
2. 在PayPalScriptProvider的options中直接配置currency: 'EUR'，由组件统一管理SDK加载参数
3. 更新页面文本中的货币符号，匹配EUR显示

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