如何在 Divi 的定價表中添加簡單的條紋支付按鈕

Stripe 是一種非常靈活的在線業務支付處理解決方案，特別是如果您是一位精通技術的開發人員。 但是，如果您不是開發人員，並且仍想使用 Stripe 在線銷售一些產品，那麼有一些簡單的方法可以做到這一點。 事實上，通過一些代碼片段（或一個簡單的插件），您可以瞬間將 Stripe 支付按鈕添加到您的網站。

在本教程中，我將向您展示如何使用 Stripe Payments for WordPress 插件將 Stripe 支付按鈕添加到您的 Divi 網站。 我什至會向您展示如何設置按鈕樣式以匹配您的 Divi 佈局。

讓我們開始吧！

搶先看

這是我們將在本教程中創建的 Stripe 支付按鈕的先睹為快。

入門

對於本用例教程，您將需要以下內容：

• Divi 主題（已安裝並處於活動狀態）
• 條紋帳戶
• WP Simply Pay 的 WordPress 插件 Stripe Payments（已安裝並處於活動狀態）
• 我們還將使用 Divi Builder 中免費提供的數字產品定價頁面佈局

關於插件

WP Simply Pay 為 WordPress 提供的 Stripe Payments 是一個插件，允許您使用簡單的短代碼嵌入開始使用 Stripe 收集信用卡付款。 您實際上可以在不使用插件的情況下手動創建結帳表格和付款按鈕，但是由於該插件使事情變得簡單並提供了一些方便的功能（例如付款確認和付款失敗頁面），我認為從長遠來看它更有幫助. 我將在本教程中使用插件的免費精簡版。 該插件的專業版將使您更好地控製表單的樣式，並支持自定義字段、自定義金額和訂閱功能等內容。

使用插件設置 Stripe 表單

安裝並激活插件後，導航到Simple Pay Lite > Settings 。 然後在 Stripe Keys 選項卡下，您需要輸入您的 Stripe 帳戶 API 密鑰。 在本教程中，我將只使用測試密鑰，但如果您想開始收集真錢，您需要確保並激活您的 Stripe 帳戶並生成一些實時 API 密鑰。

您可以通過登錄您的 Stripe 帳戶並單擊Developers > API keys來找到您的API 密鑰。

您需要將 Publishable 密鑰和 Secret 密鑰複製到插件設置中。

現在跳轉到常規選項卡。 在那裡您將能夠指定一個付款成功頁面和一個付款失敗頁面。 您會注意到插件已經為您創建了這些頁面。 但是由於頁面內容是由短代碼生成的，您實際上可以將這些短代碼添加到任何 Divi 佈局上的任何 Divi 模塊中，以創建這些頁面的自定義版本。 現在只需保留這些默認頁面並繼續設置。

將支付按鈕樣式設置為“無（從主題繼承）”。 所有這些都是取出用於設置默認藍色條紋按鈕樣式的 css。 當我們添加自己的自定義 CSS 來設置 Divi 中的按鈕樣式時，這將使事情變得更清晰。

然後保存更改。

在付款確認選項卡下，您可以使用可用的模板標籤自定義付款確認頁面中短代碼顯示的消息和信息。 但是對於本教程，我將保留默認消息。

創建條紋支付表單

付款表格實際上是 Stripe 付款按鈕，可生成彈出付款表格，讓用戶無需離開頁面即可完成購買。 因此，您需要為您銷售的每個產品或服務創建一個新的付款表格。 在這個用例中，我們將為三個模擬產品創建三個付款表格。

要創建新的付款表格，請轉到 WordPress 儀表板並導航到 Simple Pay Lite > 添加新的。

給付款表單一個標題（這個標題不會顯示在前端）。

然後在付款選項選項卡下，輸入一次性金額。

接下來，單擊頁面表單顯示選項卡並將默認的付款按鈕文本更改為“立即購買”（或您想要的任何內容）。 您也可以選擇付款按鈕處理文本。

在結帳疊加顯示選項卡下，更新以下內容：

公司名
商品描述
徽標/圖片網址
啟用記住我：是

這些選項決定了此特定產品的結帳表單彈出窗口中顯示的內容。

完成後，請確保並發布/更新付款表格。

您最終需要復制位於“編輯付款表格”頁面右上角的付款表格簡碼，以便將其粘貼到您的 Divi 頁面佈局中。

但是現在，您可以繼續相同的過程來創建另外兩個支付表單，每個表單都有自己的項目描述、徽標/圖像和金額。

創建所有付款表格後，您可以通過導航到 Simple Pay Lite > 付款表格來訪問您的付款表格。 在那裡您可以輕鬆訪問短代碼。

將條紋支付按鈕添加到您的 Divi 頁面佈局

沒有準備好條紋支付表單的短代碼，現在我們需要啟動並運行我們的 Divi 頁面佈局。 為此，請創建一個新頁面，為頁面指定標題，然後單擊以使用 Divi Builder。

然後選擇“選擇預製佈局”選項。

打開數字產品佈局包並單擊以使用數字產品定價頁面。

將佈局加載到頁面後，發布頁面，然後單擊以在前端構建。

在單獨的選項卡中，返回支付表單頁面並獲取要添加到定價表中的短代碼。

然後返回到您的定價頁面佈局並打開佈局中定價表之一的定價表設置。

取出按鈕文本（您不需要它，因為短代碼將用作按鈕），然後將短代碼粘貼到內容框中的內容下。

您將看到一個無樣式的按鈕，在按鈕下方突出顯示“測試模式”文本。 按鈕沒有樣式是因為我們選擇了使用按鈕的主題樣式而不是默認的藍色按鈕的選項。 測試模式文本只是為了提醒您您沒有使用實時條紋付款表。 一旦使用了實時 API 密鑰，測試模式文本將明顯消失。

接下來，繼續在其餘兩個定價表中復制和粘貼其他兩個付款表格短代碼的相同過程。

測試其中一個按鈕以確保付款表單覆蓋正常工作。 它應該是這樣的……

不幸的是，此版本的插件不允許您自定義超出您看到的默認樣式的付款表單覆蓋。 但功能就在那裡，在許多情況下，您不需要額外的樣式。 但是，您可以設置這些按鈕的樣式！

設置條紋支付按鈕的樣式以匹配佈局

為了設置 Stripe 支付按鈕的樣式，我們將在頁面設置中添加一些自定義 CSS。 首先，我們需要弄清楚我們將使用什麼選擇器來設置按鈕的樣式。 您可以使用瀏覽器開發人員工具找到它。 右鍵單擊條紋按鈕並選擇“檢查”。 在 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 for WordPress 插件，您可以在幾分鐘內在您的 Divi 站點上啟動並運行基本的 Stripe Checkout 功能。 此外，如果您利用 Divi 的預製佈局，您只需複制和粘貼已為您創建的 CSS 代碼，即可添加和設置 Stripe 支付按鈕的樣式以匹配您的佈局。 結果是一個功能齊全且安全的付款處理工具，可以從訪問者那裡收取付款，而無需他們離開頁面。

隨意探索在您的 WordPress 網站上接受 Stripe 付款的更多方式。

我希望本教程對您有所幫助，並期待在評論中收到您的來信。

乾杯!