如何解决如何在显示的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>
当前结果如下:
而不是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 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)控件,该控件将在展开时加载相应付款方式的小部件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。