如何在WordPress中添加Stripe QR代碼付款

已發表: 2025-01-28
how to add stripe qr code payment in wordpress

您是否想在WordPress網站上添加QR碼付款選項?

QR付款方式允許用戶在手機上掃描和訪問您的付款鏈接。這使他們更簡單,更容易結帳過程。

但是,有很多方法可以允許用戶按QR碼付款。最重要的是,您可以與QR碼集成許多付款網關。

例如,您可以使用QR碼生成器或QRSTUFF等平台手動向您的網站中添加付款QR碼。但這需要長時間的設置過程。

您需要將信息輸入QR碼,例如付款鏈接,網站URL和聯繫方式。您還需要從網站分開自定義QR碼,並將其作為圖像下載。

最後,它可以看不待並有功能衝突。

最重要的是,手動生成的QR碼是靜態的,這意味著任何更新都需要再生並替換網站上的圖像。

這就是為什麼我們建議您使用WPForms來幫助您創建QR碼付款選項。

首先,使用WPForms,您可以根據表單輸入(例如用戶詳細信息,付款金額或事件註冊)動態生成QR碼。這樣可以確保QR碼始終是相關和個性化的,而無需手動干預。

您還可以使用Visual Builder快速將QR碼和您的付款鏈接添加到任何表單或頁面,從而節省時間。

最好的部分是WPForms與PayPal和Stripe等付款網關集成,使生成的QR碼容易鏈接到付款頁面。

現在,我們已經選擇了一種創建付款QR碼的工具,下一個問題是,哪種網關最適合設置QR付款代碼?

在這裡,您的優先事項應該是找到安全,可擴展且用戶友好的付款網關。您還應該找到支持許多貨幣的一種,使您可以訪問全球受眾。

由於這些原因,我們選擇了條紋。

Stripe允許您生成鏈接到實時付款頁面的動態QR碼。您可以使用品牌,徽標和顏色自定義鏈接到QR碼的付款頁面。

Stripe支持各種付款方式,包括信用卡/借記卡,Apple Pay和Google Pay等移動錢包以及本地支付系統。

結果,單個QR碼可以將用戶引向付款頁面,在那裡他們選擇自己的首選方法。

以下是條紋是一個很棒的QR碼支付網關的其他原因。

  • 一鍵式付款:客戶可以使用保存的付款方式掃描QR碼並在幾秒鐘內完成付款
  • 動態付款金額:條紋允許您創建與動態計算的付款金額相關的QR碼。
  • Easy Integration with Websites: Stripe provides simple API integrations and plugins for platforms like WordPress.
  • 實時更新: Stripe的儀表板跟踪通過QR碼進行的付款。您可以立即監視交易。
  • 安全交易:通過Stripe QR碼的付款通過高級加密和欺詐檢測機制進行安全處理。

如您所見,Stripe和WPForms的組合是通過QR碼接收付款的好方法。

這樣一來,讓我們逐步向您展示如何在WordPress中設置QR碼付款。

以下是我們將在本教程中創建的Stripe QR碼付款的示例:

qr code payment example

從此開始,讓我們開始。

如何在WordPress中添加Stripe QR代碼付款

如前所述,我們需要兩個工具來在WordPress中設置QR付款:WPFORMS和Stripe。

wpforms homepage

幸運的是,WPForms與條紋兼容。因此,我們將通過WPForms將條紋與WordPress連接。此過程允許用戶使用QR碼以您想要使用拖放構建器的任何形式付款。這使您的用戶很容易購買。

現在,查看我們將在下面遵循的所有步驟。如果要跳到任何步驟,只需單擊它。

  • 步驟1:安裝並設置WPFORMS
  • 步驟2:安裝並設置WPFORMS Stripe Pro addon
  • 步驟3:創建付款表格
  • 步驟4:設置條紋付款
  • 步驟5:設置通知和確認消息
  • 步驟6:發布表格
  • 步驟7:在WordPress中添加QR碼以付款

讓我們引導您完成以下整個過程。

步驟1:安裝並設置WPFORMS

第一步是在WordPress儀表板中安裝WPForms。但是,我們應該提到WPForms提供了一個免費版本,可讓您進行條紋付款。您可以在WordPress存儲庫中快速訪問它並開始製作表單。

install wpforms in wordpress plugin repo

但是,您需要使用Pro版本來獲得更高級的條紋功能,例如使用QR代碼。

這是因為Pro版本可讓您訪問Stripe Pro插件,我們在本教程中需要。除此之外,WPForms的免費版本帶有3%的交易費用,這可以提高您的商品成本。

查看最新的WPForms評論以了解更多信息。

首先,請前往官方WPForms網站並註冊計劃。他們提供了各種計劃,可以輕鬆找到適合您預算和需求的計劃。但是,要專門使用Stripe Pro插件,您需要Pro或Elite WPForms計劃。

