如何在显示的Klarna Payments小部件中获取表格？

问题描述

我正在构建一种Klarna Payments的沙盒集成（以使其在原理上起作用，并在以后的逻辑商店中实现其逻辑）。文档中描述的第一步session creating已经奏效。现在，我试图显示Klarna小部件：

klarna-widget.html

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Klarna Widget</title>
</head>
<body>
<script>
    window.klarnaAsyncCallback = function () {
        Klarna.Payments.init({
            client_token: 'evstbGciOiJSUzI1...'
        })
        Klarna.Payments.load(
            {
                container: '#klarna-payments-container',payment_method_category: 'pay_later'
            },function (res) {
                console.debug(res);
            }
        )
    };
</script>
<script src="https://x.klarnacdn.net/kp/lib/v1/api.js" async></script>
<div id="klarna-payments-container"></div>
</body>
</html>

当前结果如下：

Klarna Widget without form

而不是documentation中显示的预期结果：

Klarna Widget form

但是表格不存在。 如何显示它？

更新

只是看了看控制台。有一些警告和错误：

DevTools Failed to load SourceMap: Could not load content for https://x.klarnacdn.net/device-recognition/1f14eaf/main.bundle.js.map: HTTP error: status code 404,net::ERR_HTTP_RESPONSE_CODE_FAILURE
blob:https://klarna-payments-eu.playground.klarna.com/2ca435b3-87fb-4538-aa91-45c6c94e9243:16

WebSocket connection to 'wss://127.0.0.1:5939/' Failed: Error in connection establishment: net::ERR_CONNECTION_CLOSED
td_zM @ blob:https://klarna-payments-eu.playground.klarna.com/2ca435b3-87fb-4538-aa91-45c6c94e9243:16
(anonymous) @ blob:https://klarna-payments-eu.playground.klarna.com/2ca435b3-87fb-4538-aa91-45c6c94e9243:14

(13) WebSocket connection to '<URL>' Failed: WebSocket is closed before the connection is established.
...

klarna widget socket error

但是res对象看起来不错：

{show_form: true}
show_form: true
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnproperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__definesetter__: ƒ __definesetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

解决方法

要回答有关如何在显示的Klarna Payments小部件中获取表格的问题，您已经可以使用它了！

为什么它没有按预期工作？让我分享一些有关集成的细节。

以下是描述Klarna付款方式工作流程的屏幕截图：

如detailed guide中所述

，当用户打开结帐页面时：

您的应用程序创建与Klarna的会话
显示克拉纳付款选择小部件
用户填写表格，选择付款方式并完成订单。

现在，当您首次与Klarna建立会话时，您的session-get响应将为您的商家帐户提供所有可用的付款类别。

{
   "session": {
       "purchase_country":"de","purchase_currency":"eur","client_token":"eyJhbGciOiJSUzI1...",...,"payment_method_categories":[{
          "identifier":"pay_now",...
       },{
          "identifier":"pay_over_time",...
         }
       },{
          "identifier":"pay_later",...
          }
       }]
    }
}

在相同的 client_token 之后，JS库使用它来加载Klarna小部件，并且在加载调用中，您需要指定付款方式以在小部件上显示，但是它只能是一种会话响应中收到的可用类别中的。

在您的情况下，您正在显示pay_later的付款方式，正如您在问题更新中所述，它显示的小部件如下：

此外，如果显示了表单，则在load调用中传递的回调处理程序将被show_form调用为true，否则为false（如果出现网络错误/帐户错误/无效的付款方式）。您还可以检查容器并检查网络日志，以验证klarna小部件已加载到iframe中。

最后，为了回答有关在demo store上显示类似表格的问题，您可以使用会话中收到的付款方式创建响应，并为每种方法显示手风琴（展开/ collapse）控件，该控件将在展开时加载相应付款方式的小部件。

klarna klarna-widget payment payment-gateway