CODEWITHSUNDEEP
woocommercestripe-payments
Nathan Bowman
Nathan Bowman

Reputation: 1

stripe payment form cardnumber only shows last 4digits of cardnumber when select expiry/ccv input field

Hi I have a problem with stripe payment form when viewing on mobile the inline credit card form only shows the last 4 digits of the card number when I click the expiry date / ccv input field

when i enter card number

when i click expiry/ccv it only shows lasts 4digits not full cardnumber

this is the CSS for the stripe woocommerce plugin stylesheet

.wc-stripe-elements-field,.wc-stripe-iban-element-field{
    border:1px solid #ddd;
    margin:5px 0;
    padding:5px;
    background-color:#fff;
    outline:0
}
#payment .methods li.woocommerce-SavedPaymentMethods-token label{
    display:inline
}
#payment .methods li.woocommerce-SavedPaymentMethods-new label{
    display:inline
}
#add_payment_method #payment ul.payment_methods li img.stripe-icon,.woocommerce-checkout #payment ul.payment_methods li img.stripe-icon{
    max-width:40px;
    padding-left:3px;
    margin:0
}
#add_payment_method #payment ul.payment_methods li img.stripe-bancontact-icon,.woocommerce-checkout #payment ul.payment_methods li img.stripe-bancontact-icon{
    max-height:65px;
    max-width:45px
}
#add_payment_method #payment ul.payment_methods li img.stripe-ideal-icon,.woocommerce-checkout #payment ul.payment_methods li img.stripe-ideal-icon{
    max-height:35px
}
#add_payment_method #payment ul.payment_methods li img.stripe-p24-icon,.woocommerce-checkout #payment ul.payment_methods li img.stripe-p24-icon{
    max-width:65px
}
#add_payment_method #payment ul.payment_methods li img.stripe-alipay-icon,.woocommerce-checkout #payment ul.payment_methods li img.stripe-alipay-icon{
    max-width:50px
}
#add_payment_method #payment ul.payment_methods li img.stripe-sofort-icon,.woocommerce-checkout #payment ul.payment_methods li img.stripe-sofort-icon{
    max-width:55px
}
#add_payment_method #payment ul.payment_methods li img.stripe-sepa-icon,.woocommerce-checkout #payment ul.payment_methods li img.stripe-sepa-icon{
    max-width:50px
}
#add_payment_method #payment ul.payment_methods li img.stripe-multibanco-icon,.woocommerce-checkout #payment ul.payment_methods li img.stripe-multibanco-icon{
    max-height:30px
}
#add_payment_method #payment ul.payment_methods li img.stripe-eps-icon,.woocommerce-checkout #payment ul.payment_methods li img.stripe-eps-icon{
    max-height:30px
}
#add_payment_method #payment ul.payment_methods li img.stripe-giropay-icon,.woocommerce-checkout #payment ul.payment_methods li img.stripe-giropay-icon{
    max-width:50px
}
#add_payment_method #payment ul.payment_methods li .stripe-credit-card-brand,.woocommerce-checkout #payment ul.payment_methods li .stripe-credit-card-brand{
    position:absolute;
    top:50%;
    margin-top:-10px;
    right:10px;
    background:no-repeat url(../images/credit-card.svg);
    display:block;
    width:30px;
    height:24px
}
#add_payment_method #payment ul.payment_methods li .stripe-visa-brand,.woocommerce-checkout #payment ul.payment_methods li .stripe-visa-brand{
    position:absolute;
    top:50%;
    margin-top:-10px;
    right:10px;
    background:no-repeat url(../images/visa.svg);
    display:block;
    width:30px;
    height:24px
}
#add_payment_method #payment ul.payment_methods li .stripe-amex-brand,.woocommerce-checkout #payment ul.payment_methods li .stripe-amex-brand{
    position:absolute;
    top:50%;
    margin-top:-10px;
    right:10px;
    background:no-repeat url(../images/amex.svg);
    display:block;
    width:30px;
    height:24px
}
#add_payment_method #payment ul.payment_methods li .stripe-diners-brand,.woocommerce-checkout #payment ul.payment_methods li .stripe-diners-brand{
    position:absolute;
    top:50%;
    margin-top:-10px;
    right:10px;
    background:no-repeat url(../images/diners.svg);
    display:block;
    width:30px;
    height:24px
}
#add_payment_method #payment ul.payment_methods li .stripe-discover-brand,.woocommerce-checkout #payment ul.payment_methods li .stripe-discover-brand{
    position:absolute;
    top:50%;
    margin-top:-10px;
    right:10px;
    background:no-repeat url(../images/discover.svg);
    display:block;
    width:30px;
    height:24px
}
#add_payment_method #payment ul.payment_methods li .stripe-jcb-brand,.woocommerce-checkout #payment ul.payment_methods li .stripe-jcb-brand{
    position:absolute;
    top:50%;
    margin-top:-10px;
    right:10px;
    background:no-repeat url(../images/jcb.svg);
    display:block;
    width:30px;
    height:24px
}
#add_payment_method #payment ul.payment_methods li .stripe-maestro-brand,.woocommerce-checkout #payment ul.payment_methods li .stripe-maestro-brand{
    position:absolute;
    top:50%;
    margin-top:-10px;
    right:10px;
    background:no-repeat url(../images/maestro.svg);
    display:block;
    width:30px;
    height:24px
}
#add_payment_method #payment ul.payment_methods li .stripe-mastercard-brand,.woocommerce-checkout #payment ul.payment_methods li .stripe-mastercard-brand{
    position:absolute;
    top:50%;
    margin-top:-10px;
    right:10px;
    background:no-repeat url(../images/mastercard.svg);
    display:block;
    width:30px;
    height:24px
}
#add_payment_method #payment ul.payment_methods .stripe-card-group,.woocommerce-checkout #payment ul.payment_methods .stripe-card-group{
    position:relative
}
.woocommerce-SavedPaymentMethods-token .stripe-source-errors .woocommerce-error{
    margin-top:1em;
    margin-bottom:2em
}
#wc-stripe-custom-button{
    display:block;
    width:100%
}
.gpay-button{
    background-origin:content-box;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    border:0;
    border-radius:4px;
    box-shadow:rgba(60,64,67,.3) 0 1px 1px 0,rgba(60,64,67,.15) 0 1px 3px 1px;
    cursor:pointer;
    height:40px;
    min-height:40px;
    padding:11px 24px;
    width:100%
}
.gpay-button.light{
    width:calc(100% - 3px);
    background-color:#fff
}
.gpay-button.light:active{
    background-color:#fff
}
.gpay-button.light:hover{
    background-color:#f8f8f8
}
.gpay-button.light:focus{
    box-shadow:#e8e8e8 0 1px 1px 0,#e8e8e8 0 1px 3px;
    outline:0
}
.gpay-button.dark{
    background-color:#000;
    box-shadow:none;
    padding:12px 24px 10px
}
.gpay-button.dark:active{
    background-color:#5f6368
}
.gpay-button.dark:hover{
    background-color:#3c4043
}
.gpay-button.dark:focus{
    box-shadow:#5f6368 0 1px 1px 0,#5f6368 0 1px 3px;
    outline:0
}
.gpay-button.short.light{
    background-image:url(https://www.gstatic.com/instantbuy/svg/light_gpay.svg)
}
.gpay-button.short.dark{
    background-image:url(https://www.gstatic.com/instantbuy/svg/dark_gpay.svg)
}

And this is my style.css

.wc-stripe-elements-field, .wc-stripe-iban-element-field{
    max-width: 100%!important;
    padding: 14px;
    margin-left: 10px;
    font-size:10px;
    margin-top: -4px;
    width: 340px!important;
}
#add_payment_method #payment ul.payment_methods li .stripe-credit-card-brand, .woocommerce-checkout #payment ul.payment_methods li .stripe-credit-card-brand {
    right:auto;
    left: 250px;
}

Any help would be great thanks, sorry I'm not the best at coding.

Upvotes: 0

Views: 688

Answers (1)

Justin Michael
Justin Michael

Reputation: 6485

WooCommerce is using the Stripe Card Element which has this behavior built-in. The only way to prevent this from happening is to give the Card Element enough width to prevent the card number from being collapsed when the CVC/postal code fields are in focus. This is not something you can control via CSS as the Card Element is in a secure iframe out of scope for your normal CSS.

Upvotes: 1

Related Questions