วิธีเพิ่มปุ่มชำระเงินแบบเรียบง่ายลงในตารางราคาของคุณใน Divi

Stripe เป็นโซลูชันการประมวลผลการชำระเงินที่ยืดหยุ่นมากสำหรับธุรกิจออนไลน์ โดยเฉพาะอย่างยิ่งหากคุณเป็นนักพัฒนาที่เชี่ยวชาญด้านเทคโนโลยี แต่ถ้าคุณไม่ใช่นักพัฒนาและยังต้องการใช้ Stripe เพื่อขายสินค้าสองสามอย่างทางออนไลน์ มีวิธีง่ายๆ ในการทำเช่นนั้น อันที่จริง ด้วยโค้ดบางส่วน (หรือปลั๊กอินธรรมดา) คุณสามารถเพิ่มปุ่มการชำระเงิน Stripe ลงในเว็บไซต์ของคุณได้ในพริบตา

ในบทช่วยสอนนี้ ฉันจะแสดงวิธีเพิ่มปุ่มการชำระเงิน Stripe ในเว็บไซต์ Divi ของคุณโดยใช้ปลั๊กอิน Stripe Payments สำหรับ WordPress ฉันจะแสดงให้คุณเห็นถึงวิธีการจัดรูปแบบปุ่มให้เข้ากับเค้าโครง Divi ของคุณ

มาเริ่มกันเลย!

แอบมอง

นี่คือตัวอย่างปุ่มการชำระเงิน Stripe ที่เราจะสร้างขึ้นในบทช่วยสอนนี้

เริ่มต้น

สำหรับบทแนะนำการใช้งานนี้ คุณจะต้องมีสิ่งต่อไปนี้:

• ธีม Divi (ติดตั้งและใช้งานอยู่)
• บัญชีลาย
• Stripe Payments สำหรับปลั๊กอิน WordPress โดย WP Simply Pay (ติดตั้งและใช้งานอยู่)
• เราจะใช้เค้าโครงหน้าราคาผลิตภัณฑ์ดิจิทัลที่มีให้ฟรีภายใน Divi Builder

เกี่ยวกับปลั๊กอิน

Stripe Payments สำหรับ WordPress โดย WP Simply Pay เป็นปลั๊กอินที่ให้คุณเริ่มรวบรวมการชำระเงินด้วยบัตรเครดิตด้วย Stripe โดยใช้การฝังรหัสย่ออย่างง่าย จริงๆ แล้ว คุณสามารถสร้างแบบฟอร์มการชำระเงินและปุ่มการชำระเงินได้ด้วยตนเองโดยไม่ต้องใช้ปลั๊กอิน แต่เนื่องจากปลั๊กอินนี้ทำให้สิ่งต่างๆ ง่ายขึ้นและมีคุณลักษณะที่สะดวกสบายบางอย่าง (เช่น การยืนยันการชำระเงินและหน้าการชำระเงินล้มเหลว) ฉันคิดว่ามันมีประโยชน์มากกว่าในระยะยาว . ฉันจะใช้ปลั๊กอินรุ่น Lite ฟรีสำหรับบทช่วยสอนนี้ ปลั๊กอินเวอร์ชัน Pro จะช่วยให้คุณควบคุมรูปแบบแบบฟอร์มของคุณได้มากขึ้น พร้อมรองรับสิ่งต่างๆ เช่น ฟิลด์ที่กำหนดเอง จำนวนที่กำหนดเอง และคุณลักษณะการสมัครรับข้อมูล

การตั้งค่าแบบฟอร์ม Stripe ด้วย Plugin

เมื่อคุณติดตั้งและใช้งานปลั๊กอินแล้ว ให้ไปที่ Simple Pay Lite > การตั้งค่า จากนั้นภายใต้แท็บ Stripe Keys คุณจะต้องป้อนคีย์ API บัญชี Stripe เพื่อประโยชน์ของบทช่วยสอนนี้ ฉันจะใช้เฉพาะรหัสทดสอบ แต่คุณจะต้องตรวจสอบให้แน่ใจและเปิดใช้งานบัญชี Stripe ของคุณ และสร้างคีย์ API แบบใช้งานจริง หากคุณต้องการเริ่มเก็บเงินจริง

