Can't input credit card details - Stripe

Hello all :wave:

I just joined the forum and this is my first post. I have a problem whose cause I could not find through extensive investigation. I do not know what to do and hope someone here can help me :crossed_fingers:

In the process of integrating credit card payments via Stripe and have done everything that was in the docs. My problem shows up on the checkout pages once I select the new payment method. I can’t enter any card details other than the name of the cardholder.

The whole thing then looks like this:

I didn’t changed anything in the corresponding template file:

addons/stripe/views/checkout/components/payments/card.tpl
<div class="litecheckout__item stripe-payment-form__section stripe-payment-form__section--card">
    <div class="clearfix">
        <div class="ty-credit-card cm-cc_form">
            <div class="ty-credit-card__control-group ty-control-group">
                <label for="credit_card_number"
                    class="ty-control-group__title cm-cc-number cc-number cm-required"
                >{__("card_number")}</label>
                <div class="stripe-payment-form__card"
                    data-ca-stripe-element="card"
                >{* Card number field *}</div>
            </div>

            <div class="ty-credit-card__control-group ty-control-group">
                <label for="credit_card_month"
                    class="ty-control-group__title cm-cc-date cc-date cm-cc-exp-month cm-required"
                >{__("valid_thru")}</label>
                <div class="stripe-payment-form__expiry"
                    data-ca-stripe-element="expiry"
                >{* Expriry field *}</div>
            </div>

            <div class="ty-credit-card__control-group ty-control-group">
                <label for="credit_card_name"
                    class="ty-control-group__title cm-required"
                >{__("cardholder_name")}</label>
                <input size="35"
                    type="text"
                    id="credit_card_name"
                    value=""
                    class="cm-cc-name ty-credit-card__input ty-uppercase"
                    data-ca-stripe-element="name"
                />
            </div>
        </div>

        <div class="ty-credit-card__cvv-field cvv-field">
            <div class="ty-control-group">
                <label for="credit_card_cvv2" class="ty-control-group__title cm-required cm-cc-cvv2  cc-cvv2 cm-autocomplete-off">{__("cvv2")}</label>
                <div class="stripe-payment-form__cvc"
                    data-ca-stripe-element="cvc"
                >{* CVC field *}</div>

                <div class="ty-cvv2-about">
                    <span class="ty-cvv2-about__title">{__("what_is_cvv2")}</span>
                    <div class="ty-cvv2-about__note">

                        <div class="ty-cvv2-about__info mb30 clearfix">
                            <div class="ty-cvv2-about__image">
                                <img src="{$images_dir}/visa_cvv.png" alt="" />
                            </div>
                            <div class="ty-cvv2-about__description">
                                <h5 class="ty-cvv2-about__description-title">{__("visa_card_discover")}</h5>
                                <p>{__("credit_card_info")}</p>
                            </div>
                        </div>
                        <div class="ty-cvv2-about__info clearfix">
                            <div class="ty-cvv2-about__image">
                                <img src="{$images_dir}/express_cvv.png" alt="" />
                            </div>
                            <div class="ty-cvv2-about__description">
                                <h5 class="ty-cvv2-about__description-title">{__("american_express")}</h5>
                                <p>{__("american_express_info")}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ty-control-group">
                <label for="credit_card_postal_code"
                       class="ty-control-group__title cm-cc-postal-code cm-required"
                >{__("zip_postal_code")}</label>
                <div class="stripe-payment-form__postal_code"
                     data-ca-stripe-element="postal_code"
                     data-ca-stripe-element-value="{$user_data.b_zipcode|default:$user_data.s_zipcode}"
                >{* Postal code field *}</div>
            </div>
        </div>
    </div>
</div>

As you could see the rendered HTML contains no inputs except the one for the cardholder’s name. I would add the inputs by hand but I don’t know what properties they must have .

There must be a better way to do this :thinking:
CS Cart: Multi Vendor 4.14.2.SP1
Stripe add-on version: 1.0

Can anyone please help me?

Thank you in advance and best regards :slight_smile:

Hello! If you can provide here the URL of your store, I can check this out and will try to help you :slight_smile:

Sorry for the late response and thank you for answering,
you can find the online shop here: https://megatalay.com/

Thanks for the link.

I have checked this. The Stripe payment uses this template with Stripe’s JS code that adds additional field into this HTML code. What you want to look for example is this one template:

design/themes/responsive/templates/views/orders/components/payments/cc.tpl

I hope it will help you.