反应，在表单mercadopago中加载脚本

问题描述

我正在尝试实施某种付款系统（MercadoPago）。

根据文档，它只是粘贴以下内容：

<form method="POST">
  <script
    src="https://www.mercadopago.com.pe/integrations/v1/web-payment-checkout.js"
    data-preference-id="589788715-2e52aeec-8275-487c-88ee-1a08cff37c08"
  ></script>
</form>

将其粘贴到纯html文件中可以很好地工作：出现一个按钮，然后单击它会打开一个模式，该模式可以按预期使用信用卡付款。但是，这在React中不起作用，因为它是动态加载脚本的。因此，我尝试使用效果钩子这样在加载时插入<script>：

const App = () => {
  const setMercadoPagoPreferences = async () => {
    const script = document.createElement('script');
    script.src =
      'https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js';
    script.async = true; // commenting or uncommenting seems to have no effect
    script.setAttribute(
      'data-preference-id','589788715-2e52aeec-8275-487c-88ee-1a08cff37c08'
    );
    document.getElementById('mercadoForm').appendChild(script);
  };

  useEffect(() => {
    setMercadoPagoPreferences();
  },[]);

  return <form action='/procesar-pago' method='POST' id='mercadoForm' />;
};

这似乎正确地加载了脚本，因为向页面添加了付款按钮。但是，单击它会打开一个模态，显示“哦，不，发生了什么坏事”。这在我上面的.html示例中不会发生；所以一定是因为React如何加载脚本或类似的东西。在开发人员或生产版本中均不起作用。

编辑：如建议的那样，我尝试使用refs而不是直接附加childs，但这似乎没有任何影响，但这仍然行不通。

解决方法

我不知道这个框架，但也许就是这样：看来这个人有类似的问题right here。

我认为有问题，因为脚本未按时加载。所以也许让我们尝试一下：

script.onload = () => {
  document.getElementById('mercadoForm').appendChild(script);
};

此外，在诸如HERE之类的react ref中内置了机制，而不是document.getElementById

,

如果您的技术不适用于mercadolibre，那么您的技术将奏效。 显然，mercadolibre不允许使用您要加载的页面。就像您要在mercadolibre内加载Iframe一样，它们可能已使用CSP header阻止了。具体来说，他们正在将Content-Security-Policy标签设置为框架祖先的“自我”。这是一项安全限制标准，不允许在元素Iframe中使用该域的页面。