คุณสามารถค้นหาคีย์ API ของคุณได้โดยลงชื่อเข้าใช้บัญชี Stripe และคลิก Developers > API keys

คุณจะต้องคัดลอกทั้งคีย์ที่เผยแพร่ได้และคีย์ลับไปยังการตั้งค่าปลั๊กอิน

ตอนนี้ข้ามไปที่แท็บทั่วไป ที่นั่น คุณจะสามารถกำหนดหน้าการชำระเงินสำเร็จและหน้าการชำระเงินล้มเหลวได้ คุณจะสังเกตเห็นว่าปลั๊กอินได้สร้างหน้าเหล่านั้นให้คุณแล้ว แต่เนื่องจากเนื้อหาของหน้าถูกสร้างขึ้นโดยรหัสย่อ คุณสามารถเพิ่มรหัสย่อเหล่านั้นลงในโมดูล Divi บนเค้าโครง Divi เพื่อสร้างเวอร์ชันที่กำหนดเองของหน้าเหล่านั้นได้ สำหรับตอนนี้ ให้เก็บหน้าเริ่มต้นเหล่านั้นไว้และดำเนินการตั้งค่าต่อ

ตั้งค่ารูปแบบปุ่มการชำระเงินเป็น "ไม่มี (สืบทอดจากธีม)" ทั้งหมดนี้คือการนำ css ที่ใช้ในการจัดรูปแบบปุ่มแถบสีน้ำเงินเริ่มต้นออก สิ่งนี้จะทำให้สิ่งต่าง ๆ ดูสะอาดขึ้นเล็กน้อยเมื่อเราเพิ่ม CSS แบบกำหนดเองของเราเองเพื่อจัดรูปแบบปุ่มใน Divi

จากนั้นบันทึกการเปลี่ยนแปลง

ใต้แท็บยืนยันการชำระเงิน คุณสามารถใช้แท็กเทมเพลตที่มีอยู่เพื่อปรับแต่งข้อความและข้อมูลที่แสดงโดยรหัสย่อในหน้ายืนยันการชำระเงินของคุณ แต่สำหรับบทช่วยสอนนี้ ฉันจะทิ้งข้อความเริ่มต้นไว้

การสร้างแบบฟอร์มการชำระเงินแบบ Stripe

แบบฟอร์มการชำระเงินเป็นปุ่มชำระเงินจริง ๆ ที่สร้างรูปแบบการชำระเงินแบบป๊อปอัปที่อนุญาตให้ผู้ใช้ทำการซื้อโดยไม่ต้องออกจากหน้า ดังนั้น คุณจะต้องสร้างแบบฟอร์มการชำระเงินใหม่สำหรับแต่ละผลิตภัณฑ์หรือบริการที่คุณขาย ในกรณีการใช้งานนี้ เราจะสร้างรูปแบบการชำระเงินสามรูปแบบสำหรับผลิตภัณฑ์จำลองสามรายการ

ในการสร้างแบบฟอร์มการชำระเงินใหม่ ไปที่ WordPress Dashboard และไปที่ Simple Pay Lite > Add New

ตั้งชื่อแบบฟอร์มการชำระเงิน (ชื่อนี้จะไม่ปรากฏที่ส่วนหน้า)

จากนั้นในแท็บตัวเลือกการชำระเงิน ให้ป้อนจำนวนเงินแบบครั้งเดียว

ถัดไป คลิกแท็บการแสดงแบบฟอร์มในหน้า และเปลี่ยนข้อความปุ่มการชำระเงินเริ่มต้นเป็น "ซื้อเลย" (หรืออะไรก็ได้ที่คุณต้องการ) คุณยังสามารถเลือกข้อความประมวลผลปุ่มชำระเงินได้เช่นกัน

ใต้แท็บ Checkout Overlay Display ให้อัปเดตสิ่งต่อไปนี้:

ชื่อ บริษัท
รายละเอียดสินค้า
URL โลโก้/รูปภาพ
เปิดใช้งานจดจำฉัน: ใช่

ตัวเลือกเหล่านี้จะกำหนดสิ่งที่แสดงในป๊อปอัปแบบฟอร์มการชำระเงินสำหรับผลิตภัณฑ์นี้โดยเฉพาะ

