joonasm-afterpay

[vagrant forge]

Can I have the old thread link?

[copper gull]

Yes... https://discord.com/channels/841573134531821608/1015158343968493598

and you can now see the issue live here (didn't have time to deploy last night):
https://beta.artfare.com/artwork/jen-p-harris/peki2/untitled-m0268?published=true

[vagrant forge]

seem to be this thread link

[copper gull]

oh sorry.. well there isn't much to see in the old thread... it ended in asking me to post a link to somewhere where they can see it live / code and I couldn't do that

[copper gull]

The first assumption was that the element was too narrow for the messaging. Hence the screenshots w/ inspector where you see it's not. And even if it was I doubt that's the way it should wrap.

and as you can't control it with external css I couldn't figure out what was causing the layout to garble like that

also does it in the next breakpoint where it has 100vw to work with...

[vagrant forge]

Gimme a few mins to go over it

I want to try your website but it requires an account

[copper gull]

no it doesn't

or do you want to purchase?

[vagrant forge]

I clicked on "Buy now"

[copper gull]

you can just create a random acct..

just email & pwd

validation needed only if you try to complete a purchase

[vagrant forge]

Okie

Btw, which Doc/guide are you following?

[copper gull]

https://stripe.com/docs/payments/afterpay-clearpay/site-messaging

here's the code

      amount: parseInt(this.artwork.price)*100,
      currency: 'USD',
      logoType: 'lockup',
      lockupTheme: 'black',
      modalTheme: 'white',
      showLowerLimit: false,
    }

    this.stripe = await this.$stripe();
    this.stripeElements = this.stripe.elements();
    const afterpayClearpayMessageElement =  this.stripeElements.create('afterpayClearpayMessage',stripeOptions);

    afterpayClearpayMessageElement.mount('#afterpay-clearpay-message');

and styling

.AfterpayMessage {
  font-family: Graebenbach;
  font-size: 15px;
  color: #808080;
}
.AfterpayMessage-logoSvg {
  width: 80px;
  height: auto;
}```

[vagrant forge]

Um I can't see Klarna. Maybe because of my location

[copper gull]

Klarna is pending for their approval

not active yet

[stiff pike]

Hi! I'm taking over this thread, give me a few minutes to catchup.

So if I understand correctly the Afterpay element is not displayed properly on your page?
Can you share a test account so I can try to reproduce this?

[copper gull]

the messaging element is not displaying correctly on the product page

otherwise it works fine

you don't need an account to test it

you can see the issue here:
https://beta.artfare.com/artwork/jen-p-harris/peki2/untitled-m0268?published=true

the afterpay logo and (i) icon get wrapped weirdly

[stiff pike]

This part?

And I guess you want it to look something like this?

[copper gull]

exactly

[stiff pike]

Thanks for the clarification. Give me a few minutes to look into this.

[copper gull]

I need to step into a meeting. Back in about 30 mins.

[copper gull]

alright.. back

[teal ruin]

👋 taking over for my colleague.

instead of using logotype lockup maybe try https://stripe.com/docs/payments/afterpay-clearpay/site-messaging#badge-logo

[copper gull]

I did try that.. no change.. same issue

[teal ruin]

I'm looking into it

ok I see the issue you have

the problem is that you're using tailwind and it's adding some default css styling to your basic elements

and it's putting the display: block for some elements including svg

you just need to add display: inline here and you'll be good

  width: 80px;
  height: auto;
  display: inline; 
}```

let me know if you need any more help