如何在 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 付款的更多方式。

我希望本教程对您有所帮助，并期待在评论中收到您的来信。

干杯!