#JeremyFlight
spice garnet
steep night
👋
You can't add a label above Card Element within the iFrame. You would have to add these labels outside the Element in this case. We do support the ability for you to stylize the Element within the iFrame though if that will satisfy what you are looking for: https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-style
solar hedge
No, not really! I've seen that but I wondered if I could get text above the form fields. Not sure how I'd know how to align them if I were to create <label> elements outside your <iframe>?
Is there any way to set the CSS border property for the 3 form elements?
steep night
Yeah that's correct, it likely would be a bit hacky, so overall I wouldn't really recommend it and I would just leave those labels inline. With Payment Element you can use the Appearance API to determine floating the labels or having them above but this isn't supported with Card Element.
steep night
Is there any way to set the CSS border property for the 3 form elements?
You are looking for borders for the individual Elements here?
solar hedge
Yes, borders on the input for the card number, the input for the expiry date etc
steep night
No that isn't possible. Only the CSS properties mentioned in the JS reference above are supported.
solar hedge
OK.
Can I use a Payment Element instead of a Card Element? This is my code currently:
let elements = stripe.elements();
let cardElement = elements.create("card", {
hidePostalCode: true,
});
cardElement.mount("#cardElement");
let paymentForm = document.getElementById("paymentForm");
paymentForm.addEventListener("submit", (ev) => {
ev.preventDefault();
fetch('setup-client.php', {
method: "POST",
headers: {
"Content-Type": "application/json",
},
}).then((response) => {
if (response.ok) {
response.json().then( (data) => {
stripe.confirmCardSetup(data.client_secret, {
payment_method: {
card: cardElement,
billing_details: {
name: data.customer_name,
email: data.customer_email,
},
},
}).then((data) => {
etc.
});
}).catch((err) => {
console.warn(err);
});
}//if
}).catch((err) => {
console.warn(err);
});
});
The big difference with Payment Element versus Card Element is that you need the client_secret to render Payment Element. So you need to fetch your server before you create/mount the Element. You want to take a look at our Payment Element flow here: https://stripe.com/docs/payments/save-and-reuse