Cum să adăugați butoane simple de plată pe bandă la tabelele dvs. de prețuri din Divi

Stripe este o soluție de procesare a plăților extrem de flexibilă pentru companiile online, mai ales dacă sunteți un dezvoltator de tehnologie. Dar, dacă nu sunteți dezvoltator și doriți totuși să folosiți Stripe pentru a vinde câteva produse online, există modalități simple de a face acest lucru. De fapt, cu câteva fragmente de cod (sau un plugin simplu), puteți adăuga butoane de plată Stripe pe site-ul dvs. într-o clipă.

În acest tutorial, vă voi arăta cum să adăugați butoane de plată Stripe pe site-ul dvs. Divi folosind Stripe Payments pentru WordPress Plugin. Vă voi arăta chiar și cum să vă stilizați butoanele pentru a se potrivi cu aspectul dvs. Divi.

Să începem!

Trage cu ochiul

Iată o scurtă privire asupra butoanelor de plată Stripe pe care le vom crea în acest tutorial.

Noțiuni de bază

Pentru acest tutorial de caz de utilizare, veți avea nevoie de următoarele:

• Tema Divi (instalată și activă)
• Un cont Stripe
• The Stripe Payments for WordPress Plugin de către WP Simply Pay (instalat și activ)
• Vom folosi, de asemenea, o pagină de prezentare a produselor digitale, disponibilă GRATUIT în cadrul Divi Builder

Despre plugin

Stripe Payments pentru WordPress de WP Simply Pay este un plugin care vă permite să începeți să colectați plata cu cardul de credit cu Stripe folosind un simplu shortcode încorporat. Puteți crea manual formularele de plată și butoanele de plată manual fără a utiliza pluginul, dar, deoarece acest plugin ușurează lucrurile și oferă câteva caracteristici convenabile (cum ar fi paginile de confirmare a plății și eșecul plății), am considerat că este mai util pe termen lung . Voi folosi versiunea GRATUITĂ Lite a pluginului pentru acest tutorial. Versiunea pro a pluginului vă va oferi mai mult control asupra stilului formularelor dvs., precum și suport pentru lucruri precum câmpuri personalizate, sume personalizate și caracteristici de abonament.

Configurarea formularelor Stripe cu pluginul

După ce aveți pluginul instalat și activ, navigați la Simple Pay Lite > Setări . Apoi, sub fila Chei Stripe, va trebui să introduceți cheile API ale contului dvs. Stripe. De dragul acestui tutorial, voi folosi doar cheile de testare, dar va trebui să vă asigurați și să vă activați contul Stripe și să generați câteva chei API live dacă doriți să începeți să colectați bani reali.

Puteți găsi cheile API conectându-vă la contul dvs. Stripe și făcând clic pe Dezvoltatori > chei API .

Va trebui să copiați atât cheia publicabilă, cât și cheia secretă în setările pluginului.

Acum săriți la fila generală. Acolo veți putea desemna o pagină de succes a plății și o pagină de eșec la plată. Veți observa că pluginul a creat deja aceste pagini pentru dvs. Dar, din moment ce conținutul paginii este generat de un cod scurt, puteți adăuga aceste coduri scurte la orice modul Divi pe orice aspect Divi pentru a crea versiuni personalizate ale acelor pagini. Deocamdată, păstrați acele pagini implicite la locul lor și continuați configurarea.

Setați stilul butonului de plată la „none (mostenire de la temă)”. Tot ce face este să scoateți CSS-ul folosit pentru a stiliza butonul implicit de bandă albastră. Acest lucru va face lucrurile puțin mai curate atunci când adăugăm propriul CSS personalizat pentru a stiliza butonul în Divi.

Apoi salvați modificările.

În fila de confirmare a plății, puteți utiliza etichetele șablonului disponibile pentru a personaliza mesajul și informațiile afișate de codul scurt în pagina dvs. de confirmare a plății. Dar pentru acest tutorial, voi lăsa doar mesajul implicit.

Crearea formularelor de plată Stripe

Formele de plată sunt într-adevăr butoane de plată Stripe care generează un formular de plată pop-up care permite utilizatorilor să finalizeze o achiziție fără să părăsească pagina vreodată. Prin urmare, va trebui să creați un nou formular de plată pentru fiecare produs sau serviciu pe care îl vindeți. În acest caz de utilizare, vom crea trei forme de plată pentru trei produse simulate.

Pentru a crea un nou formular de plată, accesați Tabloul de bord WordPress și navigați la Simple Pay Lite> Adăugați un nou.

Acordați un titlu Formularului de plată (acest titlu nu va fi afișat în partea din față).

Apoi, în fila Opțiuni de plată, introduceți o sumă unică.

Apoi, faceți clic pe fila Afișare formular On-Page și modificați textul implicit al butonului de plată la „Cumpărați acum” (sau orice doriți). De asemenea, puteți alege butonul de plată care procesează textul.

În fila Checkout Overlay Display, actualizați următoarele:

Numele Companiei
descrierea obiectului
Adresa URL a logo-ului / imaginii
Activați Rețineți-mă: DA

Aceste opțiuni determină ceea ce este afișat în fereastra pop-up pentru acest produs.

După ce ați terminat, asigurați-vă și publicați / actualizați formularul de plată.

În cele din urmă va trebui să copiați codul scurt al formularului de plată situat în partea dreaptă sus a paginii Editați formularul de plată pentru a-l lipi în aspectul paginii Divi.

