From 76ad58164b246d28c0806ea39c7de4dbc33c26c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Mon, 25 Sep 2023 19:03:34 +0300 Subject: [PATCH 01/16] Initial PoC setup --- assets/images/payment-methods/klarna.svg | 4 ++ client/additional-methods-setup/constants.js | 1 + client/checkout/blocks/upe-split.js | 2 + client/checkout/classic/upe-split.js | 2 + client/checkout/constants.js | 1 + .../payment-method-details/index.js | 1 + client/payment-methods-map.tsx | 32 +++++++++++++ client/payment-methods/constants.ts | 1 + client/types/charges.d.ts | 3 +- client/types/payment-methods.d.ts | 1 + client/utils/account-fees.tsx | 2 + includes/class-wc-payment-gateway-wcpay.php | 1 + includes/class-wc-payments.php | 3 ++ includes/constants/class-payment-method.php | 2 + .../class-klarna-payment-method.php | 45 +++++++++++++++++++ .../class-upe-payment-gateway.php | 1 + 16 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 assets/images/payment-methods/klarna.svg create mode 100644 includes/payment-methods/class-klarna-payment-method.php diff --git a/assets/images/payment-methods/klarna.svg b/assets/images/payment-methods/klarna.svg new file mode 100644 index 00000000000..5ccb9e4dac7 --- /dev/null +++ b/assets/images/payment-methods/klarna.svg @@ -0,0 +1,4 @@ + + + + diff --git a/client/additional-methods-setup/constants.js b/client/additional-methods-setup/constants.js index 4f2222ea780..41747020d95 100644 --- a/client/additional-methods-setup/constants.js +++ b/client/additional-methods-setup/constants.js @@ -10,6 +10,7 @@ export const upeMethods = [ 'affirm', 'afterpay_clearpay', 'jcb', + 'klarna', ]; export const upeCapabilityStatuses = { diff --git a/client/checkout/blocks/upe-split.js b/client/checkout/blocks/upe-split.js index ab2463aadc7..6166bdf907a 100644 --- a/client/checkout/blocks/upe-split.js +++ b/client/checkout/blocks/upe-split.js @@ -30,6 +30,7 @@ import { PAYMENT_METHOD_NAME_SOFORT, PAYMENT_METHOD_NAME_AFFIRM, PAYMENT_METHOD_NAME_AFTERPAY, + PAYMENT_METHOD_NAME_KLARNA, } from '../constants.js'; import { getSplitUPEFields } from './upe-split-fields'; import { getDeferredIntentCreationUPEFields } from './upe-deferred-intent-creation/payment-elements'; @@ -46,6 +47,7 @@ const upeMethods = { sofort: PAYMENT_METHOD_NAME_SOFORT, affirm: PAYMENT_METHOD_NAME_AFFIRM, afterpay_clearpay: PAYMENT_METHOD_NAME_AFTERPAY, + klarna: PAYMENT_METHOD_NAME_KLARNA, }; const enabledPaymentMethodsConfig = getUPEConfig( 'paymentMethodsConfig' ); diff --git a/client/checkout/classic/upe-split.js b/client/checkout/classic/upe-split.js index 87edf7333ff..05ad9f1de49 100644 --- a/client/checkout/classic/upe-split.js +++ b/client/checkout/classic/upe-split.js @@ -21,6 +21,7 @@ import { PAYMENT_METHOD_NAME_SOFORT, PAYMENT_METHOD_NAME_AFFIRM, PAYMENT_METHOD_NAME_AFTERPAY, + PAYMENT_METHOD_NAME_KLARNA, SHORTCODE_SHIPPING_ADDRESS_FIELDS, SHORTCODE_BILLING_ADDRESS_FIELDS, } from '../constants'; @@ -657,6 +658,7 @@ jQuery( function ( $ ) { PAYMENT_METHOD_NAME_SOFORT, PAYMENT_METHOD_NAME_AFFIRM, PAYMENT_METHOD_NAME_AFTERPAY, + PAYMENT_METHOD_NAME_KLARNA, paymentMethodsConfig.card !== undefined && PAYMENT_METHOD_NAME_CARD, ].filter( Boolean ); const checkoutEvents = wcpayPaymentMethods diff --git a/client/checkout/constants.js b/client/checkout/constants.js index 5b6c5468905..0558b65e3ce 100644 --- a/client/checkout/constants.js +++ b/client/checkout/constants.js @@ -10,6 +10,7 @@ export const PAYMENT_METHOD_NAME_SOFORT = 'woocommerce_payments_sofort'; export const PAYMENT_METHOD_NAME_AFFIRM = 'woocommerce_payments_affirm'; export const PAYMENT_METHOD_NAME_AFTERPAY = 'woocommerce_payments_afterpay_clearpay'; +export const PAYMENT_METHOD_NAME_KLARNA = 'woocommerce_payments_klarna'; export const PAYMENT_METHOD_NAME_UPE = 'woocommerce_payments_upe'; export const PAYMENT_METHOD_NAME_PAYMENT_REQUEST = 'woocommerce_payments_payment_request'; diff --git a/client/components/payment-method-details/index.js b/client/components/payment-method-details/index.js index 9c78409444a..d47e3cd3086 100755 --- a/client/components/payment-method-details/index.js +++ b/client/components/payment-method-details/index.js @@ -45,6 +45,7 @@ const formatDetails = ( payment ) => { ); case 'affirm': case 'afterpay_clearpay': + case 'klarna': default: return ; } diff --git a/client/payment-methods-map.tsx b/client/payment-methods-map.tsx index 4ffc49befb8..a268699249c 100644 --- a/client/payment-methods-map.tsx +++ b/client/payment-methods-map.tsx @@ -19,6 +19,7 @@ import BankDebitIcon from 'assets/images/payment-methods/bank-debit.svg?asset'; import AffirmIcon from 'assets/images/payment-methods/affirm.svg?asset'; import AfterpayIcon from 'assets/images/payment-methods/afterpay.svg?asset'; import JCBIcon from 'assets/images/payment-methods/jcb.svg?asset'; +import KlarnaIcon from 'assets/images/payment-methods/klarna.svg?asset'; const iconComponent = ( src: string, alt: string ): ReactImgFuncComponent => ( props @@ -247,6 +248,37 @@ const PaymentMethodInformationObject: Record< 'woocommerce-payments' ), }, + klarna: { + id: 'klarna', + label: __( 'Klarna', 'woocommerce-payments' ), + brandTitles: { + affirm: __( 'Klarna', 'woocommerce-payments' ), + }, + description: __( + // translators: %s is the store currency. + // TODO: Is "Available to all customers paying in %s." correct for BNPLs given the introduction of domestic check for PMs?. + 'Allow customers to pay over time with Klarna. Available to all customers paying in %s.', + 'woocommerce-payments' + ), + icon: iconComponent( KlarnaIcon, 'Klarna' ), + currencies: [ + 'AUD', + 'CAD', + 'CHF', + 'CZK', + 'DKK', + 'EUR', + 'GBP', + 'NOK', + 'NZD', + 'PLN', + 'SEK', + 'USD', + ], + stripe_key: 'klarna_payments', + allows_manual_capture: false, + allows_pay_later: true, + }, }; export default PaymentMethodInformationObject; diff --git a/client/payment-methods/constants.ts b/client/payment-methods/constants.ts index 2facf48e83c..9a4b968ff71 100644 --- a/client/payment-methods/constants.ts +++ b/client/payment-methods/constants.ts @@ -11,6 +11,7 @@ enum PAYMENT_METHOD_IDS { CARD = 'card', CARD_PRESENT = 'card_present', EPS = 'eps', + KLARNA = 'klarna', GIROPAY = 'giropay', IDEAL = 'ideal', LINK = 'link', diff --git a/client/types/charges.d.ts b/client/types/charges.d.ts index 99dd079795f..d61760685e9 100644 --- a/client/types/charges.d.ts +++ b/client/types/charges.d.ts @@ -41,7 +41,8 @@ export interface PaymentMethodDetails { | 'ideal' | 'p24' | 'sepa_debit' - | 'sofort'; + | 'sofort' + | 'klarna'; } export type OutcomeRiskLevel = diff --git a/client/types/payment-methods.d.ts b/client/types/payment-methods.d.ts index 2681e212745..97cab2fd0f3 100644 --- a/client/types/payment-methods.d.ts +++ b/client/types/payment-methods.d.ts @@ -14,6 +14,7 @@ export type PaymentMethod = | 'card' | 'card_present' | 'eps' + | 'klarna' | 'giropay' | 'ideal' | 'p24' diff --git a/client/utils/account-fees.tsx b/client/utils/account-fees.tsx index f7cdd94a149..e2018013c3a 100644 --- a/client/utils/account-fees.tsx +++ b/client/utils/account-fees.tsx @@ -395,6 +395,8 @@ export const getTransactionsPaymentMethodName = ( return __( 'Affirm transactions', 'woocommerce-payments' ); case 'afterpay_clearpay': return __( 'Afterpay transactions', 'woocommerce-payments' ); + case 'klarna': + return __( 'Klarna transactions', 'woocommerce-payments' ); default: return __( 'Unknown transactions', 'woocommerce-payments' ); } diff --git a/includes/class-wc-payment-gateway-wcpay.php b/includes/class-wc-payment-gateway-wcpay.php index 3e6c8f5e8a5..540c1f3ab4c 100644 --- a/includes/class-wc-payment-gateway-wcpay.php +++ b/includes/class-wc-payment-gateway-wcpay.php @@ -398,6 +398,7 @@ public function __construct( 'link' => 'link_payments', 'affirm' => 'affirm_payments', 'afterpay_clearpay' => 'afterpay_clearpay_payments', + 'klarna' => 'klarna_payments', ]; // WooPay utilities. diff --git a/includes/class-wc-payments.php b/includes/class-wc-payments.php index 124b42bd31e..3f25e960b0d 100644 --- a/includes/class-wc-payments.php +++ b/includes/class-wc-payments.php @@ -17,6 +17,7 @@ use WCPay\Payment_Methods\Bancontact_Payment_Method; use WCPay\Payment_Methods\Becs_Payment_Method; use WCPay\Payment_Methods\Giropay_Payment_Method; +use WCPay\Payment_Methods\Klarna_Payment_Method; use WCPay\Payment_Methods\P24_Payment_Method; use WCPay\Payment_Methods\Sepa_Payment_Method; use WCPay\Payment_Methods\Sofort_Payment_Method; @@ -396,6 +397,7 @@ public static function init() { include_once __DIR__ . '/payment-methods/class-affirm-payment-method.php'; include_once __DIR__ . '/payment-methods/class-afterpay-payment-method.php'; include_once __DIR__ . '/payment-methods/class-jcb-payment-method.php'; + include_once __DIR__ . '/payment-methods/class-klarna-payment-method.php'; include_once __DIR__ . '/class-wc-payment-token-wcpay-sepa.php'; include_once __DIR__ . '/class-wc-payments-status.php'; include_once __DIR__ . '/class-wc-payments-token-service.php'; @@ -505,6 +507,7 @@ public static function init() { Affirm_Payment_Method::class, Afterpay_Payment_Method::class, JCB_Payment_Method::class, + Klarna_Payment_Method::class, ]; if ( WC_Payments_Features::is_upe_deferred_intent_enabled() ) { $payment_methods = []; diff --git a/includes/constants/class-payment-method.php b/includes/constants/class-payment-method.php index 4114885de00..bfd0edcbcb0 100644 --- a/includes/constants/class-payment-method.php +++ b/includes/constants/class-payment-method.php @@ -35,6 +35,7 @@ class Payment_Method extends Base_Constant { const US_BANK_ACCOUNT = 'us_bank_account'; const AFFIRM = 'affirm'; const AFTERPAY = 'afterpay_clearpay'; + const KLARNA = 'klarna'; const IPP_ALLOWED_PAYMENT_METHODS = [ self::CARD_PRESENT, @@ -44,5 +45,6 @@ class Payment_Method extends Base_Constant { const BNPL_PAYMENT_METHODS = [ self::AFFIRM, self::AFTERPAY, + self::KLARNA, ]; } diff --git a/includes/payment-methods/class-klarna-payment-method.php b/includes/payment-methods/class-klarna-payment-method.php new file mode 100644 index 00000000000..7e1b54d7226 --- /dev/null +++ b/includes/payment-methods/class-klarna-payment-method.php @@ -0,0 +1,45 @@ +stripe_id = self::PAYMENT_METHOD_STRIPE_ID; + $this->title = __( 'Klarna', 'woocommerce-payments' ); + $this->is_reusable = false; + $this->icon_url = plugins_url( 'assets/images/payment-methods/klarna.svg', WCPAY_PLUGIN_FILE ); + $this->currencies = [ 'AUD', 'CAD', 'CHF', 'CZK', 'DKK', 'EUR', 'GBP', 'NOK', 'NZD', 'PLN', 'SEK', 'USD' ]; + $this->accept_only_domestic_payment = true; + $this->countries = [ 'AU', 'AT', 'BE', 'CA', 'CZ', 'DK', 'FI', 'FR', 'GR', 'DE', 'IE', 'IT', 'NL', 'NZ', 'NO', 'PL', 'PT', 'ES', 'SE', 'CH', 'GB', 'US' ]; + } + + /** + * Returns testing credentials to be printed at checkout in test mode. + * + * @return string + */ + public function get_testing_instructions() { + return ''; + } +} diff --git a/includes/payment-methods/class-upe-payment-gateway.php b/includes/payment-methods/class-upe-payment-gateway.php index 60f0af9666e..eb105bf6bb9 100644 --- a/includes/payment-methods/class-upe-payment-gateway.php +++ b/includes/payment-methods/class-upe-payment-gateway.php @@ -1064,6 +1064,7 @@ public function get_upe_available_payment_methods() { $available_methods[] = Link_Payment_Method::PAYMENT_METHOD_STRIPE_ID; $available_methods[] = Affirm_Payment_Method::PAYMENT_METHOD_STRIPE_ID; $available_methods[] = Afterpay_Payment_Method::PAYMENT_METHOD_STRIPE_ID; + $available_methods[] = Klarna_Payment_Method::PAYMENT_METHOD_STRIPE_ID; // List JCB method for Japanese account only. if ( 'JP' === $this->account->get_account_country() ) { From 5948fe205002c7484f6cdb23aa9cb0ba0b9e608e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Wed, 27 Sep 2023 11:26:49 +0300 Subject: [PATCH 02/16] Add missing constant to fix the checkout --- client/checkout/constants.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/checkout/constants.js b/client/checkout/constants.js index 0558b65e3ce..4f48eae96fd 100644 --- a/client/checkout/constants.js +++ b/client/checkout/constants.js @@ -31,6 +31,7 @@ export function getPaymentMethodsConstants() { PAYMENT_METHOD_NAME_AFFIRM, PAYMENT_METHOD_NAME_AFTERPAY, PAYMENT_METHOD_NAME_CARD, + PAYMENT_METHOD_NAME_KLARNA, ]; } From 1a858c1bac43c641beef04fb45ffcbaa0cec291f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Wed, 27 Sep 2023 16:23:42 +0300 Subject: [PATCH 03/16] Refactor: visually group all BNPLs together --- includes/class-wc-payments.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/includes/class-wc-payments.php b/includes/class-wc-payments.php index 3f25e960b0d..d92822d3edc 100644 --- a/includes/class-wc-payments.php +++ b/includes/class-wc-payments.php @@ -396,8 +396,8 @@ public static function init() { include_once __DIR__ . '/payment-methods/class-link-payment-method.php'; include_once __DIR__ . '/payment-methods/class-affirm-payment-method.php'; include_once __DIR__ . '/payment-methods/class-afterpay-payment-method.php'; - include_once __DIR__ . '/payment-methods/class-jcb-payment-method.php'; include_once __DIR__ . '/payment-methods/class-klarna-payment-method.php'; + include_once __DIR__ . '/payment-methods/class-jcb-payment-method.php'; include_once __DIR__ . '/class-wc-payment-token-wcpay-sepa.php'; include_once __DIR__ . '/class-wc-payments-status.php'; include_once __DIR__ . '/class-wc-payments-token-service.php'; @@ -506,8 +506,8 @@ public static function init() { Link_Payment_Method::class, Affirm_Payment_Method::class, Afterpay_Payment_Method::class, - JCB_Payment_Method::class, Klarna_Payment_Method::class, + JCB_Payment_Method::class, ]; if ( WC_Payments_Features::is_upe_deferred_intent_enabled() ) { $payment_methods = []; From 5ba12b011f68b3c3f85ec2c9c0a9f3abf98497a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Mon, 2 Oct 2023 13:33:18 +0300 Subject: [PATCH 04/16] Actualise country and currency list --- includes/payment-methods/class-klarna-payment-method.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/includes/payment-methods/class-klarna-payment-method.php b/includes/payment-methods/class-klarna-payment-method.php index 7e1b54d7226..9a13c154e75 100644 --- a/includes/payment-methods/class-klarna-payment-method.php +++ b/includes/payment-methods/class-klarna-payment-method.php @@ -29,9 +29,9 @@ public function __construct( $token_service ) { $this->title = __( 'Klarna', 'woocommerce-payments' ); $this->is_reusable = false; $this->icon_url = plugins_url( 'assets/images/payment-methods/klarna.svg', WCPAY_PLUGIN_FILE ); - $this->currencies = [ 'AUD', 'CAD', 'CHF', 'CZK', 'DKK', 'EUR', 'GBP', 'NOK', 'NZD', 'PLN', 'SEK', 'USD' ]; + $this->currencies = [ 'USD', 'GBP', 'EUR' ]; $this->accept_only_domestic_payment = true; - $this->countries = [ 'AU', 'AT', 'BE', 'CA', 'CZ', 'DK', 'FI', 'FR', 'GR', 'DE', 'IE', 'IT', 'NL', 'NZ', 'NO', 'PL', 'PT', 'ES', 'SE', 'CH', 'GB', 'US' ]; + $this->countries = [ 'US', 'GB', 'AT', 'DE', 'NL', 'BE', 'ES', 'IT' ]; } /** From 5db6a65d96686f485a20733d7b4ca055e60bdb9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Mon, 2 Oct 2023 13:34:44 +0300 Subject: [PATCH 05/16] Add Klarna icon --- assets/images/payment-methods/klarna.svg | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/assets/images/payment-methods/klarna.svg b/assets/images/payment-methods/klarna.svg index 5ccb9e4dac7..948f281a04b 100644 --- a/assets/images/payment-methods/klarna.svg +++ b/assets/images/payment-methods/klarna.svg @@ -1,4 +1,11 @@ - - + + + + + + + + + From 193008b9a084af33a4832c1c4099516d77d3e773 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Mon, 2 Oct 2023 15:36:50 +0300 Subject: [PATCH 06/16] Update list of currencies in JS --- client/payment-methods-map.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/client/payment-methods-map.tsx b/client/payment-methods-map.tsx index a268699249c..40cb9c1a299 100644 --- a/client/payment-methods-map.tsx +++ b/client/payment-methods-map.tsx @@ -261,20 +261,7 @@ const PaymentMethodInformationObject: Record< 'woocommerce-payments' ), icon: iconComponent( KlarnaIcon, 'Klarna' ), - currencies: [ - 'AUD', - 'CAD', - 'CHF', - 'CZK', - 'DKK', - 'EUR', - 'GBP', - 'NOK', - 'NZD', - 'PLN', - 'SEK', - 'USD', - ], + currencies: [ 'EUR', 'GBP', 'USD' ], stripe_key: 'klarna_payments', allows_manual_capture: false, allows_pay_later: true, From 2e36ce8c972f9f4ed2d7e65cb98f5c0493e33a7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Mon, 2 Oct 2023 18:39:04 +0300 Subject: [PATCH 07/16] Add changelog --- changelog/add-7243-introduce-klarna-pm | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog/add-7243-introduce-klarna-pm diff --git a/changelog/add-7243-introduce-klarna-pm b/changelog/add-7243-introduce-klarna-pm new file mode 100644 index 00000000000..a2ab1a34134 --- /dev/null +++ b/changelog/add-7243-introduce-klarna-pm @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Add Klarna payment method From 0666a981cb9d389358283f94b135d0d34eb72631 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Tue, 3 Oct 2023 11:07:45 +0300 Subject: [PATCH 08/16] Add css rule for Klarna icon --- assets/css/admin.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/css/admin.css b/assets/css/admin.css index 8b17d53e766..28ff0430c73 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -128,6 +128,10 @@ background-image: url( '../images/payment-methods/affirm-icon.svg' ); } +.payment-method__brand--klarna { + background-image: url( '../images/payment-methods/klarna.svg' ); +} + .wc_gateways tr[data-gateway_id='woocommerce_payments'] .payment-method__icon { border: 1px solid #ddd; border-radius: 2px; From d3cc93f0f133319fd8a0d479ddde958703b2963e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Tue, 3 Oct 2023 11:22:01 +0300 Subject: [PATCH 09/16] Add payment method details in transaction detail page for Klarna --- .../payment-details/payment-method/index.js | 2 + .../payment-method/klarna/index.js | 146 ++++++++++++++++++ 2 files changed, 148 insertions(+) create mode 100644 client/payment-details/payment-method/klarna/index.js diff --git a/client/payment-details/payment-method/index.js b/client/payment-details/payment-method/index.js index 11fde70c853..7caf848440f 100644 --- a/client/payment-details/payment-method/index.js +++ b/client/payment-details/payment-method/index.js @@ -20,6 +20,7 @@ import IdealDetails from './ideal'; import P24Details from './p24'; import SepaDetails from './sepa'; import SofortDetails from './sofort'; +import KlarnaDetails from 'wcpay/payment-details/payment-method/klarna'; const detailsComponentMap = { card: CardDetails, @@ -32,6 +33,7 @@ const detailsComponentMap = { p24: P24Details, sepa_debit: SepaDetails, sofort: SofortDetails, + klarna: KlarnaDetails, }; const PaymentDetailsPaymentMethod = ( { charge = {}, isLoading } ) => { diff --git a/client/payment-details/payment-method/klarna/index.js b/client/payment-details/payment-method/klarna/index.js new file mode 100644 index 00000000000..2304a919eef --- /dev/null +++ b/client/payment-details/payment-method/klarna/index.js @@ -0,0 +1,146 @@ +/** @format **/ + +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies. + */ +import PaymentDetailsPaymentMethodDetail from '../detail'; + +/** + * Extracts and formats payment method details from a charge. + * + * @param {Object} charge The charge object. + * @return {Object} A flat hash of all necessary values. + */ +const formatPaymentMethodDetails = ( charge ) => { + const { billing_details: billingDetails, payment_method: id } = charge; + + const { + country: countryCode, + verified_name: verifiedName, + payment_method_category: paymentMethodCategory, + preferred_locale: preferredLocale, + } = charge.payment_method_details.klarna; + + const { name, email, formatted_address: formattedAddress } = billingDetails; + // Use the full country name. + const country = wcSettings.countries[ countryCode ]; + + return { + verifiedName, + id, + name, + email, + country, + formattedAddress, + paymentMethodCategory, + preferredLocale, + }; +}; + +/** + * Placeholders to display while loading. + */ +const paymentMethodPlaceholders = { + verifiedName: 'verified name placeholder', + fingerprint: 'fingerprint placeholder', + id: 'id placeholder', + name: 'name placeholder', + email: 'email placeholder', + formattedAddress: 'address placeholder', + country: 'country placeholder', +}; + +const KlarnaDetails = ( { charge = {}, isLoading } ) => { + const details = charge.payment_method_details + ? formatPaymentMethodDetails( charge ) + : paymentMethodPlaceholders; + + const { + verifiedName, + id, + name, + email, + country, + formattedAddress, + paymentMethodCategory, + preferredLocale, + } = details; + + // Shorthand for more readable code. + const Detail = PaymentDetailsPaymentMethodDetail; + + return ( +
+
+ + { id } + + + + { paymentMethodCategory } + + + + { preferredLocale } + +
+ +
+ + { verifiedName } + + + + { name } + + + + { email } + + + + + + + + { country } + +
+
+ ); +}; + +export default KlarnaDetails; From 6cc27ae44e964f50ec461a442356dee6cd0e3dda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Tue, 3 Oct 2023 14:34:28 +0300 Subject: [PATCH 10/16] Refactor: consistent import statement --- client/payment-details/payment-method/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/payment-details/payment-method/index.js b/client/payment-details/payment-method/index.js index 7caf848440f..a20981a583b 100644 --- a/client/payment-details/payment-method/index.js +++ b/client/payment-details/payment-method/index.js @@ -20,7 +20,7 @@ import IdealDetails from './ideal'; import P24Details from './p24'; import SepaDetails from './sepa'; import SofortDetails from './sofort'; -import KlarnaDetails from 'wcpay/payment-details/payment-method/klarna'; +import KlarnaDetails from './klarna'; const detailsComponentMap = { card: CardDetails, From c0fe453549c87591a31085ad56e2e5a4f25c18f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Tue, 3 Oct 2023 14:46:17 +0300 Subject: [PATCH 11/16] Remove unnecessary fields --- .../payment-method/klarna/index.js | 27 ++----------------- 1 file changed, 2 insertions(+), 25 deletions(-) diff --git a/client/payment-details/payment-method/klarna/index.js b/client/payment-details/payment-method/klarna/index.js index 2304a919eef..53d63262557 100644 --- a/client/payment-details/payment-method/klarna/index.js +++ b/client/payment-details/payment-method/klarna/index.js @@ -20,22 +20,16 @@ const formatPaymentMethodDetails = ( charge ) => { const { billing_details: billingDetails, payment_method: id } = charge; const { - country: countryCode, - verified_name: verifiedName, payment_method_category: paymentMethodCategory, preferred_locale: preferredLocale, } = charge.payment_method_details.klarna; const { name, email, formatted_address: formattedAddress } = billingDetails; // Use the full country name. - const country = wcSettings.countries[ countryCode ]; - return { - verifiedName, id, name, email, - country, formattedAddress, paymentMethodCategory, preferredLocale, @@ -46,13 +40,12 @@ const formatPaymentMethodDetails = ( charge ) => { * Placeholders to display while loading. */ const paymentMethodPlaceholders = { - verifiedName: 'verified name placeholder', - fingerprint: 'fingerprint placeholder', id: 'id placeholder', name: 'name placeholder', email: 'email placeholder', formattedAddress: 'address placeholder', - country: 'country placeholder', + paymentMethodCategory: 'category placeholder', + preferredLocale: 'locale placeholder', }; const KlarnaDetails = ( { charge = {}, isLoading } ) => { @@ -61,11 +54,9 @@ const KlarnaDetails = ( { charge = {}, isLoading } ) => { : paymentMethodPlaceholders; const { - verifiedName, id, name, email, - country, formattedAddress, paymentMethodCategory, preferredLocale, @@ -100,13 +91,6 @@ const KlarnaDetails = ( { charge = {}, isLoading } ) => {
- - { verifiedName } - - { } } /> - - - { country } -
); From 626d505f24b8e792838af9b1aac7c743684c2746 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Tue, 3 Oct 2023 14:46:33 +0300 Subject: [PATCH 12/16] Resolve todo --- client/payment-methods-map.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/payment-methods-map.tsx b/client/payment-methods-map.tsx index 40cb9c1a299..bdc4b54c3d5 100644 --- a/client/payment-methods-map.tsx +++ b/client/payment-methods-map.tsx @@ -256,7 +256,6 @@ const PaymentMethodInformationObject: Record< }, description: __( // translators: %s is the store currency. - // TODO: Is "Available to all customers paying in %s." correct for BNPLs given the introduction of domestic check for PMs?. 'Allow customers to pay over time with Klarna. Available to all customers paying in %s.', 'woocommerce-payments' ), From 240d775ef30b85271181f159cc24ad76d9f3a81c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Wed, 4 Oct 2023 11:37:15 +0300 Subject: [PATCH 13/16] Translate payment method categories --- .../payment-method/klarna/index.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/client/payment-details/payment-method/klarna/index.js b/client/payment-details/payment-method/klarna/index.js index 53d63262557..4f987a2b6d8 100644 --- a/client/payment-details/payment-method/klarna/index.js +++ b/client/payment-details/payment-method/klarna/index.js @@ -24,14 +24,25 @@ const formatPaymentMethodDetails = ( charge ) => { preferred_locale: preferredLocale, } = charge.payment_method_details.klarna; + const paymentMethodCategoryTranslations = { + pay_later: __( 'pay_later', 'woocommerce-payments' ), + pay_now: __( 'pay_now', 'woocommerce-payments' ), + pay_with_financing: __( 'pay_with_financing', 'woocommerce-payments' ), + pay_in_installments: __( + 'pay_in_installments', + 'woocommerce-payments' + ), + }; + const { name, email, formatted_address: formattedAddress } = billingDetails; - // Use the full country name. + return { id, name, email, formattedAddress, - paymentMethodCategory, + paymentMethodCategory: + paymentMethodCategoryTranslations[ paymentMethodCategory ], preferredLocale, }; }; From 4a7be52a833cb9f8f9007f22167eff71fff46a30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Wed, 4 Oct 2023 11:38:07 +0300 Subject: [PATCH 14/16] Use correct order --- client/types/charges.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/types/charges.d.ts b/client/types/charges.d.ts index d61760685e9..df26095d92c 100644 --- a/client/types/charges.d.ts +++ b/client/types/charges.d.ts @@ -39,10 +39,10 @@ export interface PaymentMethodDetails { | 'eps' | 'giropay' | 'ideal' + | 'klarna' | 'p24' | 'sepa_debit' - | 'sofort' - | 'klarna'; + | 'sofort'; } export type OutcomeRiskLevel = From 183efc0ffe3c9725d18a6e00f851eb615c666def Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Wed, 4 Oct 2023 11:39:52 +0300 Subject: [PATCH 15/16] Improve import statement readability --- client/payment-details/payment-method/klarna/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/client/payment-details/payment-method/klarna/index.js b/client/payment-details/payment-method/klarna/index.js index 4f987a2b6d8..0f580f036c5 100644 --- a/client/payment-details/payment-method/klarna/index.js +++ b/client/payment-details/payment-method/klarna/index.js @@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies. */ -import PaymentDetailsPaymentMethodDetail from '../detail'; +import Detail from '../detail'; /** * Extracts and formats payment method details from a charge. @@ -73,9 +73,6 @@ const KlarnaDetails = ( { charge = {}, isLoading } ) => { preferredLocale, } = details; - // Shorthand for more readable code. - const Detail = PaymentDetailsPaymentMethodDetail; - return (
From 1cec35ea2c13129320710ce3291a00071cf730df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C4=81rlis=20Janisels?= Date: Thu, 5 Oct 2023 11:41:42 +0300 Subject: [PATCH 16/16] Add limits per currency --- .../class-klarna-payment-method.php | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/includes/payment-methods/class-klarna-payment-method.php b/includes/payment-methods/class-klarna-payment-method.php index 9a13c154e75..5e7823960df 100644 --- a/includes/payment-methods/class-klarna-payment-method.php +++ b/includes/payment-methods/class-klarna-payment-method.php @@ -32,6 +32,20 @@ public function __construct( $token_service ) { $this->currencies = [ 'USD', 'GBP', 'EUR' ]; $this->accept_only_domestic_payment = true; $this->countries = [ 'US', 'GB', 'AT', 'DE', 'NL', 'BE', 'ES', 'IT' ]; + $this->limits_per_currency = [ + 'USD' => [ + 'min' => 1000, + 'max' => 500000, + ], // Represents USD 10 - 5,000 AUD. + 'GBP' => [ + 'min' => 1000, + 'max' => 500000, + ], // Represents GBP 10 - 5,000 AUD. + 'EUR' => [ + 'min' => 1000, + 'max' => 500000, + ], // Represents EUR 10 - 5,000 AUD. + ]; } /**