devsmith | Stripe Developers | Page 1

hallow gyroBOT Aug 10, 2023, 6:51 AM

#

rare radish Aug 10, 2023, 6:51 AM

#

hello! are you using the Card Element or Payment Element?

stone rover Aug 10, 2023, 6:52 AM

#

Card Element

rare radish Aug 10, 2023, 6:53 AM

#

you can style it via a Style object : https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options, https://stripe.com/docs/js/appendix/style?type=card

Stripe JS Reference

stone rover Aug 10, 2023, 6:56 AM

#

yes i tried it but it doesnt fullfill my requirement i wanna apply css to each input field which im getting through api

rare radish Aug 10, 2023, 6:57 AM

#

what do you mean by apply css to each input field which you're getting through API? Can you explain more?

stone rover Aug 10, 2023, 7:00 AM

#

yes i have page in laravel where im using stripe integration and i have integrated above script and that script provides me three fields as i have mentioned so i wanna apply css to those three input fields seprately like boundries color etc

#

?

rare radish Aug 10, 2023, 7:17 AM

#

from what i understand, you want to apply 3 separate kinds of design / css to each of those inputs i.e. number, cvc, expiry date?

#

you can create each field separately and then style them separately too

stone rover Aug 10, 2023, 7:23 AM

#

i cant create them custom a those all three fields is provide by stripe script api itself

rare radish Aug 10, 2023, 7:23 AM

#

i'm sorry but i don't understand what you mean by that script provides you with three fields

#

maybe you can paste your code snippet and what you mean by that

stone rover Aug 10, 2023, 7:23 AM

#

all right

#

<div class="pb-3 m-0 text-24 font-weight-700">{{trans('messages.payment.stripe')}} {{trans('messages.payment.payment')}} </div>
<form action="{{URL::to('payments/stripe-request')}}" method="post" id="payment-form">
{{ csrf_field() }}
<div class="form-row p-0 m-0">
<label for="card-element">
{{trans('messages.payment_stripe.credit_debit_card')}}
</label>
<div id="card-element">

</div>

            <!-- Used to display form errors -->
            <div id="card-errors" role="alert"></div>
        </div>
        <div class="form-group mt-5">
            <div class="col-sm-8 p-0">
                <button class="btn vbtn-outline-success text-16 font-weight-700 pl-5 pr-5 pt-3 pb-3" id="stripe_btn"><i class="spinner fa fa-spinner fa-spin d-none"></i> {{trans('messages.payment_stripe.submit_payment')}}</button>
            </div>
        </div>
    </form>
    </div>

thats my form and stripe api which im using is @if (Request::path() == 'payments/stripe')
<script src="https://js.stripe.com/v3/"></script>
@endif

so below script will provide me three input fields cardnumber mm/yy and cvc so elements will be fetched inside <label for="card-element">

rare radish Aug 10, 2023, 7:31 AM

#

alright, so why can't you style them in the way i mentioned? have you tried?

stone rover Aug 10, 2023, 7:33 AM

#

yes tried but i think any manipulation leads to security so changes are unable to be applied on those fields

rare radish Aug 10, 2023, 7:36 AM

#

unless you can provide an example replicating your issue, it's going to be very difficult for me to help any further

#devsmith