clacklabs_error | Stripe Developers | Page 1

calm runeBOT Jun 12, 2025, 9:30 AM

#

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

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

#

plain sun Jun 12, 2025, 9:30 AM

#

I'll add some screenshots now

#

#

Our page has a permissive CSP

#

It is Stripes own CSP being violated

#

I can share the HAR via dm if you need it

fresh arch Jun 12, 2025, 9:41 AM

#

I just did a test and it seems working for me 🤔

plain sun Jun 12, 2025, 9:43 AM

#

How haha! My dev team, the client, and I can reproduce it every time

#

What version of Chrome do you have?

fresh arch Jun 12, 2025, 9:45 AM

#

Sorry wait, I was testing via Safari.

#

Apple Pay isn't supported on Chrome 🤔
https://docs.stripe.com/elements/express-checkout-element#supported-browsers

#

What Stripe Product are you using to display Apple Pay ?

plain sun Jun 12, 2025, 9:47 AM

#

Apple have opened it up to other browsers, that's why now the stripe SDK shows Apple Pay for users in Chrome. In the past that button wouldn't show

#

https://support.apple.com/en-mt/guide/safari/ibrw9b779bd3/mac

#

I believe it is Express Checkout Element

fresh arch Jun 12, 2025, 9:47 AM

#

Are you seeing Apple Pay here?
https://docs.stripe.com/elements/express-checkout-element#try-demo

fresh arch Jun 12, 2025, 9:48 AM

#

plain sun https://support.apple.com/en-mt/guide/safari/ibrw9b779bd3/mac

In this article, where it's mentioned that Apple Pay is visible/supported on Chrome ?

plain sun Jun 12, 2025, 9:51 AM

#

fresh arch Are you seeing Apple Pay here? <https://docs.stripe.com/elements/express-checkou...

No, which is why I'm surprised it shows up in the Express Checkout Element on our site

plain sun Jun 12, 2025, 9:51 AM

#

fresh arch In this article, where it's mentioned that Apple Pay is visible/supported on Chr...

They mention third-party browsers. There are many articles on it e.g. https://www.bigcommerce.com/blog/apple-pay-now-supported-on-third-party-browsers/

#

https://www.theverge.com/2024/6/13/24177851/apple-ios-18-pay-chrome-scanning-code-wwdc-2024

#

Looks like Apple finally got it pushed live, we only noticed it 2 days ago

fresh arch Jun 12, 2025, 9:58 AM

#

This seems strange honestly, I'm not able to get Apple Pay on Chrome using Stripe demos, but I'm getting Apple Pay on your website on Chrome

#

Could you please share the code snippets behind that ?

calm runeBOT Jun 12, 2025, 10:00 AM

#

plain sun Jun 12, 2025, 10:03 AM

#

yes one sec

#

const isGoogleApplePayAvailable = async () => {
const checkoutElement = document.getElementById("checkout-available-payment-methods");
if (!checkoutElement) {
return;
}

        const clientSecret = mutableClientSecretKey.value;

        if (!clientSecret || !stripe.value) {
            errorMessage.value = stripeErrorMessage.value;
            return;
        }

        const options = {
            ...paymentConfig.options,
            clientSecret,
        };
        const elements = stripe.value.elements(options);
        const expressOptions = {
            ...paymentConfig.expressOptions,
            paymentMethods: {
                ...paymentConfig.paymentMethods,
                applePay: "always",
                googlePay: "always",
            },
        };
        const googlePayCheckoutElement = elements.create("expressCheckout", expressOptions);
        googlePayCheckoutElement.mount("#checkout-available-payment-methods");

        try {
            googlePayCheckoutElement.on("ready", (event) => {
                const availablePaymentMethods = event.availablePaymentMethods;
                availableStripePaymentMethods.value = {
                    googlePay: availablePaymentMethods?.googlePay || false,
                    applePay: availablePaymentMethods?.applePay || false,
                };
                checkoutAvailablePaymentMethods.value.remove();
                googlePayCheckoutElement.unmount();
            });
        } catch (error) {
            handleError(error, "Stripe: ");
        }
    };

vagrant tiger Jun 12, 2025, 10:05 AM

#

fyi i'm taking over this thread

plain sun Jun 12, 2025, 10:08 AM

#

Or this

#

