Divi'de Fiyatlandırma Tablolarınıza Basit Şerit Ödeme Düğmeleri Nasıl Eklenir

Stripe, özellikle teknoloji konusunda bilgili bir geliştiriciyseniz, çevrimiçi işletmeler için son derece esnek bir ödeme işleme çözümüdür. Ancak, geliştirici değilseniz ve yine de birkaç ürünü çevrimiçi satmak için Stripe'i kullanmak istiyorsanız, bunu yapmanın basit yolları vardır. Aslında, birkaç kod parçacığıyla (veya basit bir eklentiyle), web sitenize bir anda Stripe ödeme düğmeleri ekleyebilirsiniz.

Bu eğitimde, Stripe Payments for WordPress Plugin kullanarak Divi web sitenize Stripe ödeme düğmelerini nasıl ekleyeceğinizi göstereceğim. Düğmelerinizi Divi düzeninize uyacak şekilde nasıl şekillendireceğinizi bile göstereceğim.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız Stripe ödeme düğmelerine bir göz atın.

Başlarken

Bu kullanım örneği öğreticisi için aşağıdakilere ihtiyacınız olacak:

• Divi Teması (yüklü ve etkin)
• Çizgili Hesap
• WP Simply Pay tarafından WordPress Eklentisi için Şerit Ödemeleri (yüklü ve etkin)
• Divi Builder'da ÜCRETSİZ olarak sunulan Dijital Ürünler Fiyatlandırma Sayfası Düzenini de kullanacağız.

Eklenti Hakkında

WP Simply Pay tarafından WordPress için Stripe Payments, basit bir kısa kod yerleştirme kullanarak Stripe ile kredi kartı ödemesi toplamaya başlamanıza izin veren bir eklentidir. Aslında eklenti kullanmadan manuel olarak ödeme formları ve ödeme düğmeleri oluşturabilirsiniz, ancak bu eklenti işleri kolaylaştırdığından ve birkaç kullanışlı özellik sunduğundan (ödeme onayı ve ödeme hatası sayfaları gibi), uzun vadede daha yararlı olduğunu düşündüm. . Bu eğitim için eklentinin ÜCRETSİZ Lite sürümünü kullanacağım. Eklentinin profesyonel sürümü, özel alanlar, özel tutarlar ve abonelik özellikleri gibi şeyler için desteğin yanı sıra formlarınızın stili üzerinde daha fazla kontrol sahibi olmanızı sağlar.

Eklenti ile Stripe formlarını ayarlama

Eklentiyi yükledikten ve etkinleştirdikten sonra Simple Pay Lite > Ayarlar'a gidin . Ardından Stripe Keys sekmesi altında Stripe hesabı API anahtarlarınızı girmeniz gerekecektir. Bu öğretici uğruna, yalnızca test anahtarlarını kullanacağım, ancak gerçek para toplamaya başlamak istiyorsanız Stripe hesabınızı etkinleştirmeniz ve bazı canlı API anahtarları oluşturmanız gerekecek.

API anahtarlarınızı, Stripe hesabınızda oturum açıp Geliştiriciler > API anahtarları öğesini tıklayarak bulabilirsiniz.

Hem Yayınlanabilir anahtarı hem de Gizli anahtarı eklenti ayarlarına kopyalamanız gerekecek.

Şimdi genel sekmeye atlayın. Orada bir Ödeme Başarılı Sayfası ve bir Ödeme Hatası Sayfası belirleyebilirsiniz. Eklentinin bu sayfaları sizin için zaten oluşturduğunu fark edeceksiniz. Ancak sayfa içeriği bir kısa kod tarafından oluşturulduğundan, bu sayfaların özel sürümlerini oluşturmak için bu kısa kodları herhangi bir Divi düzenindeki herhangi bir Divi modülüne ekleyebilirsiniz. Şimdilik bu varsayılan sayfaları yerinde tutun ve kuruluma devam edin.

