maciejgolis_klarna-messaging-element | Stripe Developers | Page 1

broken charmBOT Mar 25, 2024, 5:53 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1221879525072175175

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

random islandBOT Mar 25, 2024, 5:56 PM

#

knotty surge Mar 25, 2024, 5:57 PM

#

Hi 👋

Can you share the front-end code you are using to create the Messaging element?

remote hawk Mar 25, 2024, 6:01 PM

#

sure

#

export async function initStripePaymentMethodMessaging() {

//setTimeout(async () => {
paymentMethodMessageElements = queryDocument<HTMLElement>(config.paymentMethodMessageSelector);

if(paymentMethodMessageElements) {
  stripe = await loadStripe(config.stripeApiKey, {
    stripeAccount: config.stripeAccount
  });

  const elementOptions: StripeElementsOptionsClientSecret = {};
  //   appearance: {
  //     theme: 'stripe'                    
  //   },
  //   fonts: [{
  //     family: 'ariana-pro',
  //     src: 'url("https://use.typekit.net/af/1e9eba/00000000000000007735cbdf/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3")',
  //     weight: '500',
  //     style: 'normal',
  //   }]
  // };

  try {
    const elements = stripe.elements(elementOptions);

    paymentMethodMessageElements.forEach((paymentMethodMessageElement) => {
      const options: StripePaymentMethodMessagingElementOptions = {
        amount: parseFloat(paymentMethodMessageElement.dataset.amount) * 100,
        currency: 'GBP',        
        countryCode: 'GB',            
        paymentMethodTypes: ['klarna', 'afterpay_clearpay', 'affirm'],
        //paymentMethodTypes: ['klarna']
      };
      const paymentMessageElement = elements.create('paymentMethodMessaging', options);
      paymentMessageElement.mount(`#${paymentMethodMessageElement.id}`);
    
    });
  }     
  catch(e) {
    alert('error')
  }
}

//}, 3000);
}

knotty surge Mar 25, 2024, 6:03 PM

#

I'm guessing that the backticks for the template literal you are using got coverted to code formatting here.

remote hawk Mar 25, 2024, 6:04 PM

#

correct

#

initially I had only klarna and that started returning empty iframe

#

I have examined the iframe content

#

{ "merchant_id": "acct_1J6b7FJojNje4Qu0", "payment_methods": [ "klarna" ], "partner_configs": {}, "api_feature_flags": [ { "key": "enable_demo_pay", "result": false }, { "key": "enable_apple_pay_later", "result": false }, { "key": "enable_affirm_prequalification_modal", "result": true }, { "key": "enable_single_line_view_v1", "result": true }, { "key": "disable_afterpay_payment_intent_confirmation_by_region", "result": false }, { "key": "enable_klarna_api", "result": false } ] }

knotty surge Mar 25, 2024, 6:07 PM

#

If you go back to a hard-coded (non-looping) approach, does Klarna re-appear?

remote hawk Mar 25, 2024, 6:09 PM

#

give me 2 mins

#

(it used to...)

#

`
const elements = stripe.elements(elementOptions);

      var paymentMethodMessageElement = paymentMethodMessageElements[0];
      const options: StripePaymentMethodMessagingElementOptions = {
        amount: parseFloat(paymentMethodMessageElement.dataset.amount) * 100,
        currency: 'GBP',        
        countryCode: 'GB',            
        //paymentMethodTypes: ['klarna', 'afterpay_clearpay', 'affirm'],
        paymentMethodTypes: ['klarna']
      };
      const paymentMessageElement = elements.create('paymentMethodMessaging', options);
      paymentMessageElement.mount(`#${paymentMethodMessageElement.id}`);

`

knotty surge Mar 25, 2024, 6:13 PM

#

Okay and does this render the Messaging element?

remote hawk Mar 25, 2024, 6:13 PM

#

knotty surge Mar 25, 2024, 6:14 PM

#

Also, ca you you hard code the HTML element ID instead of using the template literal?

remote hawk Mar 25, 2024, 6:18 PM

#

#

knotty surge Mar 25, 2024, 6:21 PM

#

Okay and there's nothing visible showing up there?

remote hawk Mar 25, 2024, 6:21 PM

#

nothing at all

#

knotty surge Mar 25, 2024, 6:30 PM

#

Can you log the amount?

#

What happens if you hard-code that to something like 5099?

remote hawk Mar 25, 2024, 6:33 PM

#

hardcoded amount now

#

an interesting one, isn't it?

knotty surge Mar 25, 2024, 6:34 PM

#

And you are still not seeing the messaging element?

remote hawk Mar 25, 2024, 6:34 PM

#

I am afraid not

knotty surge Mar 25, 2024, 6:35 PM

#

Oh, wait

#

What if you include afterpay/clearpay?

remote hawk Mar 25, 2024, 6:35 PM

#

that will work

#

but no klarna

#

knotty surge Mar 25, 2024, 6:37 PM

#

I think it's an amount restriction. Try adding another 0, making int 550.00

remote hawk Mar 25, 2024, 6:38 PM

#

we do have products on this ranging from 50 to 400

#

but let's give it ago

#

knotty surge Mar 25, 2024, 6:39 PM

#

I see Klarna disappearing when I change currency to GBP in my repro

remote hawk Mar 25, 2024, 6:40 PM

#

let me flick to USD

#

weird!

#

also when you change the country in the docs -> https://docs.stripe.com/payments/payment-method-messaging?locale=en-GB

Payment Method Messaging Element

Automatically explain buy now, pay later payment options.

#

klarna does dissapear

#

and here we go:

knotty surge Mar 25, 2024, 6:44 PM

#

Ah .... okay

remote hawk Mar 25, 2024, 6:44 PM

#

sorry

knotty surge Mar 25, 2024, 6:44 PM

#

International incident, at least it wasn't our code 😅

remote hawk Mar 25, 2024, 6:44 PM

#

the whole point we are going it is to be compliant

#

and it did work last week

#

did throw me off!

#

thanks @knotty surge !

random islandBOT Mar 25, 2024, 6:44 PM

#

knotty surge Mar 25, 2024, 6:45 PM

#

Happy to debug with you!

remote hawk Mar 25, 2024, 6:45 PM

#

that was interesting experience

#

thanks for your patience

knotty surge Mar 25, 2024, 6:50 PM

#

Happy to be a rubber 🦆 from time to tine 🙂

#maciejgolis_klarna-messaging-element