const initGoogleApplePay = (typePay) => {
const expressElement = document.getElementById("express-checkout-element");
if (!expressElement) {
return;
}

        expressElement.removeAttribute("class");
        expressElement.innerText = null;

        const clientSecret = mutableClientSecretKey.value;

        if (!clientSecret || !stripe.value) {
            errorMessage.value = stripeErrorMessage.value;
            return;
        }

        const options = { ...paymentConfig.options, clientSecret };
        const elements = stripe.value.elements(options);

        const expressOptions = {
            ...paymentConfig.expressOptions,
            paymentMethods: {
                ...paymentConfig.paymentMethods,
                applePay: typePay === paymentConfig.apple ? "always" : "never",
                googlePay: typePay === paymentConfig.google ? "always" : "never",
            },
        };
        const expressCheckoutElement = elements.create("expressCheckout", expressOptions);

        expressCheckoutElement.mount("#express-checkout-element");

#

applePay: "always" seems suspect, but this all worked and Apple Pay was hidden for mac users on Chrome. Now as of around 2 days ago the Apple Pay element shows. And if you click it the popup appears to scan the QR code and everything

#

If you want I can DM you the full .vue component, I can't share it here for policy reasons as this is public right

vagrant tiger Jun 12, 2025, 10:11 AM

#

the rollout of apple pay in chrome is still pretty new, so it might take me a bit to dig into this

#

and yep this is public! to be honest with all of the layers here we might need to convert this to a support case (if that's ok with you)

#

i do want to poke at it for a bit to see if i can at least reproduce the issue

plain sun Jun 12, 2025, 10:12 AM

#

vagrant tiger i do want to poke at it for a bit to see if i can at least reproduce the issue

yes please do, and then let me know how to proceed.

vagrant tiger Jun 12, 2025, 10:25 AM

#

ok - my test account still doesn't have access to this feature and it looks like it will take a bit for me to be added in, so do you mind if we convert this to an email case? i'll DM you a link and from there you can file a case that me (or my team) will pick up and follow up with you

plain sun Jun 12, 2025, 10:31 AM

#

Sounds good, thank you

calm runeBOT Jun 12, 2025, 10:31 AM

#

Hello @plain sun, we have sent you a direct message, please check it at https://discord.com/channels/@me/1382668745679441973

🔗The message has instructions on how to open a direct support case with our Developer Support team, in order to help you more effectively.

vagrant tiger Jun 12, 2025, 10:32 AM

#

i also might have a few followup questions if you don't mind sticking around for a bit after you've created the case

#

(i'm unable to get apple pay to show in your checkout flow still but i think that's possibly a "me" problem)

plain sun Jun 12, 2025, 10:35 AM

#

Where are you based? I can't get it to show for me in UK either I have to VPN to our office in Hanoi then it does. The client is US based and from them it shows too

vagrant tiger Jun 12, 2025, 10:36 AM

#

interesting 🤔 i don't think we normally geo-gate apple pay

#

FYI i did just see your case come through 👍

plain sun Jun 12, 2025, 10:39 AM

#

vagrant tiger interesting 🤔 i don't think we normally geo-gate apple pay

Someone is doing a staged rollout. First we thought it's Stripe but maybe its Apple

plain sun Jun 12, 2025, 10:39 AM

#

vagrant tiger FYI i did just see your case come through 👍

Let me know if you need more details on there. The web UI isn't great doesn't look like I can upload the HAR

vagrant tiger Jun 12, 2025, 10:44 AM

#

yep for sure! we can still chat here too, the case automatically references this thread. one other question i wanted to ask is are you attempting to do any styling from your end? i don't see any appearance API related things in the code you shared

plain sun Jun 12, 2025, 10:48 AM

#

I think this is the only styling we apply

#

export const paymentConfig = {
google: "googlepay",
apple: "applepay",
card: "creditcard",
paypal: "paypal",
paylater: "paylater",
options: {
currency: "usd",
locale: "en-GB",
appearance: {
theme: "stripe",
variables: {
borderRadius: "25px",
},
},
},
paymentMethods: {
amazonPay: "never",
paypal: "never",
link: "never",
},
expressOptions: {
layout: {
maxColumns: 2,
maxRows: 2,
},
buttonHeight: googleApplePayButtonHeight,
buttonTheme: {
applePay: "black",
googlePay: "black",
},
buttonType: {
googlePay: "pay",
applePay: "buy",
},
},
availablePaymentMethods: {
googlePay: false,
applePay: false,
},
cardStyle: {
base: {
fontSize: "16px",
fontFamily: "Lato, Fallback, Arial, Helvetica, sans-serif",
"::placeholder": {
fontSize: "14px",
},
},
},
};

vagrant tiger Jun 12, 2025, 10:50 AM

#

sounds good - i don't think i have any other questions right now

#

if you do want to share the vue file with us via email that might help too!

#

also FYI for future reference wrapping code snippets in triple backticks makes it a lil easier to read, and prevents discord from applying other markdown type things e.g. ||spoilers|| if you have more than one or || operator

plain sun Jun 12, 2025, 10:52 AM

#

vagrant tiger if you do want to share the vue file with us via email that might help too!

no problem, do I just reply to the "We’ve received your message" email? That's all I've got so far

vagrant tiger Jun 12, 2025, 10:52 AM

#

yep that should work!

plain sun Jun 12, 2025, 10:53 AM

#

vagrant tiger also FYI for future reference wrapping code snippets in triple backticks makes i...

Ah cool, yeah not used to using discord for sending code 😂

vagrant tiger Jun 12, 2025, 10:53 AM

#

no worries 🙂

calm runeBOT Jun 12, 2025, 10:56 AM

#

plain sun Jun 12, 2025, 10:58 AM

#

vagrant tiger yep that should work!

No go

vagrant tiger Jun 12, 2025, 10:58 AM

#

hmm interesting - let me send a reply real quick and then you can try responding to that

#

just sent that

#clacklabs_error

Hello @plain sun, we have sent you a direct message, please check it at https://discord.com/channels/@me/1382668745679441973