Jak dodać proste przyciski płatności Stripe do tabel cenowych w Divi

Stripe to niezwykle elastyczne rozwiązanie do przetwarzania płatności dla firm internetowych, zwłaszcza jeśli jesteś doświadczonym programistą. Ale jeśli nie jesteś programistą i nadal chcesz używać Stripe do sprzedaży kilku produktów online, możesz to zrobić w prosty sposób. W rzeczywistości za pomocą kilku fragmentów kodu (lub prostej wtyczki) możesz błyskawicznie dodać przyciski płatności Stripe do swojej witryny.

W tym samouczku pokażę, jak dodać przyciski płatności Stripe do swojej witryny Divi za pomocą wtyczki Stripe Payments dla WordPress. Pokażę ci nawet, jak stylizować przyciski, aby pasowały do ​​układu Divi.

Zacznijmy!

zapowiedź

Oto zapowiedź przycisków płatności Stripe, które stworzymy w tym samouczku.

Pierwsze kroki

W tym samouczku dotyczącym przypadków użycia potrzebne będą:

• Motyw Divi (zainstalowany i aktywny)
• Konto Stripe
• Płatności Stripe dla wtyczki WordPress firmy WP Simply Pay (zainstalowane i aktywne)
• Będziemy również korzystać z układu strony z cenami produktów cyfrowych dostępnego ZA DARMO w Divi Builder

O wtyczce

Stripe Payments for WordPress od WP Simply Pay to wtyczka, która pozwala rozpocząć pobieranie płatności kartą kredytową za pomocą Stripe za pomocą prostego osadzania shortcode. W rzeczywistości możesz ręcznie tworzyć formularze kasy i przyciski płatności bez użycia wtyczki, ale ponieważ ta wtyczka ułatwia wszystko i oferuje kilka wygodnych funkcji (takich jak strony potwierdzenia płatności i strony niepowodzenia płatności), pomyślałem, że na dłuższą metę będzie bardziej pomocna . W tym samouczku będę używał DARMOWEJ wersji wtyczki. Wersja pro wtyczki zapewnia większą kontrolę nad stylem formularzy, a także obsługuje takie elementy, jak pola niestandardowe, kwoty niestandardowe i funkcje subskrypcji.

Konfigurowanie formularzy Stripe za pomocą wtyczki

Po zainstalowaniu i aktywowaniu wtyczki przejdź do Simple Pay Lite > Ustawienia . Następnie w zakładce Stripe Keys musisz wprowadzić klucze API konta Stripe. Na potrzeby tego samouczka będę używał tylko kluczy testowych, ale będziesz musiał upewnić się i aktywować swoje konto Stripe oraz wygenerować kilka kluczy API na żywo, jeśli chcesz zacząć zbierać prawdziwe pieniądze.

Możesz znaleźć swoje klucze API, logując się na swoje konto Stripe i klikając Developers > API keys .

Musisz skopiować zarówno klucz do publikacji, jak i klucz tajny do ustawień wtyczki.

Przejdź teraz do zakładki ogólnej. Tam będziesz mógł wyznaczyć stronę sukcesu płatności i stronę niepowodzenia płatności. Zauważysz, że wtyczka utworzyła już te strony dla Ciebie. Ale ponieważ zawartość strony jest generowana przez krótki kod, możesz dodać te skróty do dowolnego modułu Divi w dowolnym układzie Divi, aby utworzyć niestandardowe wersje tych stron. Na razie po prostu zachowaj te domyślne strony i kontynuuj konfigurację.

Ustaw styl przycisku płatności na „brak (dziedziczenie po motywie)”. Wszystko to polega na usunięciu CSS używanego do stylizacji domyślnego przycisku niebieskiego paska. Sprawi to, że sytuacja będzie trochę czystsza, gdy dodamy własny niestandardowy CSS, aby stylizować przycisk w Divi.

Następnie zapisz zmiany.

W zakładce potwierdzenia płatności możesz użyć dostępnych tagów szablonów, aby dostosować wiadomość i informacje wyświetlane przez krótki kod na stronie potwierdzenia płatności. Ale w tym samouczku zostawię tylko domyślną wiadomość.

Tworzenie formularzy płatności Stripe

Formy płatności to tak naprawdę przyciski płatności Stripe, które generują wyskakujący formularz płatności, który umożliwia użytkownikom dokonanie zakupu bez opuszczania strony. Dlatego będziesz musiał utworzyć nowy formularz płatności dla każdego sprzedawanego produktu lub usługi. W tym przypadku utworzymy trzy formularze płatności dla trzech pozorowanych produktów.

Aby utworzyć nowy formularz płatności, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Simple Pay Lite > Dodaj nowy.

Nadaj formularzowi płatności tytuł (ten tytuł nie będzie wyświetlany na interfejsie).

Następnie na karcie Opcje płatności wprowadź jednorazową kwotę.

Następnie kliknij kartę Wyświetlanie formularza na stronie i zmień domyślny tekst przycisku płatności na „Kup teraz” (lub cokolwiek chcesz). Możesz również wybrać tekst przetwarzający przycisk płatności.

Na karcie Wyświetlanie nakładki realizacji transakcji zaktualizuj następujące informacje:

Nazwa firmy
opis przedmiotu
Adres URL logo/obrazu
Włącz opcję Zapamiętaj mnie: TAK

