#sweta_code
merry vigilBOT
👋 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/1369165239492411482
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
gusty tulip
??
frail needle
Hi! Apologies for the delay! Are you referring to the amount that you set when you create the Element: https://docs.stripe.com/elements/express-checkout-element#create-an-express-checkout-element?
gusty tulip
yes but that does not reflect when clicking google pay button and the new popup opens where the amount is not updated
frail needle
Can you show a screenshot of what you are seeing?
frail needle
What amount did you pass when creating the Element?
gusty tulip
options = {
mode: 'setup',
currency: 'usd',
appearance: {
theme: 'dark'
},
setupFutureUsage: "off_session",
...options
};
if (!document.getElementById('express-checkout-element')) {
console.log('Express Checkout Element not loaded! Retrying initialization...');
this.initExpressCheckoutElement({ ...options }); // Retry initialization
}
console.log('Express Checkout Element Options', options);
window.expressElement = stripe.elements(options);
const expressCheckoutElement = expressElement.create('expressCheckout', {
buttonHeight: 45,
paymentMethods: {
'googlePay': 'always',
'applePay': 'always',
'amazonPay': 'auto',
'link': 'never'
},
buttonType: {
'googlePay': 'plain',
'applePay': 'plain',
},
paymentMethodOrder: ['apple_pay', 'google_pay', 'amazon_pay']
});
const skeletonLoader = document.getElementById('express-checkout-element-skeleton');
expressCheckoutElement.mount('#express-checkout-element');
// misc
if (skeletonLoader) skeletonLoader.style.display = 'block';
document.getElementById('option-container').style.display = 'block';
expressCheckoutElement.on('ready', ({ availablePaymentMethods }) => {
if (skeletonLoader) skeletonLoader.style.display = 'none';
if (Object.keys(availablePaymentMethods ?? {}).length > 0) {
document.getElementById('express-checkout-element').style.display = 'block';
return;
}
document.getElementById('option-container').style.display = 'none';
});
this is when initilizing
expressCheckoutElement.on(
'click',
/**
* @param {{ elementType: string; expressPaymentType: 'google_pay' | 'apple_pay' | 'amazon_pay'; resolve: (x: {}) => { } }} event
*/
(event) => {
// We need to show some amount instead of $0.00 in only Google Pay & cto show that we need to change the mode too.
if (event.expressPaymentType === 'google_pay') {
this.updateExpressCheckoutElement({ mode: "payment", amount: Math.round(expressElementAmount ?? options.price) })
}
event.resolve({
emailRequired: true,
});
});
const handleError = (error) => {
const messageContainer = document.querySelector('#error-message-express-checkout');
if (messageContainer) {
messageContainer.textContent = error.message;
}
}
here is updating amount for google_pay
this is not working in safari so I am trying a way out to have this else where
??
hello?
gusty tulip
sure
frail needle
Can I check why are you using mode: setup first and then changing it to mode: payment?
gusty tulip
this is my whole block of code
at first it is only setup and nothing is done
only after clicking or confirming we are creating intent therefore
frail needle
Yeap that is what I would like to understand. Why is it Setup at first and then you change it to payment? Why not start with mode: payment? (https://docs.stripe.com/elements/express-checkout-element/accept-a-payment)
gusty tulip
because i have two type of subscription and user can use coupon as well. While setting up i will not know the actual amount to initialized
frail needle
Cannot you not create the Element once your customer has confirmed which subscription they are choosing?
Meanwhile I am also looking at your code.
gusty tulip
setupFutureUsage: "off_session",
i need this
frail needle
Sorry I am quite confused with your flow and what you are trying to achieve. You mentioned that you have 2 subscriptions but you are changing the mode from setup to payment, instead of subscription. Also you are only updating the mode for Google Pay.
Can you provide a more detailed description of your flow? And also why can't the Element be created after you know what your customer wants?
frail needle
Firstly, is this a subscription with recurring payment or a one time payment?
frail needle
Is above when you use mode: subscription?
Also you should look at this document for recurring payment with Apple Pay: https://docs.stripe.com/apple-pay/merchant-tokens?pay-element=web-pe
gusty tulip
nope it is when i use setup
frail needle
As I mentioned earlier, I'm a uncertain about why you're initially setting up the Express Checkout Element in Setup mode and then switching the mode when a customer selects Google Pay. Additionally, you're not using mode: subscription for handling recurring payments.To be able to assist you more effectively we need a clearer picture of what you're aiming to achieve.