購買Pro或Elite計劃後,請登錄您的WPForms帳戶並導航至下載

之後,將WPForms ZIP文件下載到您的PC。然後,在此頁面上,複製許可證密鑰;您將需要它激活Pro版本。

wpforms-pro-license

完成後,前往WordPress儀表板,然後轉到插件»添加新插件。然後,像其他任何插件一樣安裝和激活WPForms。

如果需要任何幫助,請查看有關如何安裝插件的教程。

激活後,您應該在WordPress儀表板中看到一個新的菜單選項,標有“ WPForms”。這表明安裝過程是成功的。

此後,轉到WPFORMS»設置»一般並粘貼您之前複製的“許可證密鑰”。

最後,點擊“驗證鍵” ,就是這樣!您準備使用WPForms。

verify wpforms license

接下來,讓我們看看如何通過WPForms在WordPress中設置Stripe付款。

步驟2:安裝並設置WPFORMS Stripe Pro addon

WPForms使添加條紋付款並配置它們非常簡單。您要做的就是轉到wpforms»addons

在這裡,滾動瀏覽可用插件或使用搜索功能查找“ Stripe Pro”插件。之後,像其他任何插件插件一樣安裝並激活它。

wpforms stripe pro addon

就是這樣!現在,您可以通過此插件在WPForms上使用高級條紋功能。

接下來,在WPForms上配置並設置條紋付款。

為此,請前往WPForms»設置並導航到“付款”選項卡。 After this, scroll to the Stripe section on the page and hit “Connect with Stripe.”

wpforms connect to stripe

您將被重定向到註冊頁面,在這裡您可以添加條紋登錄詳細信息。如果您沒有Stripe帳戶,也可以在此頁面上創建一個。

wpforms login to stripe

連接後,您將被重定向回WordPress儀表板。此時,您應該在“條紋”選項卡下的“連接狀態”旁邊看到一個綠色滴答。

wpforms stripe connection successful

如果您正在尋找更多可以通過WordPress中的條紋連接的工具,請查看有關最佳條紋插件的本文。

偉大的!您剛剛設置了條紋,並準備收到付款。

步驟3:創建付款表格

下一步是設置用戶可以付款的付款表。如前所述,使用WPForms的優點在於您可以在所需的任何形式上添加付款字段。

例如,您可以將付款字段添加到註冊表。這將註冊和付款與QR碼過程相結合,簡化了結帳。您還可以將其添加到捐贈表,賬單表,拍賣表,黨派RSVP表格,訂單表格等。

使用WPForms最好的部分是它具有2000多個現成的形式模板。這進一步簡化了過程。如果您有設計經驗,也可以使用空白畫布。

wpforms templates page

為了幫助您選擇模板,WPForms在模板頁面上向您展示了每個模板的預覽。如果要在全屏幕上查看模板,請懸停在其上,然後選擇“查看演示”。

我們的分步教程將使用“簡單觸點表單”模板。

因此,我們將懸停在它上並點擊“使用模板”。這將打開拖放形式構建器中的模板。

wpforms simple contact form

首先,您會注意到形式構建器接口分為兩個部分:左側的“字段”和右側的表單的實時預覽。

這些字段分為標準字段,精美的字段和支付字段。這使您可以輕鬆找到要添加的字段。

wpforms edit billing template

WPFORMS提供各種字段類型,包括單線文本,電子郵件,下拉次數,複選框等,使您可以靈活地創建針對您的目的量身定制的表單。

要添加一個字段,只需將其從左圖中拖動,然後將其放入右側的預覽窗口中的表單上所需的斑點即可。您可以在創建聯繫表格時單擊並將其拖放到實時預覽中,從而重新排列字段。

這使您可以自定義表單佈局,以毫不費力地滿足您的需求。

例如,如果要在表單上銷售多個產品,則可以添加複選框項目,多個項目或下拉物品字段。另一方面,如果您只想在聯繫表上出售一個產品,則可以添加一個單一的字段。

wpforms edit field labels

請記住,每個WPForms模板都有預添加的字段,您可以自定義。

要編輯一個字段,請在表單預覽中選擇它,並且字段選項將出現在左側。從這裡,您可以修改字段標籤,佔位符文本和其他設置,例如是否需要該字段。

drag and drop in wpforms

完成編輯或添加字段後,請使用右上方的按鈕保存表單,以確保應用所有更改。這個簡單的過程可確保即使是初學者也可以在幾分鐘內建立專業的功能形式。

請查看有關WPFORMS與FormStack的此比較文章,以查看它們如何以形式創建匹配。

步驟4:設置條紋付款

準備好您的聯繫表格,設置Stripe付款選項是下一步。