Dar, deocamdată, puteți continua același proces pentru a crea alte două forme de plată, fiecare cu propria descriere a articolului, sigla / imaginea și suma.

Odată ce toate formularele de plată au fost create, vă puteți vizita formularele de plată navigând la Simple Pay Lite> Formulare de plată. Acolo veți avea acces ușor la codurile scurte.

Adăugarea butoanelor de plată Stripe la aspectul paginii dvs. Divi

Cu codurile scurte ale formularului de plată prin bandă gata de pornire, acum trebuie să punem în funcțiune aspectul paginii Divi. Pentru aceasta, creați o pagină nouă, dați titlului paginii dvs. și faceți clic pentru a utiliza Divi Builder.

Apoi selectați opțiunea „Alegeți un aspect premade”.

Deschideți pachetul Digital Product Layout și faceți clic pentru a utiliza pagina Digital Product Pricing.

Odată ce aspectul este încărcat pe pagină, publicați pagina și apoi faceți clic pentru a crea pe front-end.

Într-o filă separată, reveniți la pagina formularelor de plată și luați codul scurt pe care doriți să îl adăugați la tabelul de prețuri.

Apoi reveniți la aspectul paginii de prețuri și deschideți setările tabelului de prețuri pentru unul dintre tabelele de prețuri din aspect.

Scoateți textul butonului (nu aveți nevoie de el, deoarece codul scurt va servi drept buton) și apoi lipiți codul scurt sub conținut în caseta de conținut.

Veți vedea un buton nestilat cu textul „modul test” evidențiat sub buton. Butonul este nedistilat, deoarece am selectat opțiunea de a utiliza stilurile temei pentru buton în locul butonului albastru implicit. Textul în modul de testare este pur și simplu acolo pentru a vă reaminti că nu utilizați un formular de plată live pe bandă. Textul modului de testare va dispărea, evident, odată ce sunt folosite cheile API live.

Apoi, continuați același proces de copiere și lipire a celorlalte două coduri scurte ale formularului de plată în celelalte două tabele de prețuri.

Testați unul dintre butoane pentru a vă asigura că suprapunerea formularului de plată funcționează corect. Ar trebui să arate așa ...

Din păcate, această versiune a pluginului nu vă permite să personalizați suprapunerea formularului de plată dincolo de stilul implicit pe care îl vedeți. Dar funcționalitatea există și, în multe cazuri, nu veți avea nevoie de acest stil suplimentar. Cu toate acestea, puteți stiliza aceste butoane!

Stilizarea butoanelor de plată Stripe pentru a se potrivi cu aspectul

Pentru a stiliza butoanele de plată Stripe, vom adăuga câteva CSS personalizate la setările paginii noastre. În primul rând, trebuie să ne dăm seama ce selector vom folosi pentru a stiliza butonul. Puteți găsi acest lucru folosind instrumentele de dezvoltator ale browserului. Faceți clic dreapta pe butonul Stripe și selectați „Inspect”. În codul html puteți vedea că butonul are o clasă css „simpay-payment-btn”.

Acesta este selectorul de care avem nevoie pentru a viza stilul butonului.

Dacă dorim să potrivim stilul butoanelor noastre de plată Stripe cu butoanele utilizate pe aspectul nostru premade, putem inspecta unul dintre butoanele Divi deja stilate pe pagină pentru a obține codul CSS de care avem nevoie.

Acum deschideți setările paginii și adăugați următoarele CSS personalizate în fila Advanced:

.simpay-payment-btn {
    color: #ffffff!important;
    border-color: rgba(0,0,0,0);
    border-radius: 100px;
    letter-spacing: 2px;
    font-size: 16px;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
    font-weight: 600!important;
    background-color: #091c4f;
    padding-top: 16px!important;
    padding-right: 32px!important;
    padding-bottom: 16px!important;
    padding-left: 32px!important;
}

Asta e! Să verificăm rezultatul final.

Personalizarea paginilor de confirmare a plății și a paginilor eșuate

Nu uitați că, deoarece pluginul vă generează confirmarea plății și conținutul paginii eșuate de plată utilizând un shortcode, puteți adăuga acel shortcode la orice aspect Divi și apoi utilizați setările încorporate Divi pentru a stiliza textul cum doriți.

Acest lucru este util pentru potrivirea stilurilor acestor pagini cu site-ul dvs. web, fără a fi nevoie să recurgeți la CSS personalizat.

Gânduri finale

Stripe poate fi o soluție extrem de convenabilă pentru colectarea plăților online. Și, cu pluginul Simple Payments for WordPress, puteți obține funcționalitatea de bază Stripe Checkout pe site-ul dvs. Divi în câteva minute. De asemenea, dacă profitați de aspectele premade ale Divi, puteți adăuga și stiliza butoanele de plată Stripe pentru a se potrivi cu aspectul dvs. pur și simplu copiind și lipind codul CSS deja creat pentru dvs. Rezultatul este un instrument de procesare a plăților complet funcțional și sigur, care poate colecta plăți de la vizitatori fără ca aceștia să fie nevoiți să părăsească pagina.

Simțiți-vă liber să explorați mai multe modalități de a accepta plăți Stripe pe site-ul dvs. WordPress.

Sper că acest tutorial vă va fi de ajutor și aștept cu nerăbdare să auziți de la dvs. în comentarii.

Noroc!