在表单中加载脚本(mercadopago)

Question

我正在尝试实施一些支付系统(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，但是这似乎没有任何影响，它仍然不能工作。

Answer 1

我不知道这个框架，但也许是这样的:看起来这个家伙有类似的问题，就在这里。

我认为存在问题，因为脚本没有按时加载。所以也许让我们试试这个：

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

另外，在反应参考系统(如这里 )中建立了一个机制，而不是document.getElementById。

Answer 2

如果不是mercadolibre，你的技术就会奏效。显然，mercadolibre不允许使用您要加载的页面。就像您试图将mercadolibre加载到Iframe中一样，它们可能会使用CSP报头阻止它。具体来说，他们将标记设置为框架-祖先'self‘。这是一个安全限制标准，不允许在元素Iframe中使用来自该域的页面。