เมื่อเสร็จแล้ว ตรวจสอบให้แน่ใจและเผยแพร่/อัปเดตแบบฟอร์มการชำระเงิน

ในที่สุดคุณจะต้องคัดลอกรหัสย่อแบบฟอร์มการชำระเงินที่ด้านบนขวาของหน้าแก้ไขแบบฟอร์มการชำระเงินเพื่อวางลงในเค้าโครงหน้า Divi ของคุณ

แต่สำหรับตอนนี้ คุณสามารถดำเนินการตามขั้นตอนเดิมต่อไปเพื่อสร้างแบบฟอร์มการชำระเงินเพิ่มเติมสองแบบ โดยแต่ละแบบมีคำอธิบายรายการ โลโก้/รูปภาพ และจำนวนเงินของตัวเอง

เมื่อสร้างแบบฟอร์มการชำระเงินทั้งหมดแล้ว คุณสามารถไปที่แบบฟอร์มการชำระเงินได้โดยไปที่ Simple Pay Lite > แบบฟอร์มการชำระเงิน คุณจะสามารถเข้าถึงรหัสย่อได้อย่างง่ายดาย

การเพิ่มปุ่มการชำระเงินแบบ Stripe ให้กับเค้าโครงหน้า Divi ของคุณ

เมื่อไม่มีรหัสย่อแบบฟอร์มการชำระเงินพร้อมใช้ ตอนนี้เราจำเป็นต้องสร้างเค้าโครงหน้า Divi ของเราและทำงาน ในการดำเนินการนี้ ให้สร้างเพจใหม่ ตั้งชื่อเพจของคุณ แล้วคลิกเพื่อใช้ Divi Builder

จากนั้นเลือกตัวเลือก “Choose a Premade Layout”

เปิดแพ็ค Digital Product Layout และคลิกเพื่อใช้หน้า Digital Product Pricing

เมื่อโหลดเลย์เอาต์ไปที่เพจแล้ว ให้เผยแพร่เพจแล้วคลิกเพื่อสร้างที่ส่วนหน้า

ในแท็บแยกต่างหาก ให้กลับไปที่หน้าแบบฟอร์มการชำระเงินแล้วหยิบรหัสย่อที่คุณต้องการเพิ่มลงในตารางราคา

จากนั้นกลับไปที่เค้าโครงหน้าการกำหนดราคาของคุณ และเปิดการตั้งค่าตารางราคาสำหรับตารางราคาในเค้าโครง

นำข้อความปุ่มออก (คุณไม่จำเป็นต้องใช้เพราะรหัสย่อจะทำหน้าที่เป็นปุ่ม) แล้ววางรหัสย่อใต้เนื้อหาในกล่องเนื้อหา

คุณจะเห็นปุ่มที่ไม่มีสไตล์พร้อมข้อความ "โหมดทดสอบ" ที่ไฮไลต์อยู่ใต้ปุ่ม ปุ่มที่ไม่มีสไตล์เนื่องจากเราเลือกตัวเลือกเพื่อใช้รูปแบบธีมสำหรับปุ่มแทนปุ่มสีน้ำเงินเริ่มต้น ข้อความโหมดทดสอบมีไว้เพื่อเตือนคุณว่าคุณไม่ได้ใช้แบบฟอร์มการชำระเงินแบบสด ข้อความในโหมดทดสอบจะหายไปอย่างเห็นได้ชัดเมื่อใช้คีย์ API แบบสด

ถัดไป ดำเนินการตามขั้นตอนเดิมในการคัดลอกและวางรหัสย่อของแบบฟอร์มการชำระเงินอีกสองรายการในตารางราคาที่เหลืออีกสองตาราง

ทดสอบปุ่มใดปุ่มหนึ่งเพื่อให้แน่ใจว่าการวางซ้อนแบบฟอร์มการชำระเงินทำงานอย่างถูกต้อง ควรมีลักษณะเช่นนี้ ...

ขออภัย ปลั๊กอินรุ่นนี้ไม่อนุญาตให้คุณปรับแต่งการวางซ้อนแบบฟอร์มการชำระเงินนอกเหนือจากรูปแบบเริ่มต้นที่คุณเห็น แต่ฟังก์ชันการทำงานมีอยู่ และในหลายกรณี คุณไม่จำเป็นต้องมีรูปแบบพิเศษนั้น อย่างไรก็ตาม คุณสามารถจัดสไตล์ปุ่มเหล่านั้นได้!

