#taylor_code
shy bisonBOT
👋 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/1311009498038538310
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
agile imp
I cannot get the payment button to show up or show up as a modal/overlay when clicked.
Can you say more about what you expect? This should trigger the platform-specific payment UI when clicked
Do you encounter any errors in the developer console?
fallow roost
Yeah from what I see in the docs this should create a payment button that brings up a payment UI when clicked correct?
And I get some warnings/errors am grabbing screenshots now
shy bisonBOT
fallow roost
Heres a wrapper component I made to create a client provider, I am using this to wrap my CheckoutPage.tsx component that contains the code I copied in the initial post
Also in my current <ExpressCheckoutElement> onConfirm and onClick are basically copied directly from the docs atm
Fixed the typo function name in the code i just posted and it did not fix the issue. Also I am not getting any errors in my next dev console.
agile imp
Note the two warnings in the console logs: you have not registered your domain and you are not using HTTPS
Both of which will prevent Apple & Google pay from from working, and if there are no wallets available the Express Checkout Element does not appear at all
fallow roost
I also have cards, amazon pay, link, and cash app marked as active in my payment methods settings. And I have added my vercel domain to my domain list, and when I push my build to vercel I still am running into the same issues, but without the domain/https warnings in the console
In the developers dashboard I do see the API request and it is sucessful as well, but again, nothing showing up on my page
bronze burrow
👋 Stepping in for my teammate
In the developers dashboard I do see the API request
Which API request?
Can you share a link to your HTTPS page where you're trying to test?
bronze burrow
Interesting. I do see the ApplePay button in Safari but I don't see GooglePay in Chrome
fallow roost
Could it be a next 15 issue? I tried downgrading to 14.2 by manually changing the version in my package.json but it started erroring out a bunch and wasnt super easy. I can give it another shot though
Yeah I see Amazon, Link and apple pay in Safari as well
but nothing in chrome
bronze burrow
Hm, I'm not sure it's a Next issue
Could you share more of your client-side code here? I think the code on your site is minified so I can't quickly grasp what's going on
fallow roost
"use client";
import {
useEffect,
useState,
useRef,
ChangeEvent,
DragEvent,
useCallback,
useMemo,
} from "react";
import { X, AlertCircle } from "lucide-react";
import StripeCheckout from "@/components/StripeCheckout";
import StripeProvider from "@/components/StripeProvider";
export default function ImagesToPdf() {
...
return (
<main className="flex w-full flex-col-reverse items-center md:flex-row md:items-start">
...
<StripeProvider
stripeOptions={{ mode: "payment", currency: "usd", amount: 100 }}
>
<StripeCheckout />
</StripeProvider>
</div>
</main>
);
}
import {
ExpressCheckoutElement,
useElements,
useStripe,
} from "@stripe/react-stripe-js";
import { useState } from "react";
export default function StripeCheckout() {
const stripe = useStripe();
const elements = useElements();
const [errorMessage, setErrorMessage] = useState<string>();
const onConfirm = async () => {
if (!stripe || !elements) {
return;
}
const { error: submitError } = await elements.submit();
if (submitError && submitError.message) {
setErrorMessage(submitError.message);
return;
}
const res = await fetch("/create-intent", {
method: "POST",
});
const { client_secret: clientSecret } = await res.json();
const { error } = await stripe.confirmPayment({
elements,
clientSecret,
confirmParams: {
return_url: "https://example.com/return",
},
});
if (error) {
setErrorMessage(error.message);
} else {
// The payment UI automatically closes with a success animation.
// Your customer is redirected to your `return_url`.
}
};
const onClick = ({ resolve }: { resolve: (value: any) => void }) => {
const options = {
emailRequired: true,
};
resolve(options);
};
return (
<div className="flex h-12 w-full gap-4 bg-zinc-200">
<ExpressCheckoutElement
onConfirm={onConfirm}
onClick={onClick}
options={{
buttonType: {
googlePay: "checkout",
applePay: "check-out",
},
buttonTheme: {
applePay: "white-outline",
},
buttonHeight: 55,
}}
/>
<p className="text-sm text-gray-500">{errorMessage}</p>
</div>
);
}
Thanks, looking
fallow roost
and then <StripeProvider> is in the screenshot posted previously
bronze burrow
Still digging!
Okay, it might be because GooglePay is disabled in your test mode payment method settings in the Dashboard
Can you turn on GooglePay here? https://dashboard.stripe.com/test/settings/payment_methods?config_id=pmc_1QN4sNE2ME1QhtattnCTU7Ey
@fallow roost Just wondering if you're still around to test this!
fallow roost
Sorry had to walk out for a second, testing right now
Enabled google pay in test mode, and getting these errors at the verce.app domain
But also, shouldnt the other options still show up even if google pay was disabled? Eg Link and Amazon
bronze burrow
I see GooglePay now though!
fallow roost
I still dont see it lol not sure
bronze burrow
fallow roost
Hmm
bronze burrow
I had to click "See more" due to the width of this area
fallow roost
Ive force reloaded the page multiple times and disabled ublock origin to see if that helped, still seeing nothing
bronze burrow
Do you have a card saved to Google?
fallow roost
I have a card saved in chrome but maybe not on my google acc
bronze burrow
What do you see at pay.google.com ?
fallow roost
Just updated my card info on pay.google.com and still seeing nothing
are you getting the unable to download payment manifest <URL> error in the console?
bronze burrow
I am but that's not blocking me from seeing the "Checkout with Gpay" button. If I click the button, I see the GooglePay modal as well
fallow roost
Looks like it was a brave thing. Been trying out a couple different browsers and I figured brave would operate the same as vanilla chrome but I guess it doesnt. I downloaded chrome and it works, weird
Thanks for the help though, will see what I want to do about it for the time being
bronze burrow
Sure thing!