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

【问题标题】：Paypal SDK, how to change currency dynamically without reinjecting and reinitializing the SDK itself?Paypal SDK，如何在不重新注入和重新初始化SDK本身的情况下动态更改货币？
【发布时间】：2019-10-02 05:10:09
【问题描述】：

我的网站在同一页面上出售多种货币的产品，因此人们可以单击以欧元出售的产品并以欧元付款，或者他们可以单击以美元出售的产品并以美元付款并等等……

问题在于，一旦您初始化新的 PayPal SDK，您就无法更改它接受的货币：

销毁元素
更改 SDK 的链接，使其接受不同的货币
手动将其注入页面
重新初始化它

正如您可能理解的那样，它不是非常快速、稳定或安全。我错过了什么吗？我知道您可以在旧的 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()
}

我希望有比这更简单、更安全的货币兑换方式。谢谢。

【问题讨论】：

能否提供链接以可视化更改？
当然，例如，如果我使用此链接初始化 SDK：https://www.paypal.com/sdk/js?client-id=${credentials}&currency=USD，它将只接受美元付款，我必须重新注入并使用 &currency=EUR 重新初始化它才能工作与欧元。如果我不设置参数，它默认为美元，你也不能发送一个数组作为参数。
@terales 我没有，这很不幸，但我们不得不像我在原始帖子中描述的那样使用次优解决方案。我希望 PayPal 更关心开发者:(
谢谢，我们最终在货币更改后重新加载了一个页面（即使它是一个 SPA）——从代码的角度来看，这使得它变得更加简单，并且对 UX 几乎没有任何伤害
我已经提交了一个问题：github.com/paypal/paypal-checkout-components/issues/1180

标签： javascript paypal

【解决方案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。

【讨论】：

不幸的是，他们已经“修复”了这个问题，并且这种方式不再有效，脚本中传递的货币必须与创建订单时指定的货币相同。

【解决方案2】：

对于那些使用 React 的人，现在可以通过新库 @paypal/react-paypal-js 实现这一点。来自自述文件：

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 />
    </>
);

【讨论】：