#Bryce Ventura
wicked cipher
velvet storm
The appearance is under options. For example,
const appearance = {
theme: 'stripe',
variables: {
colorPrimary: '#0570de',
colorBackground: '#ffffff',
colorText: '#30313d',
colorDanger: '#df1b41',
fontFamily: 'Ideal Sans, system-ui, sans-serif',
spacingUnit: '2px',
borderRadius: '4px',
// See all possible variables below
}
};
// Pass the appearance object to the Elements instance
const elements = stripe.elements({clientSecret, appearance});
You may refer to the guide here for more information: https://stripe.com/docs/elements/appearance-api
uncut marlin
What do you mean by it's under options? I tried putting options behind appearance and it just gave me this error. The way I have my client secret set up is it passes during the submit button click so I'd probably have to rewrite all of my code to have the client secret at the top
velvet storm
What is your options variable for? Those parameters under your current options are not required in Elements group.
It should be like:
const options = {
clientSecret: '{{CLIENT_SECRET}}',
// Fully customizable with appearance API.
appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 3
const elements = stripe.elements(options);
// Create and mount the Payment Element
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');
clientSecret is needed to initialise Payment Element. You may follow this guide to check how a client secret can be created: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements
Is your integration creating Payment Intent first or later?
The guide I provided is to create Payment Intent first, but it seems like you're trying to Payment Intent later
If so, you create Payment Intent later, then it makes sense to have mode, amount and currency in the elements creation
If that's the case, then the appearance API will look like:
const options = {
mode: 'payment',
currency: 'usd',
amount: 1099,
// Fully customizable with appearance API.
appearance: {...},
};
const elements = stripe.elements(options);
Yoo that made it work thanks man
Yeah the payment intent was later
One last thing. How do I add a google fonts to the fontFamily?
Wait I figured it out
Sorry lol
velvet storm
It'll be under fonts variable instead of appearance. For example:
const options = {
mode: 'payment',
currency: 'usd',
amount: 1099,
// Fully customizable with appearance API.
appearance: {...},
fonts: [{
cssSrc: "https://fonts.googleapis.com/css2?family=Raleway&display=swap"
}],
};
const elements = stripe.elements(options);