使用react-paypal-js具有多种货币的PayPal按钮

Question

尝试更改我的货币，但当我使用currency_code: 'EUR'时，我收到此错误：

错误：意外的货币：欧元传递给 order.create。请确保您在 paypal 脚本标记中传递 /sdk/js?currency=EUR。

当我仅使用初始选项中的货币：“欧元”并将其从 PayPalButtons 中删除时，它会使用美元金额并将其更改为欧元。但并非一切都是欧元。

const initialOptions = {
  'client-id': 'test',
  currency: 'EUR',
  intent: 'capture',
};

<PayPalScriptProvider options={initialOptions}>
    <PayPalButtons
        createOrder={(data, actions) => {
            return actions.order.create({
                purchase_units: [{
                                  description:
                                    'Rechnung ' +
                                    dayjs(date, 'MM/YYYY').format('MMMM YYYY'),
                                  amount: {
                                    currency_code: 'EUR',
                                    value: 2
                                }]
               

                                    
/>
</PayPalScriptProvider>

Answer 1

但并非一切都是欧元。

目前的JS SDK设计中，不同币种的渲染按钮需要单独的SDK加载。

自己加载SDK时，可以在脚本加载时添加

data-namespace

属性。我在react-paypal-js 文档中没有看到对此的支持。

<h3>USD buttons...</h3>
<div id="paypal-button-container-1" />

<script src="https://www.paypal.com/sdk/js?client-id=test&currency=USD" data-namespace="paypalUSD"></script>
<script>
    paypalUSD.Buttons({
        //...
    }).render('#paypal-button-container-1');
</script>


<hr />


<h3>EUR buttons...</h3>
<div id="paypal-button-container-2" />

<script src="https://www.paypal.com/sdk/js?client-id=test&currency=EUR" data-namespace="paypalEUR"></script>
<script>
    paypalEUR.Buttons({
        //...
    }).render('#paypal-button-container-2');
</script>

虽然文档中没有任何内容，但查看react-paypal-js的包代码，它似乎确实受到支持。您需要单独的 PayPalScriptProviders，每个都有自己的货币和

data-namespace

值（默认为

paypal

）

Answer 2

我也有同样的问题。我通过添加以下反应组件解决了这个问题：

import React, { useEffect } from "react";

export const PayPalSDK = () => {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://www.paypal.com/sdk/js?client-id=test&currency=EUR";
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>{/* Your component JSX */}</div>;
};