Come aggiungere semplici pulsanti di pagamento Stripe alle tabelle dei prezzi in Divi

Stripe è una soluzione di elaborazione dei pagamenti estremamente flessibile per le aziende online, soprattutto se sei uno sviluppatore esperto di tecnologia. Ma se non sei uno sviluppatore e desideri comunque utilizzare Stripe per vendere alcuni prodotti online, ci sono modi semplici per farlo. Infatti, con pochi frammenti di codice (o un semplice plugin), puoi aggiungere i pulsanti di pagamento Stripe al tuo sito web in un lampo.

In questo tutorial, ti mostrerò come aggiungere i pulsanti di pagamento Stripe al tuo sito Web Divi utilizzando Stripe Payments for WordPress Plugin. Ti mostrerò anche come modellare i tuoi pulsanti in modo che corrispondano al tuo layout Divi.

Iniziamo!

Sbirciata

Ecco un'anteprima dei pulsanti di pagamento Stripe che creeremo in questo tutorial.

Iniziare

Per questo tutorial sui casi d'uso, avrai bisogno di quanto segue:

• Il tema Divi (installato e attivo)
• Un conto a righe
• Il plugin Stripe Payments per WordPress di WP Simply Pay (installato e attivo)
• Utilizzeremo anche un layout di pagina dei prezzi dei prodotti digitali disponibile GRATUITAMENTE all'interno di Divi Builder

Informazioni sul plugin

Stripe Payments for WordPress di WP Simply Pay è un plug-in che ti consente di iniziare a riscuotere pagamenti con carta di credito con Stripe utilizzando un semplice shortcode incorporato. Puoi effettivamente creare moduli di pagamento e pulsanti di pagamento manualmente senza l'uso del plug-in, ma poiché questo plug-in semplifica le cose e offre alcune funzionalità utili (come la conferma del pagamento e le pagine di errore di pagamento), ho pensato che fosse più utile a lungo termine . Userò la versione Lite GRATUITA del plugin per questo tutorial. La versione pro del plugin ti darà un maggiore controllo sullo stile dei tuoi moduli insieme al supporto per cose come campi personalizzati, importi personalizzati e funzionalità di abbonamento.

Configurare i moduli Stripe con il plugin

Una volta installato e attivo il plug-in, vai su Simple Pay Lite > Impostazioni . Quindi, nella scheda Chiavi Stripe, dovrai inserire le chiavi API del tuo account Stripe. Per il bene di questo tutorial, userò solo le chiavi di prova, ma dovrai assicurarti di attivare il tuo account Stripe e generare alcune chiavi API live se vuoi iniziare a raccogliere denaro reale.

Puoi trovare le tue chiavi API accedendo al tuo account Stripe e facendo clic su Sviluppatori > Chiavi API .

Dovrai copiare sia la chiave pubblicabile che la chiave segreta nelle impostazioni del plugin.

Ora passa alla scheda generale. Lì sarai in grado di designare una Pagina di pagamento riuscito e una Pagina di pagamento non riuscito. Noterai che il plugin ha già creato quelle pagine per te. Ma poiché il contenuto della pagina è generato da uno shortcode, puoi effettivamente aggiungere quegli shortcode a qualsiasi modulo Divi su qualsiasi layout Divi per creare versioni personalizzate di quelle pagine. Per ora mantieni le pagine predefinite in posizione e continua la configurazione.

Imposta lo stile del pulsante di pagamento su "nessuno (eredita dal tema)". Tutto ciò che fa è estrarre il css utilizzato per modellare il pulsante della striscia blu predefinito. Questo renderà le cose un po' più pulite quando aggiungiamo il nostro CSS personalizzato per modellare il pulsante in Divi.

Quindi salvare le modifiche.

Nella scheda di conferma del pagamento, puoi utilizzare i tag modello disponibili per personalizzare il messaggio e le informazioni visualizzate dallo shortcode nella pagina di conferma del pagamento. Ma per questo tutorial, lascerò solo il messaggio predefinito.

Creazione di moduli di pagamento Stripe

I moduli di pagamento sono in realtà pulsanti di pagamento Stripe che generano un modulo di pagamento popup che consente agli utenti di completare un acquisto senza mai uscire dalla pagina. Pertanto dovrai creare un nuovo modulo di pagamento per ogni prodotto o servizio che stai vendendo. In questo caso d'uso, creeremo tre moduli di pagamento per tre prodotti fittizi.

Per creare un nuovo modulo di pagamento, vai alla dashboard di WordPress e vai su Simple Pay Lite > Aggiungi nuovo.

Assegna un titolo al modulo di pagamento (questo titolo non verrà mostrato sul front-end).

Quindi, nella scheda Opzioni di pagamento, inserisci un importo una tantum.

Quindi, fai clic sulla scheda Visualizzazione modulo su pagina e modifica il testo del pulsante di pagamento predefinito in "Acquista ora" (o qualunque cosa tu voglia). Puoi anche scegliere il testo di elaborazione del pulsante di pagamento.

Nella scheda Checkout Overlay Display, aggiorna quanto segue:

Nome della ditta
descrizione dell'articolo
Logo/URL immagine
Abilita Ricordami: SI

Queste opzioni determinano cosa viene mostrato nel popup del modulo di pagamento per questo particolare prodotto.

Una volta terminato, assicurati di pubblicare/aggiornare il modulo di pagamento.

