Paypal SDK，如何在不重新注入和重新初始化SDK本身的情况下动态更改货币？

Question

我的网站在同一页上销售多种货币的产品，所以一个人可以点击以欧元出售的产品并用欧元付款，或者他们可以点击以美元出售的产品并用美元付款，依此类推...

问题是，一旦你初始化了新的PayPal SDK，就不能改变它接受的货币，除非进行以下操作：

1. 销毁该元素
2. 更改SDK的链接，使其接受不同的货币
3. 手动将其注入到页面中
4. 重新初始化它

你可能能理解，这样做并不是很快速、稳定或安全。我有什么遗漏吗？我知道你可以将货币作为参数发送到旧的Express Checkout版本中。

PayPal文档让人沮丧，缺少很多信息，并没有很大的社区围绕它，所以我无法在任何地方找到答案。

我尝试在支付参数中发送货币，但如果与初始化的货币不同，一旦尝试确认付款，就会抛出货币不匹配错误。

现在，如果用户选择使用PayPal付款选项，我正在手动重新注入和重新初始化带有正确货币的paypal SDK，但这很慢，需要硬编码休眠时间（虽然这可能是由于我的知识不足，可能有更好的方法）。

这是我当前设置的伪代码，这是不可接受的：

initialisePaypalSDK(currency) {
    destroy old initialisation
    change link to paypal with new currency
    inject new link to page
    initialise the new sdk
    sleep until the paypal variable is defined
    showPayPalButton()
}

我希望有一种更简单、更安全的方式来更改货币，谢谢。

- Артём Юрков

---

请提供可视化更改的链接。 - Senthil

当然，例如如果我使用此链接来初始化SDK：https://www.paypal.com/sdk/js?client-id=${credentials}&currency=USD，它只接受美元支付，我必须重新注入和重新初始化它，并加上 &currency=EUR 才能让它与欧元一起工作。如果我不设置参数，则默认为美元，而且您不能将数组作为参数发送。 - Артём Юрков

Артём Юрков，你找到更好的解决方案了吗？ - terales

@terales，我没有这样做，这非常不幸，但我们必须利用像我在原帖中描述的次优解决方案。我希望PayPal更关心开发者:( - Артём Юрков

谢谢，我们最终决定在货币更改后重新加载页面（即使它是单页应用程序）- 从代码角度来看，这使得它更加简单，并且对用户体验几乎没有影响。 - terales

我已经提交了一个问题：https://github.com/paypal/paypal-checkout-components/issues/1180 - Janosch

Answer 1

你可以使用后端来解决这个问题。 首先，像这样定义createOrder函数：

const createOrder = async (data, actions) => {
  return await axios.get('/yourbackend/api/get_order_id')
}

const onApprove = (data, actions) => {
// ... code to handle the payment status
}

paypal.Buttons({createOrder, onApprove}).render('#paypal-button-container')

然后在您的后端实现订单创建的REST API (/v2/checkout/orders)。然后返回已创建支付的ID。

- Vitaly Radchik

---

不幸的是，他们已经“修复”了这个问题，这种方式不再起作用了，传递给脚本的货币必须与订单创建中指定的货币相同。 - Vitaly Radchik

Answer 2

选择货币后，您可以添加脚本。

let myScript = document.createElement("script");
    myScript.setAttribute(
      "src",
      "https://www.paypal.com/sdk/js?client-id="your cliend id"&components=buttons&currency=" + currencyVariable
    );
    let head = document.head;
    head.insertBefore(myScript, head.firstElementChild);

    myScript.addEventListener("load", scriptLoaded, false);

    function scriptLoaded() {
      console.log("Script is ready to rock and roll!");
      paypal
        .Buttons({
          style: {
            layout: "vertical",
            color: "blue",
            shape: "rect",
            label: "paypal",
          },
          createOrder: function (data, actions) {
            // Set up the transaction
            return actions.order.create({
              purchase_units: [
                {
                  amount: {
                    value: traspasoCantidad,
                  },
                  payee: {
                  },
                  description: "",
                },
              ],
              application_context: {
              },
            });
          },
          onApprove: function (data, actions) {
            return actions.order.capture().then(function (details) {
              /* window.location.href = "approve.html"; */
            });
          },
          onError: function (err) {
            myApp.alert("Ha ocurrido un error al hacer el traspaso", "ERROR");
          },
        })
        .render("#paypal-button-container");
    }

- Alejandro Castillo

Answer 3

对于使用 React 的人来说，现在可以使用新库 @paypal/react-paypal-js 来实现。从 README 中可以看到：

当参数（如货币）发生变化时，可以使用 usePayPalScriptReducer 钩子重新加载 JS SDK 脚本。它提供了 resetOptions 动作，用于重新加载具有新参数的脚本。例如，下面是您如何使用它来更改货币。

// get the state for the sdk script and the dispatch method
const [{ options }, dispatch] = usePayPalScriptReducer();
const [currency, setCurrency] = useState(options.currency);

function onCurrencyChange({ target: { value } }) {
    setCurrency(value);
    dispatch({
        type: "resetOptions",
        value: {
            ...scriptProviderOptions,
            currency: value,
        },
    });
}

return (
    <>
        <select value={currency} onChange={onCurrencyChange}>
            <option value="USD">United States dollar</option>
            <option value="EUR">Euro</option>
        </select>
        <PayPalButtons />
    </>
);

- Janosch