如何让 Klarna Payments Widget 中的表单显示出来？

Question

我正在构建一种 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>

当前结果如下所示：

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

但是没有表格。 如何显示？

更新

刚刚看了一下控制台。有一些警告和错误：

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.
...

但是 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__()

Answer 1

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

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

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

如 detailed guide 中所述，当用户打开结帐页面时：

您的应用程序创建了与 Klarna 的会话
显示 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 类似的表单的问题，您可以使用在会话中收到的付款方式创建响应并为每个method display accordion (expand/collapse) 控制展开时将加载相应付款方式的小部件。

如何让 Klarna Payments Widget 中的表单显示出来？

How to get the form in the Klarna Payments Widget displayed?

payment

payment-gateway

klarna

klarna-widget