如何显示 Klarna Payments 小部件中的表单？答案

【问题标题】：How to get the form in the Klarna Payments Widget displayed?如何显示 Klarna Payments 小部件中的表单？
【发布时间】：2020-10-07 14:38:58
【问题描述】：

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

【问题讨论】：

您检查过控制台吗？如果未显示表单，Klarna 一定返回了一些错误：developers.klarna.com/documentation/klarna-payments/…
@DipenShah 谢谢你的提示！是的，实际上有一个错误。请查看更新后的问题。
错误并没有说太多。您能否检查一下加载回调函数中的 res 值是什么？此外，我相信 pay_later 显示了正确的表单，您可能想添加多个付款选项，而不是像："payment_method_categories": [ "pay_later", "pay_now" ]
@DipenShah 似乎没问题：{show_form: true}.
表示显示正确的表格。让我问一下，您希望展示什么？

标签： payment-gateway payment klarna klarna-widget

【解决方案1】：

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

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

以下是描述 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 付款方式，正如您在问题更新中提到的那样，它显示的小部件如下：

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

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

【讨论】：

检查是否有人遇到类似问题。我可以进入第 2 步）显示 Klarna 付款选择小部件 - 但没有供用户输入任何信息的表单。就好像小部件只是纯粹的视图，显示随着时间的推移支付的金额。这是可以预期的吗？我觉得应该有一个按钮来输入客户数据？
您使用哪种付款方式？
payment_method_category: 'pay_over_time'。感谢您的帮助！
要添加：小部件显示每个间隔将支付的金额以及条款和条件，但没有继续或购买按钮，通常后面是输入电话号码的模式代码，输入帐单信息等。
我继续在这里详细发布了一个问题：stackoverflow.com/questions/68776093/…