#j_ece-appearance

1 messages · Page 1 of 1 (latest)

sweet relicBOT
#

👋 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/1263271715090468896

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

noble brookBOT
#

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

cerulean creek
#

Hi

dense tide
#

That's not something we support today so that's not possible

cerulean creek
#

Im testing a new implementation, but i want to customize my apple pay button and my link button

#

ON the documentation it says i can put a borderRadius

#

But it doesnt change

dense tide
#

Can you sahre real links and real text instead of pictures so I can better help you? Also do you have a real repro I can look at?

cerulean creek
dense tide
#

do you have the rest of what I was asking?

#

j_ece-appearance

cerulean creek
# 
import React, { useState, useEffect } from 'react'
import { ExpressCheckoutElement, PaymentRequestButtonElement, useStripe } from '@stripe/react-stripe-js'
import { ButtonV2 } from '@/components/Button'

const Test = () => {
  const [visibility, setVisibility] = useState('hidden')

  const onReady = ({ availablePaymentMethods }) => {
    if (!availablePaymentMethods) {
      // No buttons will show
    } else {
      setVisibility('initial')
    }
  }

  const options: any = {
    layout: 'auto',
    buttonTheme: {
      applePay: 'black',
    },
    buttonHeight: 50,
    borderRadius: '2px',
    paymentMethods: { link: 'never' },
    appearance: {
      theme: 'flat',
      variables: {
        fontFamily: 'Ideal Sans, system-ui, sans-serif',
        spacingUnit: '5px',
        colorPrimary: '#000',
        colorText: '#000',
        fontSmooth: 'auto',
        fontSize: '20px',
        logoColor: 'dark',
        iconColor: '#000',
        tabIconColor: '#000',
      },
      rules: {
        '.Label': {
          color: '#6b7280',
          fontWeight: '500',
        },
        '.Input': {
          borderColor: '#e2e8f0',
          borderRadius: '0.375rem',
        },
        '.Error': {
          color: '#e53e3e',
        },
        '.Button': {
          fontSize: '24px !important', // Tamaño de fuente para el botón de Link
          border: '4px solid #000 !important', // Borde grande
        },
      },
    },
  }

  return (
    <div id="checkout-page">
      <div
        id="express-checkout-element"
        style={{
          visibility: visibility as any,
        }}
      >
        <ExpressCheckoutElement onConfirm={null} onReady={onReady} options={options} />
      </div>
    </div>
  )
}

export default Test
#

you mean this?

dense tide
#

yes

#

So if you look at our example we do this const elements = stripe.elements({ mode: 'payment', amount: 1099, currency: 'usd', appearance, }) const expressCheckoutElement = elements.create( 'expressCheckout', expressCheckoutOptions )

#

the appearance is for Elements and the buttonHeight is for ExpressCheckoutElement.
I'm confused by your code here you seem to mix the two together

cerulean creek
#

Im using react

#

On the docs says i can customize the apple pay button and google pay, but i dont know how

dense tide
#

I get you're using React, I'm showing you the overall problem that I think is happening

#

Sorry I don't understand React at all. But I'm trying to figure out what to change between your code and mine.

Can you first remove most of the appearance complex thing and just do the buttonHeight one and confirm it works?

#

Also can you share the rest of the code where you initialize Elements in your code? You must be setting your API key somewhere for example

cerulean creek
#

It works, just with buttonHeight, so you mean i cant custommize the button ?

dense tide
#

not really that's not what I am saying. I'm trying to help you debug this.

cerulean creek
#

Also i have another question. I would like to test apple pay on my dev enviroment (localhost)

dense tide
# 
      <CheckoutPage />
    </Elements>```
#

you must have this in your code somewhere right?

#

That's where you pass the options for the borderRadius

cerulean creek
#

Yes, but its large, maybe i will stick with my old config if thats ok

dense tide
#

so you "merged" all options and didn't realize they each apply to a different part of the code and you have to ensure you pass the right options to the right place

cerulean creek
#

oh i understand

#

i got it now

dense tide
#

Sorry this is super confusing and our errors/logs aren't the clearest

cerulean creek
dense tide
#

ApplePay requires HTTPS and the easiest is to use a tool such as https://ngrok.com. It's free and lets you do a tunnel to your localhost server

cerulean creek
#

any tutorial outthere?

#

i dont have experience witht his

#

oh i see

dense tide
#

it's an external tool but it's really easy to use I think so hopefully their docs are enough for you to use!

sweet relicBOT
sweet relicBOT