Klarna checkout - 使用 React & Node

Question

我正在尝试实现Klarna结账以接受付款。

当创建订单(结账的第一步(时，您会收到一个"；html_snippet"；作为来自Klarnas API的响应(在我的情况下是表示后端(。它要求这个片段显示在前端(在我的例子中是react(。

在阅读了Klarnas文档之后，我仍然不知道如何在react中显示这个html片段。即使复制粘贴确切的片段，也会给我41个错误警告。

片段如下：

html_snippet: '<div id="klarna-checkout-container" style="overflow: hidden;">n' +
'  <div id="klarna-unsupported-page">n' +
'  <style type="text/css">n' +
'  @-webkit-keyframes klarnaFadeIn{from{opacity:0}to{opacity:1}}@-moz-keyframes klarnaFadeIn{from{opacity:0}to{opacity:1}}@keyframes klarnaFadeIn{from{opacity:0}to{opacity:1}}#klarna-unsupported-page{opacity:0;opacity:1\9;-webkit-animation:klarnaFadeIn ease-in 1;-moz-animation:klarnaFadeIn ease-in 1;animation:klarnaFadeIn ease-in 1;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:.1s;-moz-animation-duration:.1s;animation-duration:.1s;-webkit-animation-delay:5s;-moz-animation-delay:5s;animation-delay:5s;text-align:center;padding-top:64px}#klarna-unsupported-page .heading{font-family: "Klarna Headline", Helvetica, Arial, sans-serif;color: rgb(23, 23, 23);font-size: 36px;letter-spacing: -0.2px;-webkit-font-smoothing: antialiased;}#klarna-unsupported-page .subheading{font-family: "Klarna Text", "Klarna Sans", Helvetica, Arial, sans-serif;color: rgb(23, 23, 23);-webkit-font-smoothing: antialiased;line-height: 28px;font-weight: 400;font-size: 19px;max-width: 640px;margin: 20px auto;}#klarna-unsupported-page .reload {cursor: pointer;outline: none;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);border-width: 1px;background-color: rgb(38, 37, 37);border-color: rgb(38, 37, 37);padding: 15px 24px;margin-top: 15px;color: rgb(255, 255, 255);font-family: "Klarna Text", "Klarna Sans", Helvetica, Arial, sans-serif;font-weight: 500;text-rendering: geometricprecision;font-size: 100%;}n' +
'  </style>n' +
'  <h1 class="heading">Something went wrong</h1>n' +
'  <p class="subheading">Sorry for any inconvenience, please try reloading the checkout page or try again later.</p>n' +
'  <p class="subheading">If the problem persists it maybe be because you are using an old version of the web browser which is not safe nor compatible with modern web sites. For a smoother checkout experience, please install a newer browser.</p>n' +     
'  <button class="reload" onclick="reloadCheckoutHandler && reloadCheckoutHandler()">Reload checkout</button>n' +
'  </div>n' +
'  <script id="klarna-checkout-context" type="text/javascript">n' +
'  /* <![CDATA[ */n' +
'  var reloadCheckoutHandler;n' +
'  (function(w,k,i,d,n,c,l){n' +
'    w[k]=w[k]||function(){(w[k].q=w[k].q||[]).push(arguments)};n' +
'    l=w[k].config={n' +
'      container:w.document.getElementById(i),n' +
"      ORDER_URL:'https://js.playground.klarna.com/eu/kco/checkout/orders/dae844ba-c44a-6e55-b5ad-9afe9055e1f4',n" +
"      AUTH_HEADER:'KlarnaCheckout 4mpla37op0i19pv6g054',n" +
"      LOCALE:'en-GB',n" +
"      ORDER_STATUS:'checkout_incomplete',n" +
"      MERCHANT_NAME:'Your business name',n" +
'      GUI_OPTIONS:[],n' +
'      ALLOW_SEPARATE_SHIPPING_ADDRESS:false,n' +
"      PURCHASE_COUNTRY:'gbr',n" +
"      PURCHASE_CURRENCY:'GBP',n" +
'      TESTDRIVE:true,n' +
"      BOOTSTRAP_SRC:'https://js.playground.klarna.com/kcoc/220119-c2c224d/checkout.bootstrap.js',n" +
"      FE_EVENTS_DISABLED:'false',n" +
"      DEVICE_RECOGNITION_URL:'https://js.playground.klarna.com/eu/kco/checkout/orders/dae844ba-c44a-6e55-b5ad-9afe9055e1f4/device_recognition',n" +
'      DEVICE_RECOGNITION_TYPE1:true,n' +
"      DEVICE_RECOGNITION_TYPE3_ORG_ID:'87rxrdob',n" +
"      DEVICE_RECOGNITION_TYPE3_REF:'KLRNA_87rxrdob_dae844ba-c44a-6e55-b5ad-9afe9055e1f4',n" +
"      CLIENT_EVENT_HOST:'https://eu.playground.klarnaevt.com'n" +
'    };n' +
"    n=d.createElement('script');n" +
'    c=d.getElementById(i);n' +
'    n.async=!0;n' +
'    n.src=l.BOOTSTRAP_SRC;n' +
'    c.appendChild(n);n' +
'    try{n' +
"      ((w.Image && (new w.Image))||(d.createElement && d.createElement('img'))||{}).src =n" +
"        l.CLIENT_EVENT_HOST + '/v1/checkout/snippet/load' +n" +
"        '?sid=' + l.ORDER_URL.split('/').slice(-1) +n" +
"        '&order_status=' + w.encodeURIComponent(l.ORDER_STATUS) +n" +
"        '&timestamp=' + (new Date).getTime();n" +
'    }catch(e){}n' +
'    reloadCheckoutHandler = function () {n' +
'        try{n' +
"            ((w.Image && (new w.Image))||(d.createElement && d.createElement('img'))||{}).src =n" +
"            l.CLIENT_EVENT_HOST+'/v1/checkout/snippet/reload?sid='+l.ORDER_URL.split('/').slice(-1)+n" +
"            '&order_status='+w.encodeURIComponent(l.ORDER_STATUS)+'&timestamp='+(new Date()).getTime();n" +
'            window.location.reload();n' +
'        }catch(e){}n' +
'    }n' +
"  })(this,'_klarnaCheckout','klarna-checkout-container',document);n" +
'  /* ]]> */n' +
'  </script>n' +
'  <noscript>n' +
'Please <a href="http://enable-javascript.com">enable JavaScript</a>.n' +
'  </noscript>n' +
'</div>'

有人经历过这段旅程吗？

Answer 1

您可能已经解决了这个问题，但我使用Iframe来呈现片段。制作一个HTML页面，其中包含接收到的代码片段，并将其用作Iframe的源代码。

<iframe
title='klarnaCheckout'
className='iframe'
srcDoc={klarnaHtml(klarna.html_snippet)}
frameBorder='0'
></iframe>

export const klarnaHtml = (snippet) => {
return `
<html>
<head> </head>

<body>
<textarea style="display: none" id="KCO">
${snippet}
</textarea
>

<div id="my-checkout-container"></div>

<!-- START - Dont edit -->
<script type="text/javascript">
var checkoutContainer = document.getElementById(
"my-checkout-container"
);
checkoutContainer.innerHTML = document
.getElementById("KCO")
.value.replace(/\"/g, '"')
.replace(/\n/g, "");
var scriptsTags = checkoutContainer.getElementsByTagName("script");
for (var i = 0; i < scriptsTags.length; i++) {
var parentNode = scriptsTags[i].parentNode;
var newScriptTag = document.createElement("script");
newScriptTag.type = "text/javascript";
newScriptTag.text = scriptsTags[i].text;
parentNode.removeChild(scriptsTags[i]);
parentNode.appendChild(newScriptTag);
}
</script>
<!-- END -->
</body>
</html>

`;
};