Te opcje określają, co jest wyświetlane w wyskakującym okienku formularza zamówienia dla tego konkretnego produktu.

Gdy skończysz, upewnij się i opublikuj/zaktualizuj formularz płatności.

Ostatecznie będziesz musiał skopiować krótki kod formularza płatności znajdujący się w prawym górnym rogu strony Edytuj formularz płatności, aby wkleić go do układu strony Divi.

Ale na razie możesz kontynuować ten sam proces, aby utworzyć dwa dodatkowe formularze płatności, każdy z własnym opisem przedmiotu, logo/obrazem i kwotą.

Po utworzeniu wszystkich formularzy płatności możesz przejść do formularzy płatności, przechodząc do Simple Pay Lite > Formy płatności. Tam będziesz miał łatwy dostęp do skrótów.

Dodawanie przycisków płatności Stripe do układu strony Divi

Bez gotowych kodów do płatności w paski, teraz musimy uruchomić nasz układ strony Divi. Aby to zrobić, utwórz nową stronę, nadaj jej tytuł i kliknij, aby użyć Divi Builder.

Następnie wybierz opcję „Wybierz gotowy układ”.

Otwórz pakiet Układ produktu cyfrowego i kliknij, aby skorzystać ze strony Ceny produktów cyfrowych.

Po załadowaniu układu na stronę opublikuj stronę, a następnie kliknij, aby zbudować interfejs.

W osobnej zakładce wróć do strony formularzy płatności i pobierz krótki kod, który chcesz dodać do tabeli cen.

Następnie wróć do układu strony z cenami i otwórz ustawienia tabeli cen dla jednej z tabel cen w układzie.

Wyjmij tekst przycisku (nie potrzebujesz go, ponieważ skrót będzie służył jako przycisk), a następnie wklej krótki kod pod treścią w polu treści.

Zobaczysz przycisk bez stylu z podświetlonym tekstem „tryb testowy”. Przycisk jest bez stylu, ponieważ wybraliśmy opcję użycia stylów motywu dla przycisku zamiast domyślnego niebieskiego przycisku. Tekst trybu testowego ma po prostu przypominać, że nie korzystasz z formularza płatności na żywo. Tekst trybu testowego oczywiście zniknie po użyciu aktywnych kluczy API.

Następnie kontynuuj ten sam proces kopiowania i wklejania pozostałych dwóch krótkich kodów formularza płatności w pozostałych dwóch tabelach cenowych.

Przetestuj jeden z przycisków, aby upewnić się, że nakładka formularza płatności działa poprawnie. To powinno wyglądać tak…

Niestety ta wersja wtyczki nie pozwala na dostosowanie nakładki formularza płatności poza domyślny styl, który widzisz. Ale funkcjonalność jest dostępna i w wielu przypadkach nie będziesz potrzebować dodatkowej stylizacji. Możesz jednak stylizować te przyciski!

Stylizowanie przycisków płatności Stripe, aby pasowały do ​​układu

Aby stylizować przyciski płatności Stripe, dodamy niestandardowe CSS do naszych ustawień strony. Najpierw musimy dowiedzieć się, jakiego selektora użyjemy do stylizacji przycisku. Możesz to znaleźć, korzystając z narzędzi programistycznych przeglądarki. Kliknij prawym przyciskiem myszy przycisk Stripe i wybierz „Sprawdź”. W kodzie html widać, że przycisk ma klasę css „simpay-payment-btn”.

To jest selektor, którego potrzebujemy, aby określić styl przycisku.

Jeśli chcemy dopasować styl naszych przycisków płatności Stripe do przycisków używanych w naszym gotowym układzie, możemy sprawdzić jeden z przycisków Divi, które są już stylizowane na stronie, aby uzyskać potrzebny kod CSS.

Teraz otwórz ustawienia strony i dodaj następujący niestandardowy CSS w zakładce Zaawansowane:

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

Otóż ​​to! Sprawdźmy efekt końcowy.

Dostosowywanie stron potwierdzenia płatności i nieudanych płatności

Nie zapominaj, że ponieważ wtyczka generuje potwierdzenie płatności i zawartość strony nieudanej płatności za pomocą shortcode, możesz dodać ten krótki kod do dowolnego układu Divi, a następnie użyć wbudowanych ustawień Divi, aby stylizować tekst tak, jak chcesz.

Jest to pomocne przy dopasowywaniu stylów tych stron do Twojej witryny bez konieczności uciekania się do niestandardowego CSS.

Końcowe przemyślenia

Stripe może być niezwykle wygodnym rozwiązaniem do zbierania płatności online. A dzięki wtyczce Simple Payments for WordPress możesz w kilka minut uruchomić podstawową funkcjonalność Stripe Checkout w swojej witrynie Divi. Ponadto, jeśli skorzystasz z gotowych układów Divi, możesz dodać i stylizować przyciski płatności Stripe, aby pasowały do ​​​​Twojego układu, po prostu kopiując i wklejając już utworzony kod CSS. Rezultatem jest w pełni funkcjonalne i bezpieczne narzędzie do przetwarzania płatności, które może zbierać płatności od odwiedzających bez konieczności opuszczania strony.

Zapraszam do odkrywania innych sposobów akceptowania płatności Stripe na swojej stronie WordPress.

Mam nadzieję, że ten samouczek okaże się pomocny i czekam na wiadomość od Ciebie w komentarzach.

Pozdrawiam!