Alla fine dovrai copiare lo shortcode del modulo di pagamento situato in alto a destra nella pagina Modifica modulo di pagamento per incollarlo nel layout della tua pagina Divi.

Ma per ora, puoi continuare la stessa procedura per creare altri due moduli di pagamento, ciascuno con la propria descrizione dell'oggetto, logo/immagine e importo.

Una volta che tutti i tuoi moduli di pagamento sono stati creati, puoi visitare i tuoi moduli di pagamento navigando su Simple Pay Lite > Moduli di pagamento. Lì avrai facile accesso agli shortcode.

Aggiunta di pulsanti di pagamento Stripe al layout di pagina Divi

Con gli shortcode del modulo di pagamento stripe pronti per l'uso, ora dobbiamo ottenere il layout della nostra pagina Divi attivo e funzionante. Per fare ciò, crea una nuova pagina, assegna un titolo alla tua pagina e fai clic per utilizzare Divi Builder.

Quindi seleziona l'opzione "Scegli un layout predefinito".

Apri il pacchetto Digital Product Layout e fai clic per utilizzare la pagina dei prezzi dei prodotti digitali.

Una volta che il layout è stato caricato nella pagina, pubblica la pagina e quindi fai clic per costruire sul front-end.

In una scheda separata, torna alla pagina dei moduli di pagamento e prendi lo shortcode che desideri aggiungere alla tabella dei prezzi.

Quindi torna al layout della pagina dei prezzi e apri le impostazioni della tabella dei prezzi per una delle tabelle dei prezzi nel layout.

Estrarre il testo del pulsante (non è necessario poiché lo shortcode fungerà da pulsante) e quindi incollare lo shortcode sotto il contenuto nella casella del contenuto.

Vedrai un pulsante senza stile con il testo "modalità test" evidenziato sotto il pulsante. Il pulsante è senza stile perché abbiamo selezionato l'opzione per utilizzare gli stili del tema per il pulsante invece del pulsante blu predefinito. Il testo della modalità di test è semplicemente lì per ricordarti che non stai utilizzando un modulo di pagamento live stripe. Il testo della modalità test scomparirà ovviamente una volta utilizzate le chiavi API live.

Quindi, continua lo stesso processo di copia e incolla degli altri due shortcode del modulo di pagamento nelle restanti due tabelle dei prezzi.

Prova uno dei pulsanti per assicurarti che l'overlay del modulo di pagamento funzioni correttamente. Dovrebbe sembrare come questo…

Sfortunatamente, questa versione del plug-in non ti consente di personalizzare l'overlay del modulo di pagamento oltre lo stile predefinito che vedi. Ma la funzionalità c'è e in molti casi non avrai bisogno di quello stile extra. Tuttavia, puoi modellare quei pulsanti!

Disegnare i pulsanti di pagamento a strisce in modo che corrispondano al layout

Per modellare i pulsanti di pagamento Stripe, aggiungeremo alcuni CSS personalizzati alle impostazioni della nostra pagina. Per prima cosa, dobbiamo capire quale selettore useremo per definire lo stile del pulsante. Puoi trovarlo utilizzando gli strumenti di sviluppo del tuo browser. Fare clic con il pulsante destro del mouse sul pulsante Stripe e selezionare "Ispeziona". Nel codice html puoi vedere che il pulsante ha una classe css "simpay-payment-btn".

Questo è il selettore di cui abbiamo bisogno per scegliere come target lo stile del pulsante.

Se vogliamo abbinare lo stile dei nostri pulsanti di pagamento Stripe con i pulsanti utilizzati sul nostro layout predefinito, possiamo ispezionare uno dei pulsanti Divi già stilizzati sulla pagina per ottenere il codice CSS di cui abbiamo bisogno.

Ora apri le impostazioni della pagina e aggiungi il seguente CSS personalizzato nella scheda Avanzate:

.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;
}

Questo è tutto! Diamo un'occhiata al risultato finale.

Personalizzazione delle pagine di conferma del pagamento e di pagamento non riuscito

Non dimenticare che poiché il plug-in genera la conferma del pagamento e il contenuto della pagina di pagamento non riuscito utilizzando uno shortcode, puoi aggiungere tale shortcode a qualsiasi layout Divi e quindi utilizzare le impostazioni integrate di Divi per modellare il testo come desideri.

Questo è utile per abbinare gli stili di queste pagine al tuo sito Web senza dover ricorrere a CSS personalizzati.

Pensieri finali

Stripe può essere una soluzione estremamente conveniente per riscuotere pagamenti online. E, con il plug-in Simple Payments for WordPress, puoi ottenere la funzionalità di base di Stripe Checkout attiva e funzionante sul tuo sito Divi in ​​pochi minuti. Inoltre, se utilizzi i layout predefiniti di Divi, puoi aggiungere e modellare i pulsanti di pagamento Stripe in modo che corrispondano al tuo layout semplicemente copiando e incollando il codice CSS già creato per te. Il risultato è uno strumento di elaborazione dei pagamenti completamente funzionale e sicuro in grado di riscuotere i pagamenti dai visitatori senza che debbano mai lasciare la pagina.

Sentiti libero di esplorare altri modi per accettare pagamenti Stripe sul tuo sito WordPress.

Spero che questo tutorial ti sia stato utile e non vedo l'ora di sentirti nei commenti.

Saluti!