Stiluri de câmpuri Stripe pentru cardul de credit

Notă! Unele linkuri de pe această pagină pot fi linkuri afiliate, ceea ce înseamnă că, dacă alegeți să efectuați o achiziție, pot câștiga un mic comision fără costuri suplimentare pentru dvs. Apreciez foarte mult sprijinul dvs.!

blank

Gateway de plată Stripe pentru WooCommerce utilizează Stripe Elements pentru a afișa stiluri de câmpuri Stripe pentru cardul de credit pe pagina dvs. de plată. Acest lucru vă oferă flexibilitatea de a vă personaliza experiența de efectuare a plăților prin stilarea câmpurilor cardului de credit în funcție de tema și preferințele dvs

Toate câmpurile sunt afișate în cadrul elementelor <iframe> pentru a oferi clienților o experiență sigură. Deoarece din punct de vedere tehnic conținutul iframes nu face parte din pagina dvs., nu este posibil să aplicați direct stiluri pe acele componente din foaia dvs. de stil și trebuie efectuate într-un alt mod.

CSS Pur

Stripe Elements are un stil cât mai mic.

În afara casetei, stilurile de câmpuri Stripe afișează doar text și nimic altceva. Aceasta înseamnă că toate celelalte stiluri sunt accesibile imediat prin intermediul CSS, inclusiv culorile de fundal, marginile, padding-ul, umbrele etc.

Aspect standard

În modul normal, veți avea trei câmpuri separate pentru fiecare detaliu al cardului de credit.

Stilarea tuturor câmpurilor simultan

Puteți utiliza selectorul de câmpuri . wc-stripe-elements-field pentru a viza toate acele câmpuri simultan.

Exemplu:

.wc-stripe-elements-field {     border-color: #999; }

Stilarea unui câmp individual

Dacă trebuie să aplicați stiluri pe un câmp individual, puteți utiliza identificatorul acestuia:

Stilarea unui câmp individual
Stilarea unui câmp individual

Exemplu:

#stripe-card-element {     margin-bottom: 1em; }

Formular de card de credit inline

Dacă ați activat Formularul cardului de credit Inline în setările Stripe, toate câmpurile cărților de credit vor fi afișate împreună ca un singur câmp pe pagina dvs. În acest caz, trebuie să folosiți doar selectorul de câmpuri .wc-stripe-elements-field pentru a ținti învelișul câmpului respectiv.

Folosind un Filtru

Selectoarele CSS de mai sus vă permit să modificați stilul ambalajelor de câmp. Cu toate acestea, dacă trebuie să schimbați ceva și în input-ul real, trebuie să furnizați stilurile de câmpuri Stripe necesare.

Acest lucru se poate realiza folosind filtrul PHP wc_stripe_elements_styling.

Exemplu:

<?php function my_theme_modify_stripe_fields_styles( $styles ) {     return array(         'base' => array(             'iconColor'     => '#666EE8',             'color'         => '#31325F',             'fontSize'      => '15px',             '::placeholder' => array(                 'color' => '#CFD7E0',             ),         ),     ); } add_filter( 'wc_stripe_elements_styling',  'my_theme_modify_stripe_fields_styles' );

Ține minte:

  • Stilurile pe care le vedeți în exemplu sunt stiluri implicite utilizate de extensie.
  • Imediat ce oferiți stiluri personalizate, extensia le va ignora pe cele implicite. Pentru a evita acest lucru, copiați exemplul și construiți pe el.
  • Toate stilurile sunt aplicate prin JavaScript, deci trebuie să utilizați nume de proprietăți JavaScript în loc de CSS pur. De exemplu, în loc de font-size, ar trebui să utilizați fontSize.

Pentru a vedea o descriere a tabloului așteptat, accesați: Stripe – Element Options. Așa cum se explică pe pagina respectivă, trebuie să aveți următoarele opțiuni.

Format

array(     [state] => array(         [property] => [value],         [pseudoClass] => array(             [property] => [value],         ),     ), )

Toate stilurile personalizate trebuie să se încadreze într-un tablou, care conține:

  • Afirmați drept element de nivel superior
  • Proprietățile și valorile lor ca elemente de nivel secund
  • Pseudo-clase pentru o stare specifică ca elemente de nivelul al doilea, și proprietățile lor ca cele de nivelul al treilea

Statele

Statele
Statele

Proprietăți permise

color, fontFamily, fontSize, fontSmoothing, fontStyle, fontVariant, fontWeight, iconColor, lineHeight, letterSpacing, textAlign, textDecoration, textShadow, și textTransform

Pseudo-clase

hover, :focus, ::placeholder, ::selection, :-webkit-autofill, :disabled, and ::-ms-clear

Exemplu:

function my_theme_modify_stripe_fields_styles( $styles ) {     return array(         'base' => array(             'color' => '#666666',             'fontSize' => '15px',             '::placeholder' => array(                 'color' => '#999999',             ),         ),         'invalid' => array(             'color' => '#ff7500',         ),     ); } add_filter( 'wc_stripe_elements_styling', 'my_theme_modify_stripe_fields_styles' );

În acest exemplu se schimbă:

  • Culoarea textului și dimensiunea fontului în toate stările.
  • Culoarea textului de la locații în stare normală prin ::placeholder pseudo-class.
  • Culoarea textului câmpurilor atunci când sunt nevalide.

S-ar putea să te intereseze și:

blank
Despre Admin Staff

Comunitatea WordPress este un Blog strict Educativ pentru utilizatorii de WordPress. Nu este Agenție de WEB, Publicitate sau Marketing! Dacă sunteți firmă și aveți nevoie de sfaturi vă ajut cu plăcere, pentru contracte de colaborare, vă rog contactați agenții specializate, care vă pot oferi documentația fiscală necesară. Sunt pasionat de WordPress și tot ce se leagă de mediul online din 2011, scriu din pasiune și-mi place să ajut, doar prin prisma acestui fapt că-mi place să fac bine oamenilor care au aceeași pasiune. Blog-ul este monetizat prin link-uri de afiliere și Google Adsense, unde se plătesc taxe legale de către platformele respective. Dacă dorești să susții acest blog, sunt deschis pentru donații. Vă mulțumesc pentru înțelegere! George CRIȘAN , Administrator Comunitatea WordPress!

Lasă un comentariu