Ödeme düğmesi stilini "yok (temadan devral)" olarak ayarlayın. Tüm bunlar, varsayılan mavi şerit düğmesini biçimlendirmek için kullanılan css'yi çıkarmaktır. Bu, Divi'deki düğmeyi stilize etmek için kendi özel CSS'mizi eklediğimizde işleri biraz daha temiz hale getirecek.

Ardından değişiklikleri kaydedin.

Ödeme onayı sekmesi altında, ödeme onayı sayfanızda kısa kod tarafından görüntülenen mesajı ve bilgileri özelleştirmek için mevcut şablon etiketlerini kullanabilirsiniz. Ancak bu eğitim için varsayılan mesajı bırakacağım.

Şerit Ödeme Formları Oluşturma

Ödeme formları, kullanıcıların sayfadan hiç ayrılmadan bir satın alma işlemini tamamlamalarına olanak tanıyan bir açılır ödeme formu oluşturan gerçekten Stripe ödeme düğmeleridir. Bu nedenle sattığınız her ürün veya hizmet için yeni bir ödeme formu oluşturmanız gerekecektir. Bu kullanım örneğinde, üç adet sahte ürün için üç adet ödeme formu oluşturacağız.

Yeni bir ödeme formu oluşturmak için WordPress Kontrol Paneli'ne gidin ve Simple Pay Lite > Yeni Ekle'ye gidin.

Ödeme Formu'na bir başlık verin (bu başlık ön uçta gösterilmeyecektir).

Ardından Ödeme Seçenekleri sekmesi altında Bir Kerelik Tutar girin.

Ardından, Sayfada Form Görüntüleme sekmesine tıklayın ve varsayılan Ödeme Düğmesi Metnini "Şimdi Satın Al" (veya ne isterseniz) olarak değiştirin. Ayrıca ödeme düğmesi işleme metnini de seçebilirsiniz.

Checkout Overlay Display sekmesi altında aşağıdakileri güncelleyin:

Şirket Adı
Ürün Açıklaması
Logo/Resim URL'si
Beni Hatırla'yı Etkinleştir: EVET

Bu seçenekler, bu belirli ürün için ödeme formu açılır penceresinde ne gösterileceğini belirler.

İşiniz bittiğinde, emin olun ve ödeme formunu yayınlayın/güncelleyin.

Sonunda, Ödeme Formunu Düzenle sayfasının sağ üst köşesinde bulunan Ödeme Formu Kısa Kodunu Divi sayfa düzeninize yapıştırmak için kopyalamanız gerekecektir.

Ancak şimdilik, her biri kendi ürün açıklaması, logosu/resmi ve tutarı olan iki ödeme formu daha oluşturmak için aynı işleme devam edebilirsiniz.

Tüm ödeme formlarınız oluşturulduktan sonra Simple Pay Lite > Ödeme Formları'na giderek ödeme formlarınızı ziyaret edebilirsiniz. Orada kısa kodlara kolayca erişebileceksiniz.

Divi Sayfa Düzeninize Şeritli Ödeme Düğmeleri Ekleme

Şeritli ödeme formu kısa kodları kullanıma hazır olduğundan, şimdi Divi sayfa düzenimizi hazır ve çalışır hale getirmemiz gerekiyor. Bunu yapmak için yeni bir sayfa oluşturun, sayfanıza bir başlık verin ve Divi Builder'ı kullanmak için tıklayın.

Ardından “Hazır Düzen Seçin” seçeneğini seçin.

Dijital Ürün Düzeni paketini açın ve Dijital Ürün Fiyatlandırma sayfasını kullanmak için tıklayın.

Düzen sayfaya yüklendikten sonra sayfayı yayınlayın ve ardından ön uçta oluşturmak için tıklayın.

Ayrı bir sekmede, ödeme formları sayfasına geri dönün ve fiyatlandırma tablosuna eklemek istediğiniz kısa kodu alın.

Ardından, fiyatlandırma sayfası düzeninize geri dönün ve düzendeki fiyatlandırma tablolarından biri için fiyatlandırma tablosu ayarlarını açın.

Düğme metnini çıkarın (kısa kod düğme işlevi göreceğinden buna ihtiyacınız yoktur) ve ardından kısa kodu içerik kutusundaki içeriğin altına yapıştırın.