為此,我們需要在表單中添加一個條紋字段。這是一個非常簡單的過程,因為您將使用上面使用的相同的拖放過程。

因此,轉到字段面板並滾動到付款字段。在這裡,找到“ Stripe信用卡”字段,然後將其拖放到您希望出現的表單上的位置。

WPFORMS Stripe支付字段包括卡號,有效期,CVC和國家文本線條。因此,您無需進一步自定義Stripe信用卡字段。

wpforms add stripe field

請查看本文,以了解另一種方便的方式來在WordPress中接收卡付款。

準備好條紋支付字段後,轉到最左邊的“付款”選項卡。

選擇後,您打開所有付款網關,與WPForms連接。您可以使用授權。

但是,建議的付款網關是條紋,您將在此頁面的頂部找到。

wpforms stripe payment activation

選擇此選項後,將在左側打開一個新頁面,並帶有一個切換按鈕,以啟用“一次性付款”或“重複付款”。

請查看本文,以了解如何使用WPForms設置經常性付款。

對於今天的教程,我們將進行一次性付款。

使用“切換”按鈕啟用此功能後,您將看到將您的聯繫表單字段映射到付款字段的選項。這允許WPForms與條紋通信,並確保在表單提交過程中捕獲正確的付款詳細信息。

wpforms one time payments
同樣,WPForms使映射過程變得容易。

您需要做的就是從下拉菜單中選擇一個選項。 In fact, the dropdown menus only contain the most likely field to be mapped, making it even easier.

例如,在Stripe付款收據下拉下,您會看到“電子郵件”。然後,在客戶名稱下拉列表中,您將獲得“名稱”。

映射後,它應該看起來像下面的屏幕截圖:

wpforms mapping stripe

為了進一步提高用戶體驗,您可以在此頁面的底部激活條件邏輯。

在這裡,您可以決定何時應顯示或隱藏付款字段。 WPForms甚至允許您添加多個條件邏輯規則。

wpforms enable conditional logic

除了有條件的邏輯之外,這是減少可能派上用場的遺棄形式的另一種方法。

步驟5:設置通知和確認消息

現在,電子郵件通知和確認消息對於所有表格都很重要。但是,它們對於與付款相關的表格至關重要。他們向用戶提供即時反饋,並保證他們的付款已成功處理。

可以將電子郵件通知配置為將收據或確認詳細信息發送給用戶,同時也通知您有關交易的信息。

form-notification-email

表單提交後立即顯示的確認消息,通過讓用戶知道其付款和表格提交成功來消除混亂。

您可以在同一頁面上立即在同一站點上的另一頁或外部URL上顯示確認消息。

wpforms-confirmations

WPForms allows you to set them both up under Settings .在這裡,您可以獲得“通知”和“確認”的標籤。

請記住,確保這些消息清晰且專業增強了用戶的信任,並創造了整體體驗。

您可以查看有關如何設置表格通知和深入說明的確認的本文。

步驟6:發布表格

現在,有了所有設置,唯一要做的就是在WordPress網站上發布您的表格。有兩種方法:在新頁面上發布或在現有頁面上發布。

讓我們看看如何在現有頁面上發布。

First, hit the Save button at the top of the page.完成後,選擇“保存”按鈕旁邊的“嵌入”按鈕以打開彈出窗口。然後,在此窗口中,選擇“選擇現有頁面”。

wpforms add form to existing page

在下一個彈出窗口中,選擇要從下拉列表中出現表單的頁面。此後,“走吧。”

這將在WordPress'Block編輯器中打開頁面。

wpforms select page for form

之後,轉到塊編輯器的最左側,然後選擇“加號”按鈕以打開塊。

然後,找到WPForms塊,然後將其拖放到您希望付款表格的頁面上的位置。加載後,使用塊中的“下拉菜單”選擇您剛剛構建的付款表格。

wpforms select form from block

最後,點擊頁面右上角的保存。此時,您應該在實時頁面上看到您創建的聯繫表格。

接下來,讓我們看看如何將付款表添加到新頁面。

同樣,返回到拖放形式構建器頂部的嵌入式按鈕。但是這次,選擇“創建新頁面”。

wpforms embed form to new page

在下一個彈出窗口中,命名您的新頁面,然後選擇“讓我們走。”。這將打開新頁面的塊編輯器。這次,新頁面將帶有預先添加的表格加載。

wpforms name new page

當然,您可以使用WordPress塊來進一步自定義頁面。但是,該表格應準備好發布。一旦您對錶格感到滿意,請點擊頁面頂部的“發布”。

wpforms payment form sample

就是這樣!現在,您可以在現有頁面和新頁面上使用WPForms發布表單。

接下來,讓我們看看如何添加QR碼以通過表格接受付款。

