feat(payment): INT-6342 fix klarna issue adding klarna v1 payment_method

[jmontesbc]

What?

I switched to use PaymentMethodRequestSender.loadPaymentMethod function instead paymentMethodActionCreator.loadPaymentMethod(gateway_id) to avoid the klarnav1 payment method adding.

Why?

we noticed that when we use loadPaymentMethod(gateway_id) function, load Klarna v1 payment_methods

Testing / Proof

@bigcommerce/checkout @bigcommerce/payments

[BC-ISilva]

💚 Tested: QE Details: PR has been validated, following scenarios have been tested.

1. Validate none extra Klarna Payment method are displaying on Klarna Drop in component.
2. Place order with Klarna Pay Later.
3. Place order with Klarna Pay Now.
4. Place order with Klarna Slice it.

Video from validation have been uploaded into following google drive folder: https://drive.google.com/drive/folders/1B97C5Ma8VHrMNvXPCI1PoUNpaQeczddC

[jmontesbc]

hey @clopezh!! thanks for reviewing my pr!

I have already worked on your comments, sorry for the commented lines, everything it's ok now. Could you please review it again?

Please let me know if there's anything else that I can help with.

[clopezh]

Hello @animesh1987 I understand your point, and this has an explanation why we're using _paymentMethodRequestSender instead of _paymentMethodActionCreator: Klarna has two "versions" inside the same module, Klarna V1 and Klarna V2: The main differences are the way Klarna render the payment options:

• Klarna V1:

Shows only 1 option and inside of it has all the options available. The payload for this payment method is something like this:

{
    "id": "klarna",
    "gateway": null,
    ...etc
}

• Klarna V2

Shows all the available options as a separate ones. The payload for this options is something like this:

[
    {
        "id": "paynow",
        "gateway": "klarna",
        ...etc
    },
    {
        "id": "paylater",
        "gateway": "klarna",
        ...etc
    },
    {
        "id": "payovertime",
        "gateway": "klarna",
        ...etc
    },
]

So when I call this._paymentMethodActionCreator.loadPaymentMethod("klarna") inside of the logic of this method, it validates if that payment method exists into the state.paymentMethods, and if we're using Klarna V2, the answer is NO, because the id for V1 is "klarna" and for V2 can be "paynow". That's why the array changed and added the new option on the fly.

To fix this and because we need to call /api/storefront/payments/${methodId} this endpoint to update the existing clientToken (and session on Klarna), we use directly _paymentMethodRequestSender, so we avoid to add the extra option and we refresh the token without impact to the user experience.

Animesh if you identify another way to fix this we're open to change the approach, but for now this is the path we found to fix the problem.

cc. @bc-erich @jmontesbc

[animesh1987]

Hey @clopezh so to understand it correct the goal of this call is to update the existing client token?

Also the reason we are calling the requestSender directly is because methodId klarna fetches v1 payment method?

Is there a way we can load the relevant method by passing in options same as this._paymentMethodActionCreator.loadPaymentMethod(gatewayId, { ...options, params: { ...options?.params, method: methodId } }) ?

[clopezh]

Hi @animesh1987 I tried your suggestion but this doesn't work:

So I think this is not only checkout-sdk-js work but also bcapp and this impacts directly core code, and it implies more time and affectation in the deadline for this fix which is affecting several stores.

So my question is, Can we go with this solution to fix the stores and also add this topic for our sync calls and start the discussions to create an approach to make this available through _paymentMethodActionCreator and with a better analysis.

What do you think?

cc. @bc-erich

[clopezh]

@animesh1987 now is ready for you review again :D 🚀