#meet_code
lucid prismBOT
👋 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/1288240677091541004
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
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.
- meet_account-capabilities, 4 days ago, 16 messages
warm perch
Hi there
frank palm
hey
warm perch
Can you share more details about what you're trying to do exactly?
frank palm
so i have this customer page (customer.jsp) where the above code is implemented, now i am using the initalized stripe element in a subscription modal window (in the same page). so for the first time when the modal is opened, the stripe elements are rendering as expected, but when I try to load the modal second time (without reloading the page) stripe elements are not rendering properly (although they work perfectly, but the element boxes are shrunked)
so thought of clearing the elements first and then re-initializing them when modal loads again
warm perch
Why are you loading the modal a second time?
frank palm
e.g. when customer wants to add another order in the same transaction !
frank palm
this is how it looks
warm perch
Hold on a sec
frank palm
okay
warm perch
Have you considered using our deferred intent flow? https://docs.stripe.com/payments/accept-a-payment-deferred?platform=web&type=subscription
With this flow, you would present the PaymentElement to your customer before even creating the Subscription so there's no need to update the Element if a customer adds something else to their order
Let me know if I've misunderstood the issue. If I've misunderstood, please describe your typical payment flow and where you're blocked exactly
frank palm
i haven;t gone through the doc yet, but let me confirm if you have understood the situation.
so, what i want to do is ...
consider a scenario, where someone wants to purchase two t shirts with different CC, and when viewing t shirt in a modal, he is required to add CC details (inside payment element) and then again for another t shirt, he has to perform these steps again, before he actually checks out and place the order.. (this may be bad example, but will work)
so in my case, for the second t shirt, the element is not shown as it should be (like the for the first t shirt)
this is what is looks like for second time
warm perch
Hm, I think I'm lost. If a customer wants to purchase two shirts with two different cards, that means you have to create two different PaymentIntents.
How are you currently rendering the PaymentElement above? Are you using a client secret to render the PaymentElement? If so, are you creating a PaymentIntent first?
frank palm
no i am not using client secret, just using publishable to show payment element
<script src="https://js.stripe.com/v3/"></script>
<script>
var stripe = Stripe('publishable_key');
const appearance = {
};
const options = {
};
var elements;
// Function to initialize Stripe Elements
function initializeElements() {
if (!stripe) return;
console.log("stripe elements initialized.");
elements = stripe.elements(options);
window.elements = elements;
window.stripe = stripe;
}
</script>
warm perch
This is your code to initialize Elements. What does your code look like for creating the PaymentElement?
frank palm
renderStripePaymentElement = async function() {
if (!window.paymentElement) {
var paymentElement = await elements.create('payment', {
fields: {
billingDetails: {
address: {
country: 'never',
postalCode: 'never'
}
}
},
wallets: {
googlePay: 'never',
applePay: 'never'
}
});
window.paymentElement = paymentElement;
}
window.paymentElement.mount('#payment-element');
}
are you there ?
warm perch
Yep, just trying to figure out what the above means
Like, I don't see you passing a client secret so I expect you to need to pass mode when initializing Elements
frank palm
this is the whole script for init.
<script src="https://js.stripe.com/v3/"></script>
<script>
var stripe = Stripe('publishable_key');
const appearance = {
theme: 'stripe',
labels: 'floating',
variables: {
colorPrimary: '#0570de',
colorBackground: '#ffffff',
colorText: '#30313d',
colorDanger: '#df1b41',
fontFamily: 'Ideal Sans, system-ui, sans-serif',
fontSizeBase: '12px',
spacingUnit: '1px',
borderRadius: '4px',
}
};
const options = {
allow: 'payment *',
mode: 'payment',
amount: 50,
currency: 'usd',
paymentMethodCreation: 'manual',
appearance: appearance,
};
var elements;
// Function to initialize Stripe Elements
function initializeElements() {
if (!stripe) return;
console.log("stripe elements initialized.");
elements = stripe.elements(options);
window.elements = elements;
window.stripe = stripe;
}
// });
</script>
sorry the const were not copied totally
warm perch
Okay, perfect. Then yes, you're using the deferred intent flow already, which means you're presenting the PaymentElement before creating a PaymentIntent
frank palm
okay. i am using the right thing it seems 😅
warm perch
Right, but I'm still lost on what you expect the customer experience to be once they're ready to pay
I don't think I've ever saved two different cards for two different items in a single cart
frank palm
just take a look at these screen shots
for the image 2 (second t shirt case) the elements are shrunken .
all i want is to show the same element on the second time as is on the first one
frank palm
I don't think I've ever saved two different cards for two different items in a s...
T shirts case was a silly example to explain my use case.
warm perch
Can you still place your cursor and type in the "shrunken" input fields?
frank palm
yeah
it works just like the first one (i am able to collect the payment details), but looks "weird"
i confirmed the elements' variables const in Console, and in both cases "const variables" stays same
warm perch
Are you placing the PaymentElement within another iframe?
frank palm
no, both the time it is the same <div> i am mounting on
warm perch
Just to be clear, are both of these shirts/products on the same page?
frank palm
yeah
warm perch
I see, okay
You probably want to collect card details for the first product, show some "success" page, have a way for the customer to return to the product catalog or some button that says "add another card"/"add another product", and mount a separate/new PaymentElement
frank palm
i guess i need to confirm that with my PM before making such changes.
but the issue here is, we are trying to mount a payment element on top of the prev one is causing the fields appearing shrunken, right?
warm perch
I've never seen something like this before but yes, that's likely why the appearance looks off. The scenario you described is also not a typical one
frank palm
i see 👍
thanks for confirming
will decide on what you suggested after talking to my PM