cho_code | Stripe Developers | Page 1

broken peakBOT Jun 24, 2024, 9:23 PM

#

hollow islandBOT Jun 24, 2024, 9:23 PM

#

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.

cho_ece-setup, 1 hour ago, 49 messages
cho_code, 4 hours ago, 14 messages

broken peakBOT Jun 24, 2024, 9:23 PM

#

👋 Welcome to your new thread!

⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can 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/1254909853823008788

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

crisp patrol Jun 24, 2024, 9:24 PM

#

Hi there

viscid nebula Jun 24, 2024, 9:24 PM

#

hello

crisp patrol Jun 24, 2024, 9:24 PM

#

Have you looked into the ready event? https://docs.stripe.com/js/element/events/on_ready

viscid nebula Jun 24, 2024, 9:24 PM

#

oh I didn't even know what this was

#

I was going to ask if it would work if I called the getElement

#

oh okay so I'd write in my code

#

const express_checkout_stripe = elements.getElement(ExpressCheckoutElement)

#

and then express_checkout_stripe.on('ready', () => { //set boolean to true */ })

crisp patrol Jun 24, 2024, 9:28 PM

#

No need to use getElement. We'll fire the ready event when the Element is rendered so you can use this to determine what to do when availablePaymentMethods.applePay is true/false

viscid nebula Jun 24, 2024, 9:28 PM

#

oh I think i'm slightly confused

#

in the doc, it says element.on

#

would I call the .on() function on the elements I get from useElements()

#

The thing is, I basically have a card input element and an apple pay element, and I want to show a div that contains the text 'or' between them in my page

#

I serve all browsers, so sometimes apple pay might not show up, so the express element might not show up at all

#

my concern is that the card Element being 'ready' will incorrectly trigger the 'or' to show even when apple pay isn't available

#

the express checkout element I use is ONLY used for apple pay and nothing else.

crisp patrol Jun 24, 2024, 9:37 PM

#

I see

viscid nebula Jun 24, 2024, 9:37 PM

#

I tried using both these functions and I must be doing it wrong:

const elements = useElements();›

const expressCheckout = elements!.getElement(ExpressCheckoutElement);

elements!.on('ready', () => {});

expressCheckout!.on('ready', ()=>{});

#

I'm using stripe js

crisp patrol Jun 24, 2024, 9:39 PM

#

Yep, I think you're missing the handler piece

#

Here's a good reference: https://docs.stripe.com/elements/express-checkout-element/accept-a-payment#ready-event

viscid nebula Jun 24, 2024, 9:39 PM

#

no,

#

expressCheckout!.on('ready', function(event: any) {} );

#

Property 'on' does not exist on type 'StripeElement'.
Property 'on' does not exist on type 'StripeIssuingCardCvcDisplayElement'.ts(2339)

#

.on() in itself is not being used right

#

the handler is just a function that it accepts

#

lambda would be equivalent no?

crisp patrol Jun 24, 2024, 9:40 PM

#

Can you share more of your frontend code?

viscid nebula Jun 24, 2024, 9:40 PM

#

like which parts

#

I could, but there is too much other code

crisp patrol Jun 24, 2024, 9:42 PM

#

Let's take a step back. You mentioned you're using the Express Checkout Element and "a card input element". Which other Element type are you using exactly?

viscid nebula Jun 24, 2024, 9:43 PM

#

no others

#

I really just want to know if it

crisp patrol Jun 24, 2024, 9:43 PM

#

What is "a card input element" in this case? The PaymentElement? The CardElement?

viscid nebula Jun 24, 2024, 9:44 PM

#

CardElement

crisp patrol Jun 24, 2024, 9:44 PM

#

Can you set up a frontend test environment that renders only the CardElement and the ExpressCheckoutElement?

viscid nebula Jun 24, 2024, 9:44 PM

#

no

#

i actually genuinely cannot

#

Stripe test mode will not allow me to render the express checkout element with apple_pay at all

#

because of the domain issues.

#

I just want to know if there is a conditional way to understand whether the apple pay express element will be shown

#

It isn;'t really worth my time to set up a test environment to do all this to determine whether I should use the text 'or' between my elements that my designer wants

#

The on('ready' ...) seems fabulous but my understanding of how to use it must be wrong 😦

crisp patrol Jun 24, 2024, 9:47 PM

#

Right, in that case we recommend using something like ngrok and registering the ngrok domain

viscid nebula Jun 24, 2024, 9:47 PM

#

so you're saying there's no way to know through js

#

how does stripe determine it then?

crisp patrol Jun 24, 2024, 9:48 PM

#

Yep, hence my request to see more of your frontend code. I'm really confused by the refernence to an issuing card cvc element

viscid nebula Jun 24, 2024, 9:48 PM

#

I can show you the front-end code, but which part ......

crisp patrol Jun 24, 2024, 9:48 PM

#

viscid nebula so you're saying there's no way to know through js

No, there is. That's where the ready event comes in.

viscid nebula Jun 24, 2024, 9:48 PM

#

the react JSX?

crisp patrol Jun 24, 2024, 9:49 PM

#

Can you show me how you're creating the Elements object and the Express Checkout Element?

viscid nebula Jun 24, 2024, 9:49 PM

#

here is the div's that I render the elements:

<div className='p-4 rounded-md mt-2 border-solid !text-[#C4C4C4]'>
                {/* <div className='mt-2'> */}
                {/* <PaymentElement
                    id='payment-element'
                    options={{
                        business: { name: 'BIOVERSE' },
                        fields: {
                            billingDetails: {
                                address: {
                                    postalCode: 'never',
                                    country: 'never',
                                },
                            },
                        },
                    }}
                /> */}

                <CardElement
                    id='card-element'
                    options={{
                        hidePostalCode: true,
                        style: {
                            base: {
                                color: '#32325d',
                                fontSmoothing: 'antialiased',
                                fontSize: '16px',
                                '::placeholder': {
                                    color: '#666666',
                                },
                                // Add padding
                                padding: '12px 20px', // Example padding, adjust as needed
                                // Add border
                                fontFamily: 'Tw Cen MT Pro SemiMedium',
                            },
                            invalid: {
                                color: '#fa755a',
                                iconColor: '#fa755a',
                            },
                            complete: {
                                color: '286BA2',
                            },
                        },
                    }}
                />
            </div>

            <div>
                <ExpressCheckoutElement
                    onConfirm={() => {
                        confirmApplePay();
                    }}
                    options={{
                        buttonType: {
                            applePay: 'plain',
                        },
                        buttonTheme: {
                            applePay: 'white-outline',
                        },
                        buttonHeight: 55,
                    }}
                />
            </div>

#

ohh yeah that makes sense. I'm using the components served by stripe React

crisp patrol Jun 24, 2024, 9:52 PM

#

Okay, does the React sample help much? https://docs.stripe.com/elements/express-checkout-element/accept-a-payment?client=react#ready-event

viscid nebula Jun 24, 2024, 9:52 PM

#

oh what

#

hmm

#

yeah it does, I didn't know react had a separate doc

#

So then if I were to want to do it the way that you at first told me to do it

#

I would instead need to invoke useElements, get the element

#

and then elements.create() function?

#

i feel like I've had trouble with getting support in the past for using Stripe React

crisp patrol Jun 24, 2024, 9:56 PM

#

We don't have too many React experts on our team, so that tracks.

viscid nebula Jun 24, 2024, 9:56 PM

#

So there was an issue

#

it works, not as expected

#

the onReady function gets called irregardless of whether apple pay is visible or not

#

it just gets called when it mounts

crisp patrol Jun 24, 2024, 9:57 PM

#

Right, that event is emitted when the ExpressCheckoutElement is rendered

viscid nebula Jun 24, 2024, 9:57 PM

#

yeah, it's invisible because apple_pay isn't allowed on my local machine

#

but the function still gets invoked

#

<ExpressCheckoutElement
onConfirm={() => {
confirmApplePay();
}}
options={{
buttonType: {
applePay: 'plain',
},
buttonTheme: {
applePay: 'white-outline',
},
buttonHeight: 55,
}}
onReady={() => {
setApplePayVisible(true);
}}
/>

crisp patrol Jun 24, 2024, 10:00 PM

#

So just to recap, you're using the CardElement and the ExpressCheckoutElement, and you want to know how you can quickly determine whether ApplePay is available for a given customer. If it's available, you want to display "or" between the ExpressCheckoutElement and the CardElement. If it's not avaialble, you'll just hide the "or". Is that an accurate summary?

viscid nebula Jun 24, 2024, 10:04 PM

#

yeah

#

I know stripe determines it based on a checklist and it's pretty loose

crisp patrol Jun 24, 2024, 10:08 PM

#

Give me a few minutes to loop in a teammate

viscid nebula Jun 24, 2024, 10:08 PM

#

just is it safari? then is it on an iphone iOS 16+?

crisp patrol Jun 24, 2024, 10:10 PM

#

viscid nebula I know stripe determines it based on a checklist and it's pretty loose

You need to be on Mac OS or iOS, Safari, and have a card saved to your wallet. Also, on the merchant's side, you'll need be on HTTPS and have registered the domain on which you've rendered the ExpressCheckoutElement

viscid nebula Jun 24, 2024, 10:11 PM

#

!!!

#

yeah I appreciate that complexity, and I acknowledge there's no way I can feasibly write the code to do that for displaying a text 'or' 😂

viral hare Jun 24, 2024, 10:13 PM

#

@viscid nebula in the ready() event we tell you what's available in https://docs.stripe.com/js/element/events/on_ready#element_on_ready-handler-availablePaymentMethods. That's what you want right?

#

Like try onReady={(ev) => { console.log("ready event fired with: ", ev); }} to see what information we give you

viscid nebula Jun 24, 2024, 10:19 PM

#

i shall do that

#

I must push to production for that to be tested, so it'll take a while

viral hare Jun 24, 2024, 10:21 PM

#

you should be able to test all of this locally in Test mode on your own machine and definitely never test in prod 😅

viscid nebula Jun 24, 2024, 10:22 PM

#

the reason I can't is because

#

The domain does not allow for apple_pay to render in any environment other than prod

#

There's quite a few things test mode doesn't allow us to do

#

I got the console log:

#

{
"elementType": "expressCheckout"
}

#

the ev object is just elementType key

viral hare Jun 24, 2024, 10:24 PM

#

you can use https://ngrok.com to test things like this easily for example

#

When I run this locally I get on ready!!!: {"elementType":"expressCheckout","availablePaymentMethods":{"googlePay":false,"applePay":false,"paypal":false,"link":true,"demoPay":false,"amazonPay":false}}

viscid nebula Jun 24, 2024, 10:25 PM

#

I see

#

well, let me ask if our team is willing to pay for the service sweats

viral hare Jun 24, 2024, 10:26 PM

#

ngrok is free in dev

viscid nebula Jun 24, 2024, 10:27 PM

#

okay, i'll try it out later

viral hare Jun 24, 2024, 10:27 PM

#

👍

viscid nebula Jun 24, 2024, 10:27 PM

#

ty

#cho_code