#paulc7053_code
cunning irisBOT
👋 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/1217054105520832542
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
foggy dew
Hey! This is the entire react component: `const StripePaymentRequestButton = ({ totalPrice }) => {
const stripe = useStripe();
const [paymentAvailable, setPaymentAvailable] = useState(false);
const [paymentRequest, setPaymentRequest] = useState(null);
useEffect(() => {
if (stripe) {
const pr = stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Total',
amount: totalPrice,
},
requestPayerName: true,
requestPayerEmail: true,
supportedMethods: ['card'],
supportedNetworks: ['visa', 'mastercard', 'amex', 'discover'],
disableWallets :['link']
});
pr.canMakePayment().then(result => {
if (result) {
setPaymentAvailable(true);
setPaymentRequest(pr);
}
}).catch(error => {
console.error("Error checking paymentRequest availability:", error);
});
}
}, [stripe, totalPrice]);
if (!paymentAvailable || !paymentRequest) {
return null; // Or optionally render some fallback UI
}
return (
<PaymentRequestButtonElement
options={{ paymentRequest }}
/>
);
};`
wintry irisBOT
supple siren
Did you register your domain(s) for the wallets? https://docs.stripe.com/payments/payment-methods/pmd-registration
supple siren
Is there somewhere where I can reproduce the issue?
Is this a Connect scenario at all (can't see the code where you call loadStripe)?
foggy dew
supple siren
That doesn't reflect the domain registration status, just that they're enabled on your account
foggy dew
I just load it like this const stripePkKey = "pk_test_51NlxwiJ4ILijjURSYKjtoMyFOdeQvhqcHgiCv37nlHJkKfS9LrzSltKkSGlR1w3JWaf5KC3y7OP9dZfhyX4JK2E600l80i6boB" const stripePromise = loadStripe(stripePkKey);
Ah!
supple siren
foggy dew
Got it, will try it out right now
supple siren
There's additional steps required for Apple Pay: https://docs.stripe.com/apple-pay?platform=web#verify-domain
foggy dew
How can I do this in a development environment?
Can I just add the file to my ngrok server?
supple siren
Yep, should work. Requires HTTPS too
foggy dew
great, i'm trying it rn
Okay, I think I got it going
But it seems like google pay doesn't show up when I'm on mobile with dev tools, in chrome
is that behavior expected?
supple siren
Which device? Can you share the ngrok URL?
foggy dew
1 second please
When I refresh the page with an iPhone, apple pay doesn't replace google pay
But I just noticed that on Android mobile devices Google Pay does pop up
supple siren
Not sure what expected wallet is on iOS with Chrome (PRB can only show one)
ECE can show multiple buttons
foggy dew
What is ECE?
supple siren
Successor to Payment Request Button in a way: https://docs.stripe.com/elements/express-checkout-element/comparison
wintry irisBOT
foggy dew
Hi!
I'm using the ExpressCheckoutElement component. Tried both <ExpressCheckoutElement/> and <ExpressCheckoutElement options={{paymentRequest}} /> but none seem to actually show any wallet button
torn depot
likely you're just on a browser that doesn't support wallets for example(Chrome not logged into Google, Safari on a device without cards in the Wallet app) or so on. If you put your ngrok github page back up I could look again.
foggy dew
Could you please try this one: https://supreme-space-carnival-766rgx5g762p6vq-3002.app.github.dev/ (another port)
torn depot
I just get a 404
torn depot
to be clear I woudn't expect any wallets show up in the embedded browser in VS Code since it has limitations/isn't logged in etc
foggy dew
Even though I managed to get the PaymentRequestButtonElement to show up?
torn depot
the browser requirements for wallets to appear are documented at https://docs.stripe.com/stripe-js/elements/payment-request-button?client=html#html-js-testing
torn depot
Even though I managed to get the PaymentRequestButtonElement to show up?
well if it showed up then it's working and you saw a Google/Apple/Link button? Not sure I follow what the issue is in that case.
foggy dew
Yes, I saw the Google Pay & Link buttons
With the PaymentRequestButtonElement
But your colleague suggested I use ECE because I can display both apple/google + paypal
torn depot
cool, makes sense! so what issue are you running into with ECE?
what does your code look like? any errors/warnings in the browser console?
like earier you said ExpressCheckoutElement options={{paymentRequest}}
foggy dew
No errors, just a warning @stripe_react-stripe-js.js?v=d033bff6:996 Unsupported prop change: options.paymentRequest is not a mutable property.
torn depot
to be clear, it does not take the same arguments or a PaymentRequest object so you probably have errors
ok well next step is to ideally get me a link to a page where I can reproduce/inspect
foggy dew
Could you please try again? It works in another browser for me (not logged into github)
torn depot
ok looking
hmm there are bunch of errors and because it's React it's hard to debug
can you just post your jsx file so I can look?
foggy dew
`const CheckoutForm = ({
totalPrice,
}) => {
const stripe = useStripe();
const [paymentAvailable, setPaymentAvailable] = useState(false);
const [paymentRequest, setPaymentRequest] = useState(null);
useEffect(() => {
if (stripe) {
const pr = stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Total',
amount: totalPrice,
},
requestPayerName: true,
requestPayerEmail: true,
supportedMethods: ['card'],
supportedNetworks: ['visa', 'mastercard', 'amex', 'discover'],
disableWallets: ['link']
});
pr.canMakePayment().then(result => {
if (result) {
setPaymentAvailable(true);
setPaymentRequest(pr);
}
}).catch(error => {
console.error("Error checking paymentRequest availability:", error);
});
}
}, [stripe, totalPrice]);
if (!paymentAvailable || !paymentRequest) {
return null; // Or optionally render some fallback UI
}
const handleChange = (e) => {
};
return (
<div className='w-full flex flex-col justify-center items-center'>
{
paymentRequest && <ExpressCheckoutElement options={{ paymentRequest }} />
}
<div>
<CardNumberElement
onChange={handleChange}
/>
<CardExpiryElement
onChange={handleChange}
/>
</div>
</div>
);
};
export default function StripeInlineCheckout({
currency = 'usd',
totalPrice = 79,
showCheckout = true
}) {
return (
<Elements stripe={stripePromise}>
<ElementsConsumer>
{({ stripe }) => {
if (!stripe) {
return <Spinner />;
};
return <CheckoutForm currency={currency} totalPrice={totalPrice} showCheckout={showCheckout} />;
}}
</ElementsConsumer>
</Elements>
);
};`
Hope this is succint enough
also, const stripePromise = loadStripe(stripePkKey);
torn depot
hmm I mean you don't need any of what's in the useEffect
you are not using PaymentRequestButton anymore
you're also trying to pass the PaymentRequest object to the ExpressCheckoutElement params, which as I mentioned is not how that works, they're entirely different integrations
you should start from scratch with the guide https://docs.stripe.com/elements/express-checkout-element/accept-a-payment?client=react
torn depot
awesome!
foggy dew
🙂
but it still doesnt show the apple pay on an iPhone
in dev mode on chrome
is that expected?
torn depot
if you haven't registered the domain that's expected yes https://docs.stripe.com/apple-pay?platform=web#verify-domain
torn depot
looking at your account I don't believe you have
it's a pain in any case since you need to have that special file hosted at the .well-known URL
torn depot
works for me so probably the device you're testing on doesn't have Apple Pay setup or a card in the wallet
foggy dew
Great!
for me it still doesnt work, seems to bypass the chrome dev tools that emulate other devices
torn depot
is Apple Pay meant to work on Chrome on iPhone?
foggy dew
Sorry for being annoying, but one last question: I haven't seen in the docs how to ensure that the 'see more' never shows up (instead just show the buttons) . I have tried messing with the overflow within layout. Also is there a way to ensure that GPay/Apple pay always show up before Paypal?
torn depot
I wouldn't expect it to, I would think it's Safari-only
foggy dew
Yes, you're right
torn depot
and I believe paymentMethodOrder:["google_pay","apple_pay"] https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethodOrder
foggy dew
I'm already doing this const options = { mode: 'payment', amount: 1099, currency: 'usd', appearance: {/*...*/}, layout :{ overflow:"never" } };, although the fold seems to still be there
torn depot
it needs to be an option to ExpressCheckoutElement, not the overall Elements component
foggy dew
Oh!
torn depot
<ExpressCheckoutElement options={{ layout:{overflow:'never'} } /> etc
it can be confusing
foggy dew
Indeed, especially since I saw an appearance once within those options
Everything seems to work now!
torn depot
to be clear in the console you should see warnings about unrecognised props when you pass things to the wrong place, to help debug that
foggy dew
Yes, you're right
torn depot
Everything seems to work now!
awesome!