如何正确显示 Klarna Pay Over Time 小部件？答案

【问题标题】：How to get Klarna Pay Over Time widget displayed correctly?如何正确显示 Klarna Pay Over Time 小部件？
【发布时间】：2021-08-13 17:13:42
【问题描述】：

我正在将 Klarna 集成到与 Adyen 绑定的沙盒环境中。我已经完全按照docs 进行操作，但是遇到了一个问题，小部件中没有显示“继续”按钮，从而阻止了结帐过程。

-预期-

-实际（缺少按钮）-

要重新创建的代码：

发帖至：https://checkout-test.adyen.com/v67/payments

{
  "merchantAccount": "MERCHANTLLC",
  "reference": "123",
  "paymentMethod": {
    "type": "klarna_account"
  },
  "amount": {
    "currency": "USD",
    "value": 18210
  },
  "shopperLocale": "en_US",
  "countryCode": "US",
  "telephoneNumber": "1111111111",
  "shopperEmail": "test@gmail.com",
  "shopperName": {
    "firstName": "John",
    "lastName": "Doe"
  },
  "returnUrl": "http://someurl.com",
  "lineItems": [
    {
      "quantity": 1,
      "amountExcludingTax": "16900",
      "taxPercentage": "775",
      "description": "asdfasdf",
      "id": "123",
      "taxAmount": 1310,
      "amountIncludingTax": "18210",
      "productUrl": "http://producturl.com"
    }
  ]
}

返回 client_token：“ABC123”。然后使用该令牌通过klarna docs 加载小部件：

 window['Klarna']['Payments'].init({
      client_token: 'ABC123'
    })
    window['Klarna']['Payments'].load({
      container: '#klarna-payments-container',
      payment_method_category: 'pay_over_time',
      instance_id: "klarna-payments-instance"
    },
      function (res) {
        console.log(res);
      })

回调返回的是{show_form: true}，小部件加载上面的ACTUAL (MISSING BUTTON)图片。我在这里想念什么？我不明白为什么小部件中没有显示继续按钮。然后，此按钮将在 Klarna 中授权用户，获取帐单信息等。任何帮助将不胜感激！目标是显示“继续”按钮。

【问题讨论】：

可能很明显，但是：您的控制台是否显示任何错误？网络选项卡中有什么可疑的吗？您是否在某处添加了<div id="klarna-payments-container"></div>？会不会是对沙盒的限制？为什么写：“Testdrive”？ DOM 中的按钮是隐藏的吗？

标签： javascript angular adyen klarna klarna-widget

【解决方案1】：

在与 Klarna 团队交谈后回答我自己的问题。在开发端，您需要创建自己的按钮并调用“授权”端点。文档可以在这里找到：https://developers.klarna.com/documentation/klarna-payments/integration-guide/authorize/

【讨论】：