#issambb-stripejs-style
cloud wraith
south grotto
the styling
Element component
additional information : inside the Element component a PaymentElement is rendered, the ovrall goal is to save payment data for future use. The whole process works except the styling
south grotto
@cloud wraith what do you think?
cloud wraith
catching up one sec
are you using CardElement? or PaymentElement?
ah PaymentElement
didn't read the whole thing
lemme actually read
I haven't played around with apprearences on PaymentElement, let me try something on my samples
south grotto
alright, thank you
cloud wraith
can you paste your styles over in a code block with three backticks?
basically just the options object
so I can try them in my samples
south grotto
clientSecret,
appearance: {
theme: "none",
colorPrimary: "#0570de",
colorBackground: "#ffffff",
colorText: "#30313d",
colorDanger: "#df1b41",
fontFamily: "Ideal Sans, system-ui, sans-serif",
spacingUnit: "2px",
borderRadius: "4px",
},
};
are you seeing warnings in your console log?
south grotto
lemme check
cloud wraith
for things like colorPrimary is not a recognized param etc
cause I am
digging into why
ah your snippet
is incorrect right: https://stripe.com/docs/stripe-js/appearance-api#variables
You're passing appearance and the key needs to be variable
south grotto
I am seeing a 400 failed request to stripe, the response says : INVALID_ARGUMENT: Unknown event name: elements.pr.options
cloud wraith
that might be unrelated
south grotto
okay lemme try variable instead of appearence
cloud wraith
ah wait I see now
sorry let me fix it and share back to you
ah got it
your options object was incorrect
here is what you need
const options = {
clientSecret: clientSecret,
// Fully customizable with appearance API.
appearance : {
theme: 'stripe',
variables: {
colorPrimary: '#0570de',
colorBackground: '#ff0000',
colorText: '#0000ff',
colorDanger: '#df1b41',
fontFamily: 'Ideal Sans, system-ui, sans-serif',
spacingUnit: '2px',
borderRadius: '4px',
// See all possible variables below
},
}
};
so options has appearance which has variables but theme top level in appearance
I changed some colors so you might want to revert them
south grotto
have a great rest of the day 🙂
cloud wraith
no you too