Düğmenin altında vurgulanmış "test modu" metniyle birlikte stilsiz bir düğme göreceksiniz. Düğme, varsayılan mavi düğme yerine düğme için tema stillerini kullanma seçeneğini belirlediğimiz için stilsiz. Test modu metni, canlı bir şeritli ödeme formu kullanmadığınızı hatırlatmak için oradadır. Canlı API anahtarları kullanıldığında test modu metni açıkça kaybolacaktır.

Ardından, diğer iki ödeme formu kısa kodunu kopyalayıp kalan iki fiyatlandırma tablosuna yapıştırma işlemine devam edin.

Ödeme formu yerleşiminin düzgün çalıştığından emin olmak için düğmelerden birini test edin. Böyle görünmeli…

Ne yazık ki, eklentinin bu sürümü, gördüğünüz varsayılan stilin ötesinde ödeme formu yerleşimini özelleştirmenize izin vermiyor. Ancak işlevsellik orada ve çoğu durumda bu ekstra stile ihtiyacınız olmayacak. Ancak, bu düğmeleri şekillendirebilirsiniz!

Çizgili Ödeme Düğmelerini Düzene Uygun Şekilde Şekillendirme

Stripe ödeme düğmelerine stil vermek için sayfa ayarlarımıza bazı özel CSS ekleyeceğiz. İlk olarak, butona stil vermek için hangi seçiciyi kullanacağımızı bulmamız gerekiyor. Bunu, tarayıcınızın geliştirici araçlarını kullanarak bulabilirsiniz. Şerit düğmesine sağ tıklayın ve "İncele" yi seçin. Html kodunda butonun css sınıfı “simpay-payment-btn” olduğunu görebilirsiniz.

Bu, düğmenin stilini hedeflememiz gereken seçicidir.

Stripe ödeme butonlarımızın stilini önceden hazırlanmış düzenimizde kullanılan butonlarla eşleştirmek istiyorsak, ihtiyacımız olan CSS kodunu almak için sayfada önceden stillendirilmiş Divi butonlarından birini inceleyebiliriz.

Şimdi sayfa ayarlarını açın ve Gelişmiş sekmesinin altına aşağıdaki Özel CSS'yi ekleyin:

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

Bu kadar! Nihai sonucu kontrol edelim.

Ödeme Onayınızı ve Ödeme Başarısız Sayfalarınızı Özelleştirme

Eklenti, ödeme onayınızı ve ödeme başarısız sayfa içeriğini bir kısa kod kullanarak oluşturduğundan, bu kısa kodu herhangi bir Divi düzenine ekleyebilir ve ardından metni istediğiniz gibi biçimlendirmek için Divi'nin yerleşik ayarlarını kullanabilirsiniz.

Bu, özel CSS'ye başvurmak zorunda kalmadan bu sayfaların stillerini web sitenizle eşleştirmek için yararlıdır.

Son düşünceler

Stripe, çevrimiçi ödemeleri tahsil etmek için son derece uygun bir çözüm olabilir. Ayrıca, Simple Payments for WordPress eklentisi ile Divi sitenizde temel Stripe Checkout işlevini dakikalar içinde çalışır hale getirebilirsiniz. Ayrıca, Divi'nin önceden hazırlanmış düzenlerinden yararlanırsanız, sizin için önceden oluşturulmuş CSS kodunu kopyalayıp yapıştırarak Stripe ödeme düğmelerinizi düzeninize uyacak şekilde ekleyebilir ve biçimlendirebilirsiniz. Sonuç, ziyaretçilerden sayfadan ayrılmak zorunda kalmadan ödeme alabilen, tamamen işlevsel ve güvenli bir ödeme işleme aracıdır.

WordPress web sitenizde Stripe ödemelerini kabul etmenin daha fazla yolunu keşfetmekten çekinmeyin.

Umarım bu öğreticiyi faydalı bulursunuz ve yorumlarda sizden haber almak için sabırsızlanıyorum.

Şerefe!