Merge pull request #1306 from Adyen/fix/klarna-payment-method-category

Use new payment_method_category field from Klarna payments response
Adyen · Oct 4, 2021 · 52f40d5 · 52f40d5
2 parents 6c496a2 + 054af72
commit 52f40d5
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/packages/lib/src/components/Klarna/components/KlarnaWidget/KlarnaWidget.tsx b/packages/lib/src/components/Klarna/components/KlarnaWidget/KlarnaWidget.tsx
@@ -2,7 +2,7 @@ import Script from '../../../../utils/Script';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { h } from 'preact';
 import { KlarnaWidgetAuthorizeResponse, KlarnaWidgetProps } from '../../types';
-import { KLARNA_VARIANTS, KLARNA_WIDGET_URL } from '../../constants';
+import { KLARNA_WIDGET_URL } from '../../constants';
 import './KlarnaWidget.scss';
 
 export function KlarnaWidget({ sdkData, paymentMethodType, payButton, ...props }: KlarnaWidgetProps) {
@@ -27,7 +27,7 @@ export function KlarnaWidget({ sdkData, paymentMethodType, payButton, ...props }
         window.Klarna.Payments.load(
             {
                 container: klarnaWidgetRef.current,
-                payment_method_category: KLARNA_VARIANTS[paymentMethodType]
+                payment_method_category: sdkData.payment_method_category
             },
             function(res) {
                 // If show_form: true is received together with an error, something fixable is wrong and the consumer
@@ -46,7 +46,7 @@ export function KlarnaWidget({ sdkData, paymentMethodType, payButton, ...props }
         try {
             window.Klarna.Payments.authorize(
                 {
-                    payment_method_category: KLARNA_VARIANTS[paymentMethodType]
+                    payment_method_category: sdkData.payment_method_category
                 },
                 function(res: KlarnaWidgetAuthorizeResponse) {
                     if (res.approved === true && res.show_form === true) {

diff --git a/packages/lib/src/components/Klarna/constants.ts b/packages/lib/src/components/Klarna/constants.ts
@@ -1,6 +1 @@
 export const KLARNA_WIDGET_URL = 'https://x.klarnacdn.net/kp/lib/v1/api.js';
-export const KLARNA_VARIANTS = {
-    klarna: 'pay_later',
-    klarna_paynow: 'pay_now',
-    klarna_account: 'pay_over_time'
-};
diff --git a/packages/lib/src/components/Klarna/types.ts b/packages/lib/src/components/Klarna/types.ts
@@ -15,6 +15,13 @@ export type KlarnaSdkData = {
      * @see https://developers.klarna.com/documentation/klarna-payments/single-call-descriptions/create-session/
      * */
     client_token: string;
+
+    /**
+     * `payment_method_category` specifies which of Klarna’s customer offerings (e.g. Pay now, Pay later or Slice it)
+     * that is being shown in the widget
+     * @see https://developers.klarna.com/documentation/klarna-payments/single-call-descriptions/create-session/
+     * */
+    payment_method_category: string;
 };
 
 interface KlarnaPaymentsShared {