步驟7:在WordPress中添加QR碼以付款

現在,有2種免費且簡單的方法可以在您的付款表中添加QR碼。首先,您可以使用具有內置QR函數的Google Chrome,也可以使用免費WordPress插件Fultimate。

1。使用內置的Chrome功能添加QR代碼

google chrome download

要使用Google Chrome功能創建QR碼,請在瀏覽器上打開付款表格頁面。

您可以使用URL文本欄旁邊的共享按鈕打開QR代碼功能。

如果您在這裡找不到它,請點擊Chrome瀏覽器右上方的“自定義和控制”按鈕。這通常顯示為3點。

此後,向下滾動以鑄造,保存和分享。然後,從下拉菜單中,選擇“創建QR代碼”。

chrome built in qr code builder

然後,在接下來出現的彈出窗口上,將QR碼作為圖像下載。

qr code image download

接下來,轉到網站上的任何頁面或發布,並添加您下載的QR碼。最好將其添加到產品頁面中,以便您可以快速將用戶重定向到結帳頁面。

接下來,您要做的就是編輯頁面或將其發佈到塊編輯器中。然後,使用圖像塊添加QR碼。

就是這樣。您的用戶可以立即打開付款表。

2。使用快捷代碼終極添加QR代碼

Shortcodes Ultimate

由快速代碼構建的快速代碼Ultimate允許您將QR碼放在更方便的頁面區域,小部件,側邊欄等,而無需編碼。

要獲取此短代碼插件的免費版本,請轉到您的WordPress存儲庫,並使用搜索功能找到“快捷代碼Ultimate”。之後,像其他任何插件一樣安裝並激活它。

shortcodes ultimate install

之後,在WordPress儀表板上打開一個新的或現有的頁面。然後,使用Plus(+)函數搜索“短代碼”。

將短代碼塊拖到您希望出現QR碼的頁面上的位置。

shortcodes ultimate block

完成後,在快捷代碼塊頂部選擇Square Brackets選項“ []”以打開更多選項。然後,從彈出窗口中的長列表中找到“ QR碼”。

shortcodes ultimate qr code

在下一個彈出窗口中,在數據字段中輸入付款表格URL。然後,您可以添加更多自定義方法,例如大小,保證金,對齊,鏈接等。

shortcodes ulitmate qr code customization

之後,點擊插入短代碼並更新頁面。此時,您應該在實時頁面上查看QR碼。

在下面查看付款QR碼的樣本:

qr code payment example

最好的部分是,您可以使用此QR碼,而無需進一步編輯。

就是這樣!您剛剛學會瞭如何在WordPress中添加Stripe QR碼付款。我們希望您喜歡它。如果您還有其他問題,請檢查以下常見問題。

常見問題解答:如何在WordPress中添加Stripe QR碼付款

將Stripe QR碼添加到WordPress安全嗎?

絕對,條紋可確保使用PCI合規性和加密來確保付款處理。當使用WPForms或WooCommerce等信譽良好的插件集成到WordPress中時,您的QR碼付款與常規條紋交易一樣安全。

我可以將Stripe QR碼用於WordPress重複付款嗎?

是的,Stripe支持經常付款,您可以通過WPForms或WooCommerce訂閱等插件啟用此付款。在Stripe中配置訂閱付款鏈接後,創建鏈接到它並將其嵌入WordPress站點的QR碼。

如何將Stripe QR碼付款添加到我的WordPress網站?

要向WordPress添加Stripe QR代碼付款,請使用諸如WPFORMS或WooCommerce之類的插件。在插件設置中啟用條紋,生成付款鏈接,然後使用QR碼生成器(例如QR碼生成器)創建鏈接到付款URL的代碼。最後,使用小部件,頁面或帖子編輯器將QR碼嵌入您的網站中。

我可以在WordPress中創建動態條紋QR碼嗎?

最肯定的是,您可以通過將條紋與WPForms或自定義腳本等插件集成在一起來創建動態QR碼。使用表單構建器捕獲用戶輸入,例如金額,並生成唯一的條紋付款鏈接。使用第三方生成器將鏈接轉換為QR碼,以確保數據適應用戶輸入。

恭喜!您現在可以在WordPress網站上設置QR付款代碼。 Here is an article to show you how to accept Stripe Payments in WordPress if you do not want to add QR codes to your payment form.

最重要的是,您可能對閱讀感興趣的其他文章。

  • 9最佳WordPress付款插件
  • WP簡單的薪酬評論:它是最佳付款插件嗎?
  • 9最佳WordPress付款插件

第一篇文章列出了WordPress的最佳付款插件。下一個審查了WP簡單薪酬,另一個驚人的付款插件。最後一篇文章將排名最佳的WordPress付款插件。