การจัดรูปแบบปุ่มการชำระเงินแบบ Stripe ให้เข้ากับเลย์เอาต์

ในการจัดรูปแบบปุ่มการชำระเงิน Stripe เราจะเพิ่ม CSS ที่กำหนดเองลงในการตั้งค่าหน้าเว็บของเรา อันดับแรก เราต้องหาว่าตัวเลือกใดที่เราจะใช้เพื่อจัดรูปแบบปุ่ม คุณสามารถค้นหาได้โดยใช้เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ของคุณ คลิกขวาที่ปุ่ม Stripe แล้วเลือก "ตรวจสอบ" ในโค้ด html คุณจะเห็นว่าปุ่มมีคลาส css “simpay-payment-btn”

นี่คือตัวเลือกที่เราต้องกำหนดเป้​​าหมายรูปแบบของปุ่ม

หากเราต้องการจับคู่สไตล์ของปุ่มชำระเงิน Stripe กับปุ่มที่ใช้ในเลย์เอาต์ที่สร้างไว้ล่วงหน้า เราสามารถตรวจสอบปุ่ม Divi ปุ่มใดปุ่มหนึ่งที่มีรูปแบบอยู่แล้วบนหน้าเว็บเพื่อรับโค้ด CSS ที่เราต้องการ

ตอนนี้เปิดการตั้งค่าหน้าและเพิ่ม CSS ที่กำหนดเองต่อไปนี้ภายใต้แท็บขั้นสูง:

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

แค่นั้นแหละ! มาดูผลสุดท้ายกัน

การปรับแต่งหน้ายืนยันการชำระเงินและการชำระเงินของคุณล้มเหลว

อย่าลืมว่าเนื่องจากปลั๊กอินสร้างการยืนยันการชำระเงินและเนื้อหาของหน้าการชำระเงินล้มเหลวโดยใช้รหัสย่อ คุณสามารถเพิ่มรหัสย่อนั้นไปยังเลย์เอาต์ Divi ใดก็ได้ จากนั้นใช้การตั้งค่าในตัวของ Divi เพื่อจัดรูปแบบข้อความตามที่คุณต้องการ

ซึ่งจะเป็นประโยชน์สำหรับการจับคู่สไตล์ของหน้าเหล่านี้กับเว็บไซต์ของคุณโดยไม่ต้องใช้ CSS ที่กำหนดเอง

ความคิดสุดท้าย

Stripe สามารถเป็นโซลูชันที่สะดวกอย่างยิ่งในการรวบรวมการชำระเงินออนไลน์ และด้วยปลั๊กอิน Simple Payments สำหรับ WordPress คุณสามารถเรียกใช้ฟังก์ชัน Stripe Checkout พื้นฐานและทำงานบนไซต์ Divi ของคุณได้ภายในไม่กี่นาที นอกจากนี้ หากคุณใช้ประโยชน์จากเลย์เอาต์ที่สร้างไว้ล่วงหน้าของ Divi คุณสามารถเพิ่มและจัดรูปแบบปุ่มการชำระเงิน Stripe ของคุณให้เข้ากับเลย์เอาต์ของคุณได้ง่ายๆ โดยการคัดลอกและวางโค้ด CSS ที่สร้างไว้แล้วสำหรับคุณ ผลลัพธ์ที่ได้คือเครื่องมือประมวลผลการชำระเงินที่ทำงานได้อย่างสมบูรณ์และปลอดภัยซึ่งสามารถเรียกเก็บเงินจากผู้เยี่ยมชมโดยที่พวกเขาไม่ต้องออกจากหน้า

อย่าลังเลที่จะสำรวจวิธีเพิ่มเติมในการรับชำระเงิน Stripe บนเว็บไซต์ WordPress ของคุณ

ฉันหวังว่าคุณจะพบว่าบทช่วยสอนนี้มีประโยชน์ และเราหวังว่าจะได้รับการติดต่อจากคุณในความคิดเห็น

ไชโย!