#itsqwerty
outer gorge
thick stump
Hello! That text is required to be there, you can't really remove it unless you don't set the Payment Method up for future use.
alpine yew
can it be customised to something like "By providing your card information, you are signuping for future payments accorrding with our terms"
thick stump
I don't believe that text can be customized, but let me confirm...
alpine yew
I appreciate it
thick stump
Oh, hang on, it looks like we did add a property to control this: https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-options-terms
If you set terms to never for the Payment Method(s) in question does that solve the issue for you?
alpine yew
it does! thank you! Just one more question
I know I can pass in custom font as a variable however can I also do a custom font that is imported onto our site (meaning its not avaliable on the users pc by default)
thick stump
Yeah, you can pass an array of custom fonts when you initialize stripe.elements: https://stripe.com/docs/js/elements_object/create#stripe_elements-options-fonts
alpine yew
Oh, hang on, it looks like we did add a property to control this: https://stripe...
slightly confused - can I pass in the temrs in the option object here?
thick stump
Yes.
See fontFamily here: https://stripe.com/docs/elements/appearance-api?platform=web#commonly-used-variables
thick stump
Oh, gotcha. Yeah, it's in the options you pass into <Elements>.
thick stump
terms needs to be an object with properties for each Payment Method.
So like terms: { card: 'never' } for example.
alpine yew
I wasnt aware there was a difference
thick stump
You want to put it in this one.
That's the one I thought you were referring to.
Is that the same as the one you're using or different?
alpine yew
I am passing it there arent I?
thick stump
Oh, yep!
alpine yew
I have a varaible named options, which im passing ito <Elements /> options
thick stump
Sorry, I'm not very good with React.
alpine yew
ahaha no stress
thick stump
The terms goes in the options for the Payment Element, which I think isn't shown there at all. I think it's inside <CheckoutForm> somewhere.
What's in that data there?
alpine yew
data just contains custom data specfic to the project
like the plan they picked
and their instagram account detail
s
alpine yew
let me try
thick stump
I'll look through the React guide as well...
Do you have <PaymentElement somewhere?
The example code there is why I thought it would be inside <CheckoutForm> somewhere.
Once you find <PaymentElement> you can pass an options object to it containing the terms stuff and that should work.
alpine yew
yeah I asee!
trying it now
yep works perfectly!
I am trying to cusomise the font tho, however it doesnt seem to work
const options: StripeElementsOptionsMode = {
mode: 'subscription',
amount: 1423,
currency: 'usd',
paymentMethodTypes: [],
appearance: {
theme: 'none',
variables: {
fontFamily: 'SpaceGrotesk',
colorPrimary: ''
},
},
}```this is what im passing in
and this part of my .css file
@font-face {
font-family: 'SpaceGrotesk';
src: url('assets/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations');
font-style: normal;
}```and the font is working everywhere in the website
except for the paymentelemtn
thick stump
You need to specify the fonts array when you initialize Elements.
So you need a fonts property there, and it needs to be set to an array, and inside that array you need an object like this: https://stripe.com/docs/js/elements_object/create#css_font_source_object