0

我正在构建一种 Klarna Payments 的沙盒集成（使其原则上工作并稍后将逻辑实施到真实商店中）。文档中描述的第一步，会话创建，已经奏效。现在我正在尝试显示 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 小部件

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

Klarna 小部件表单

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

更新

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

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 小部件套接字错误

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

1 回答 1

2

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

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

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

在此处输入图像描述

如详细指南中所述，当用户打开结帐页面时：

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

现在，当您第一次创建与 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 中。

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

于 2020-10-17T06:50:14.987 回答