ginjaninja_api

[naive bison]

👋 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/1222930718301229106

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[agile wadi]

Yeah assuming you're using the Payment Element? That groups fields by nature. If you absolutely need them split, we have individual elements for card number, expiration, and cvc that you can position wherever you like

[rain hinge]

yes please how do i do that? also how do i style the form. i tried adding this

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}); that did change the color etc.. but i had no option for a border and as its an iframe i cant over write the css

this is the default at the moment

[agile wadi]

You can create cardNumber: https://docs.stripe.com/js/element/other_element?type=cardNumber

https://docs.stripe.com/js/element/other_element?type=cardExpiry

[rain hinge]

trying to replicate somthing like so

[agile wadi]

and https://docs.stripe.com/js/element/other_element?type=cardCvc

So just create each element individually

[rain hinge]

var card = elements.create('card');

thanks can i tail gate on this?

[agile wadi]

see the above links

they're different names

elements.create('cardNumber')

for the number

Then you'd need 2 more for the expiry and cvc

[rain hinge]

yh but im already using var card. so can i do somthing like var card = elements.create('card', 'more', 'more');?

[agile wadi]

no

you need a function call to create each one

And assign each element created to a variable

The links I shared with you have code

[rain hinge]

is there an examplae ofthe function?

[agile wadi]

Click the links I shared

They have code

[rain hinge]

thanks im alittle lost ``` var cardNumber = elements.create('cardNumber', {
style: {
base: {
iconColor: '#c4f0ff',
color: '#fff',
fontWeight: '500',
fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
fontSize: '16px',
fontSmoothing: 'antialiased',
'::placeholder': {
color: '#000',
},
border: '1px solid #ccc', // Add border property here
},
invalid: {
iconColor: '#FFC7EE',
color: '#FFC7EE',
},
},
});
cardNumber.mount('#card-element');

        var cardExpiry = elements.create('cardExpiry', {
            style: {
                base: {
                    iconColor: '#c4f0ff',
                    color: '#fff',
                    fontWeight: '500',
                    fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
                    fontSize: '16px',
                    fontSmoothing: 'antialiased',
                    '::placeholder': {
                        color: '#000',
                    },
                    border: '1px solid #ccc', // Add border property here
                },
                invalid: {
                    iconColor: '#FFC7EE',
                    color: '#FFC7EE',
                },
            },
        });
        cardExpiry.mount('#card-element');``` can i mont to the same id?

[agile wadi]

Ah no

The point of those elements is that you can position them wherever you want

So you mount them to different places

[rain hinge]

but that brings into iframes is that correct?

[uneven grail]

Each of the split card elements will have its own iframe

[rain hinge]

ok thanks, ill try that next question how can i add a border

so i do it on the mounted element? or can i add a style to the base?

[uneven grail]

These elements themselves don't have a stylable border, but what you can do is put a border on the div that you are mounting the element to

[rain hinge]

awesome thans