วิธีสร้างหน้า Landing Page ด้วย Payment Gateway

เผยแพร่แล้ว: 2022-11-24

คุณต้องการสร้างหน้า Landing Page ด้วยฟังก์ชันเกตเวย์การชำระเงินหรือไม่?

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

ในบทความนี้ เราจะอธิบายวิธีการสร้างหน้า Landing Page ด้วยเกตเวย์การชำระเงินทีละขั้นตอน

เหตุใดหน้า Landing Page ของคุณจึงต้องการเกตเวย์การชำระเงิน

หน้า Landing Page เป็นวิธีที่มีประสิทธิภาพในการแปลงผู้เยี่ยมชมเว็บไซต์ให้เป็นโอกาสในการขายและการขาย เนื่องจากมีสิ่งรบกวนน้อยกว่าหน้าแรกและหน้าอื่นๆ บนไซต์ของคุณ ผู้ใช้จึงมีแนวโน้มที่จะเข้าร่วมรายการอีเมลหรือซื้อผลิตภัณฑ์หรือบริการของคุณ

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

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

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

คุณจะสร้างหน้า Landing Page ด้วยการรวมเกตเวย์การชำระเงินได้อย่างไร ทำตาม 2 วิธีด้านล่างเพื่อเรียนรู้วิธี

  • การสร้างหน้า Landing Page ด้วย Payment Gateway โดยใช้ SeedProd
    • การเพิ่มเกตเวย์การชำระเงินไปยังหน้า Landing Page ด้วย WP Simple Pay

      การสร้างหน้า Landing Page ด้วย Payment Gateway โดยใช้ SeedProd

      ก่อนอื่น เราจะแสดงวิธีสร้างหน้า Landing Page และเพิ่มการรวมการชำระเงินด้วย SeedProd

      SeedProd WordPress website builder

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

      คุณสามารถใช้ SeedProd เพื่อสร้างสิ่งต่อไปนี้:

      • หน้า Landing Page การขายที่มีการแปลงสูง
      • การออกแบบเว็บไซต์ WordPress ทั้งหมด
      • สร้างเว็บไซต์ WooCommerce ให้สมบูรณ์ด้วยหน้าชำระเงิน หน้าผลิตภัณฑ์ และอื่นๆ
      • ส่วนหัว ส่วนท้าย แถบด้านข้าง และเทมเพลตเพจแบบกำหนดเอง

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

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

      หนึ่งในองค์ประกอบที่เราจะใช้ในวิธีนี้คือการบล็อกปุ่มการชำระเงินของ SeedProd ช่วยให้คุณรับเงินจากผู้เยี่ยมชมหน้า Landing Page โดยใช้ Stripe ตั้งค่าได้ง่ายและรวดเร็วและไม่ต้องเข้ารหัสใดๆ

      ดังนั้นทำตามขั้นตอนด้านล่างเพื่อสร้างหน้า Landing Page ด้วยเกตเวย์การชำระเงิน Stripe

      ขั้นตอนที่ 1 ติดตั้งและเปิดใช้งาน SeedProd

      ขั้นตอนแรกคือไปที่หน้าราคา SeedProd และเลือกแผน สำหรับคำแนะนำนี้ เราจะใช้ SeedProd Pro สำหรับคุณลักษณะขั้นสูง แต่คุณสามารถใช้ปุ่มชำระเงินแบบ Stripe กับแผนใดก็ได้ รวมถึงการทดลองใช้ SeedProd ฟรีแบบไม่จำกัด

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

      Find your SeedProd license key

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

      เมื่อคุณทำเสร็จแล้ว ไปที่หน้า SeedProd » การตั้งค่า และวางรหัสใบอนุญาตของคุณ

      enter your license key

      ดำเนินการต่อและคลิกปุ่ม ยืนยันรหัส เพื่อจัดเก็บการตั้งค่าใบอนุญาตของคุณ

      ขั้นตอนที่ 2 เลือกเทมเพลตหน้า Landing Page

      ขั้นตอนต่อไปคือการเลือกการออกแบบเทมเพลตสำหรับหน้า Landing Page ของคุณ ในการทำเช่นนั้น คุณสามารถไปที่ SeedProd » Landing Pages และคลิกที่ปุ่ม เพิ่ม Landing Page ใหม่

      Add new landing page

      ในหน้าจอต่อไปนี้ คุณจะเห็นไลบรารีของเทมเพลตหน้า Landing Page ที่ออกแบบอย่างมืออาชีพ

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

      sales page templates

      เมื่อคุณพบการออกแบบที่คุณต้องการ ให้คลิกไอคอนเครื่องหมายถูก

      Choose a landing page template

      หลังจากนั้น ป๊อปอัปจะเปิดขึ้นเพื่อขอให้คุณป้อนชื่อเพจและ URL ไม่ต้องกังวลหากคุณคิดชื่อที่ดีไม่ออก เราจะแสดงวิธีแก้ไขในภายหลัง

      Enter your landing page name

      ตอนนี้ไปข้างหน้าและคลิกที่ปุ่ม บันทึกและเริ่มแก้ไขหน้า

      ขั้นตอนที่ 3 เพิ่มบล็อกปุ่มชำระเงิน

      ในหน้าจอถัดไป คุณจะเห็นเลย์เอาต์ที่คล้ายกับตัวอย่างด้านล่าง:

      SeedProd landing page builder

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

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

      landing page headline settings

      แผงการตั้งค่าจะเปิดขึ้นทางด้านซ้ายด้วย ซึ่งคุณสามารถเข้าถึงการตั้งค่าขั้นสูงเพื่อปรับแต่งแบบอักษร สี ระยะห่าง HTML และอื่นๆ

      ดังที่คุณเห็นในตัวอย่างนี้ คุณยังสามารถแก้ไขส่วนต่างๆ เพื่อเปลี่ยนภาพพื้นหลังได้อย่างง่ายดาย เพียงคลิกที่องค์ประกอบและปรับแต่งให้มีลักษณะตรงตามที่คุณต้องการ

      Section background settings

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

      SeedProd payment button

      หลังจากนั้น การตั้งค่าบล็อกจะเปิดขึ้น ซึ่งคุณสามารถคลิกปุ่ม เชื่อมต่อกับ Stripe เพื่อเชื่อมโยงบัญชี Stripe ของคุณ

      Connect with Stripe

      คุณจะไปที่หน้าจอเข้าสู่ระบบ Stripe โดยอัตโนมัติ ซึ่งคุณสามารถป้อนรหัสยืนยันได้ แต่คุณจะกลับไปที่การออกแบบหน้า Landing Page ทันทีเมื่อการเชื่อมต่อเสร็จสมบูรณ์

      Verify SeedProd connection to Stripe

      เมื่อคุณอนุญาตการเชื่อมต่อ Stripe แล้ว คุณสามารถปรับแต่งการตั้งค่าปุ่มชำระเงินได้

      ตัวอย่างเช่น คุณสามารถแก้ไขการตั้งค่าต่อไปนี้:

      • ยอดชำระ
      • คำอธิบายการชำระเงิน
      • สกุลเงินการชำระเงิน
      • URL ที่สำเร็จ
      Payment button settings

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

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

      ต้องการตัวเลือกการปรับแต่งเพิ่มเติมหรือไม่ เพียงคลิกแท็บ ขั้นสูง เพื่อค้นหารูปแบบปุ่ม สี แบบอักษร ระยะห่าง การตั้งค่าระยะขอบ และอื่นๆ

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

      อย่าลืมกดปุ่ม บันทึก ที่มุมบนขวาเพื่อบันทึกการเปลี่ยนแปลงของคุณ

      Save changes to your landing page with payment gateway

      ขั้นตอนที่ 4 กำหนดการตั้งค่าของคุณ

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

      ในการตั้งค่า ทั่วไป คุณสามารถแก้ไขชื่อและ URL ของหน้า Landing Page เผยแพร่หน้าของคุณ และแสดงลิงก์พันธมิตร SeedProd ของคุณได้

      General landing page settings

      หากคุณมีปลั๊กอิน WordPress SEO เช่น All in One SEO ติดตั้งอยู่ คุณสามารถคลิกแท็บ SEO เพื่อเข้าสู่การตั้งค่าการปรับแต่งโปรแกรมค้นหาของคุณ

      Landing page SEO settings

      การตั้งค่าอื่นๆ ที่คุณสามารถเข้าถึงได้มีดังนี้:

      • ติดตามประสิทธิภาพของหน้า Landing Page ด้วย MonsterInsights ปลั๊กอิน Google Analytics ที่มีประสิทธิภาพสำหรับ WordPress
      • เพิ่มสคริปต์ที่กำหนดเองในส่วนหัว เนื้อหา และส่วนท้ายของหน้าเว็บเพื่อติดตามและกำหนดเป้าหมายใหม่
      • ตั้งชื่อโดเมนแบบกำหนดเองให้กับหน้า Landing Page ของคุณแยกต่างหากจากเว็บไซต์ของคุณ (เฉพาะแผน Elite)

      คุณยังสามารถคลิกแท็บ เชื่อมต่อ ที่ด้านบนของเพจเพื่อเชื่อมโยงแลนดิ้งเพจของคุณกับบริการการตลาดผ่านอีเมล, Google Analytics, การป้องกันสแปม และ Zapier

      SeedProd email integrations

      ขั้นตอนที่ 5 เผยแพร่หน้า Landing Page ของคุณ

      เมื่อคุณพร้อมเผยแพร่หน้า Landing Page ให้คลิกปุ่ม บันทึก แล้วเลือกตัวเลือก เผยแพร่

      Publish your landing page

      ตอนนี้เมื่อผู้เยี่ยมชมคลิกปุ่มชำระเงินของคุณ พวกเขาจะสามารถชำระเงินได้โดยใช้ Stripe

      Landing page with payment gateway example

      การเพิ่มเกตเวย์การชำระเงินไปยังหน้า Landing Page ด้วย WP Simple Pay

      อีกวิธีในการสร้างแลนดิ้งเพจด้วยเกตเวย์การชำระเงินคือการใช้ปลั๊กอินการชำระเงินของ WordPress

      WP Simple Pay Homepage

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

      ดังนั้น หากคุณไม่ต้องการสร้างหน้า Landing Page ที่มีการแปลงสูงและต้องการตัวเลือกที่ตรงไปตรงมามากกว่านี้ WP Simple pay เป็นตัวเลือกที่ยอดเยี่ยม

      หมายเหตุ: เพื่อรับการชำระเงินโดยใช้ WP Simple Pay; คุณต้องมีใบรับรอง SSL ที่ใช้งานอยู่ นี่คือคำแนะนำในการเพิ่ม SSL ใน WordPress หากคุณต้องการความช่วยเหลือ

      ขั้นตอนที่ 1 ติดตั้งและเปิดใช้งาน WP Simple Pay

      ขั้นตอนแรกคือรับสำเนา WP Simple Pay จากเว็บไซต์ของพวกเขา จากนั้น ดำเนินการต่อและติดตั้งและเปิดใช้งานปลั๊กอินบนเว็บไซต์ของคุณ

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

      WP Simple Pay setup wizard

      ในการเริ่มตัวช่วยสร้างการตั้งค่า ให้คลิกปุ่ม เริ่ม กันเลย

      ขั้นตอนที่ 2 ทำวิซาร์ดการตั้งค่าให้เสร็จสมบูรณ์

      ขั้นตอนการตั้งค่ามี 4 ขั้นตอน ขั้นแรก ระบบจะขอให้คุณป้อนรหัสใบอนุญาต WP Simple Pay ซึ่งคุณจะพบได้ในแดชบอร์ดบัญชีของคุณในส่วนการดาวน์โหลด

      Activate WP Simple Pay license key

      ป้อนรหัสใบอนุญาตของคุณ จากนั้นคลิกปุ่ม เปิดใช้งานและดำเนิน การต่อ

      ในหน้าจอถัดไป คุณจะต้องเชื่อมต่อกับบัญชี Stripe ของคุณ ดังนั้นให้คลิกปุ่ม เชื่อมต่อกับ Stripe

      Connect to Stripe with WP Simple Pay

      ตอนนี้ คุณจะต้องลงชื่อเข้าใช้บัญชี Stripe ของคุณและยืนยันการเชื่อมต่อ

      Connect WP Simple Pay to Stripe

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

      ตัวอย่างเช่น คุณสามารถส่งใบเสร็จการชำระเงิน การแจ้งเตือนการชำระเงิน ใบเสร็จใบแจ้งหนี้ และใบแจ้งหนี้ที่กำลังจะมาถึง

      WP Simple Pay email settings

      หลังจากเลือกการแจ้งเตือนทางอีเมลแล้ว ให้คลิกปุ่ม บันทึกและดำเนิน การต่อ

      Setup wizard complete. Create a Payment form.

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

      ขั้นตอนที่ 3 สร้างแบบฟอร์มการชำระเงิน

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

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

      WP Simple Pay templates

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

      General payment button settings

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

      Payment button price options

      คุณยังสามารถเลือกวิธีการชำระเงินได้หลายวิธี เช่น บัตรเครดิต การหักบัญชีธนาคาร Alipay Klarna และ Clearpay

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

      ขั้นตอนที่ 4 เพิ่มปุ่มชำระเงินในหน้า Landing Page ของคุณ

      ขั้นตอนต่อไปคือการเพิ่มปุ่มชำระเงินในหน้า Landing Page ของคุณ คุณสามารถเพิ่มได้ทุกที่บนเพจของคุณด้วยบล็อก WP Simple Pay WordPress

      ในการดำเนินการนี้ ให้สร้างหรือแก้ไขหน้า WordPress จากนั้นในตัวแก้ไขเนื้อหา คลิกปุ่มบวก และเลือกบล็อก WP Simple Pay

      WP Simple Pay WordPress block

      จากนั้น คุณสามารถเลือกปุ่มชำระเงินจากเมนูแบบเลื่อนลง

      Select WP Simple Pay payment form

      หลังจากอัปเดตหรือเผยแพร่หน้า Landing Page แล้ว คุณสามารถดูตัวอย่างการทำงานของปุ่มชำระเงินและเกตเวย์ได้

      landing page with payment gateway example

      แค่นั้นแหละ!

      ตอนนี้คุณรู้วิธีสร้างหน้า Landing Page ด้วยฟังก์ชันเกตเวย์การชำระเงินแล้ว

      หากคุณสนใจที่จะสร้างร้านค้าอีคอมเมิร์ซทั้งหมด ต่อไปนี้คือบทช่วยสอนบางส่วนที่อาจช่วยได้:

      • วิธีเพิ่มปุ่ม Add-to-Cart แบบกำหนดเองใน WooCommerce
      • วิธีแสดงหมวดหมู่สินค้าและแท็กใน WooCommerce
      • วิธีปรับแต่งหน้าร้านค้า WooCommerce ของคุณอย่างง่ายดาย

      ขอบคุณที่อ่าน. โปรดติดตามเราบน YouTube, Twitter และ Facebook สำหรับเนื้อหาที่เป็นประโยชน์เพิ่มเติมในการขยายธุรกิจของคุณ