如何在显示的Klarna支付Widget中获取表单？
我正在构建一种Klarna支付的沙箱集成(目的是让它在原则上正常工作，然后将逻辑实现到一个真正的商店中)。在docu中描述的第一步，会话创建已经起作用了。现在，我正在尝试显示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>当前的结果如下：
而不是文档中显示的预期结果
但表格不在那里。如何显示它？
更新
只是看了一下控制台。有一些警告和错误：
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__()回答 1
Stack Overflow用户
发布于 2020-10-17 06:50:14
要回答有关如何在Klarna Payments Widget中获得表单的问题？，您已经让它工作了！
为什么它不像预期的那样起作用？让我分享一下有关集成的几个细节。
以下是描述Klarna支付方法工作流程的截图：
正如在详细指南中提到的，当用户打开签出页面时：
- 您的应用程序创建与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",
...
}
}]
}
}在JS库使用相同的client_token，加载Klarna小部件之后，在load call中，您需要指定在小部件上显示的支付方法，但是，只能是会话响应中接收到的可用类别之一。
在您的示例中，您正在显示pay_later支付方法，正如您在更新您的问题时所提到的，它显示的小部件如下：
此外，如果表单显示为true，load调用中的回调处理程序传递将被show_form调用为true，否则为false (在网络错误/帐户错误/无效支付方法的情况下)。您还可以检查您的容器并检查网络日志以验证klarna小部件是否已加载到iframe中。
最后，为了回答有关显示表单类似于 演示商店上的表单的问题，您可以使用会话中收到的支付方法创建响应，并对每个方法显示手风琴(展开/折叠)控件，该控件将在展开时加载相应支付方法的小部件。
https://stackoverflow.com/questions/64246443
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号