如何允许用户在 WordPress 表单上选择付款方式

您想允许用户在您的 WordPress 网站或在线商店的不同付款方式之间进行选择吗?当您允许客户选择他们喜欢的付款方式时,您将在您的网站上建立信任并增加转化率。在本文中,我们将向您展示如何允许用户在您的 WordPress 表单中选择付款方式。

payment methods on wordpress forms og 1699251681785 12

为什么在 WordPress 中提供多种支付方式?

PayPal 和信用卡是两种流行的在线购物支付方式。每种方法都有其优点和缺点,您的访问者可能已经对其中一种有了偏好。

因此,如果您在 WordPress 网站销售产品或服务,或要求捐款,那么让您的访问者使用他们喜欢的付款方式非常重要。

您可能已经拥有一个带有购物车的完整在线商店,但您无需设置一个即可接受在线支付。您所需要的只是一个简单的在线订单,其中包含多种付款方式。

如果您要销售单一产品、接受服务付款或为事业或慈善机构筹集资金,这是有道理的。

您需要先在网站上启用 HTTPS/SSL,然后才能在网站上接受付款,以便安全地接受付款。

话虽如此,让我们看看如何在您的网站上提供多种付款方式。我们将介绍三种方法,以便您选择最适合您需求的方法。

方法 1 是最简单的,不需要完整的购物车。如果您有 WooCommerce 商店,则应使用方法 2。如果您没有在线商店并且想要使用 PayPal 或创建更灵活的表单,则方法 3 是最好的。

  • 方法1:使用WP Simple Pay提供多种付款方式

  • 方法2:在WooCommerce中提供多种付款方式

  • 方法3:使用WPForms提供多种付款方式

方法1:使用WP Simple Pay提供多种付款方式

WP Simple Pay 是一种在您的网站上提供多种付款方式的简单方法。这是一个领先的 WordPress 付款插件,可让您在不设置功能齐全的电子商务商店或会员网站的情况下接收付款。

它使用流行的支付网关 Stripe 接受来自信用卡、Apple Pay、Google Pay、ACH 银行借记、SEPA 直接借记、支付宝、Giropay、iDEAL 等的付款。

您需要做的第一件事是安装并激活WP Simple Pay插件。

虽然该插件有免费版本,但您需要 Pro 插件来创建现场付款表单、接受 Apple Pay 等。

激活后,WP Simple Pay设置向导将自动启动。您只需单击“让我们开始”按钮即可继续。

WP Simple Pay 设置向导将自动启动

首先,系统会要求您输入许可证密钥。您可以从WP Simple Pay网站上的帐户中找到此信息。

之后,您需要单击“激活并继续”按钮继续。

系统会要求您输入WP Simple Pay许可证密钥

接下来,您需要将 WP Simple Pay 连接到 Stripe。

首先点击“Connect with Stripe”按钮。从那里,您可以登录您的 Stripe 账户或创建一个新账户。任何拥有合法业务的人都可以创建一个 Stripe 账户并在线接受付款。

您需要将 WP Simple Pay 连接到 Stripe

正如我们之前提到的,Stripe 将要求您的网站使用 SSL/HTTPS 加密。

连接到 Stripe 后,系统会要求您配置您的 WP Simple Pay 电子邮件。

配置您的 WP Simple Pay 电子邮件

已为您启用向客户发送付款和发票电子邮件的选项。因此,可以选择发送付款通知电子邮件。您只需要输入应发送通知的电子邮件地址即可。

完成此操作后,您需要单击“保存并继续”按钮。这样就完成了WP Simple Pay的设置。

WP Simple Pay 设置完成

在我们继续之前,您可能需要配置另一个设置。某些付款方式仅适用于特定货币,因此如果您不使用美元,则需要更改默认货币。

只需访问 WP Simple Pay » 设置,然后单击“常规”,然后单击“货币”,然后从下拉菜单中选择正确的货币。

如有必要,更改WP Simple Pay的默认货币

在WordPress中创建付款表单

现在是时候创建您的付款表单了。WP Simple Pay 提供了多种自定义表单的方法,但如果您需要更全面地控制表单的外观,请查看方法 3 中的 WPForms。

如果您不需要更改币种,并且仍然可以看到设置向导的最后一页,只需单击“创建付款表单”按钮即可。否则,您应该导航到 WP Simple Pay » 添加新页面。

您将看到付款表单模板列表。您可以从通用模板(例如“付款表单”)开始,然后添加付款方式。或者,您可以寻找更具体的模板,例如“Afterpay / Clearpay”或“Apple Pay / Google Pay”。

在本教程中,我们将选择“付款表单”模板。只需将鼠标悬停在您要使用的模板上,然后在出现时单击“使用模板”按钮。

multpaywpsimplepaypaymentformtemplate 1699251681786 19

这将带您进入付款表单编辑器。

您应该首先为付款表单提供名称和描述。之后,您可以在“表单类型”下选择“Stripe Checkout”选项。

multpaywpsimplepayeditformgeneral 1699251681786 21

接下来,您需要单击“付款”选项卡。在这里,您可以将付款模式设置为实时或测试。测试模式将允许您进行实际未收取费用的付款,因此您可以确保您的表单正常工作并发送电子邮件

当您完成测试并准备好开始接收客户的付款时,请不要忘记将其更改为“实时”。

applepaypayment1 1699251681786 20

您还可以添加您提供的产品或服务,以及它们的价格以及它们是一次性付款还是订阅。

只需单击“添加价格”按钮,直到您根据需要添加任意数量的价格。然后,对于每一个,您都需要添加标签和价格。您还可以选择其他选项,例如价格是否为订阅,或者用户可以确定价格,如捐赠。

applepaypayment2 1699251681786 22

您可以通过单击右侧的小箭头来显示或隐藏价格。

接下来,我们将转到“表单字段”选项卡。基本字段已添加到表单中,如有必要,您可以添加更多字段。

使用“表单字段”下拉列表,您可以选择其他字段,然后单击“添加字段”按钮进行添加。选项包括姓名、电话号码、地址等等。

multpaywpsimplepayeditformformfields 1699251681786 23

按钮上的默认文本是“使用卡支付”。由于您将接受多种付款类型,因此您可以将文本更改为更通用的内容,例如“立即付款”。这样,您的客户就不会认为信用卡是唯一的付款方式。

最后,您应该单击“Stripe Checkout”选项卡并选择您希望提供的付款方式。在本教程中,我们将保留默认设置。

multpaywpsimplepayeditformstripecheckout 1 1699251681786 24

其他付款方式(如 Apple Pay)将在兼容设备上自动提供。

Klarna 和 Afterpay 是“先买后付”服务,为客户提供灵活性,因为他们可以在指定时间段内购买商品并分期付款。

当您对付款表单感到满意时,单击“发布”按钮以存储您的设置并实时推送表单。

最后一步是将表单添加到您网站上的帖子或页面。

将付款表单添加到您的网站

WP Simple Pay 使在您网站上的任何位置添加表单变得非常容易。

只需创建新的帖子或页面,或编辑现有帖子或页面。然后,单击顶部的加号 (+) 并在 WordPress 块编辑器中添加一个 WP Simple Pay 

将WP Simple Pay块添加到帖子或页面

之后,从WP Simple Pay块的下拉菜单中选择您的订单。

完成后,您可以更新或发布帖子或页面,然后单击预览按钮以查看表单的运行情况。

访问您的网站,查看实际操作的付款表单

当您的用户点击“立即付款”按钮时,将显示 Stripe 结账表单。这将提供您之前检查的所有付款选项。

在支持的设备和浏览器上,还将自动提供其他支付选项,例如 Apple Pay。

在 Mac 或 iOS 设备上的 Safari 上结账时将提供 Apple Pay

您可以使用 WP Simple Pay 为客户提供的另一种付款方式是定期付款。

方法2:在WooCommerce中提供多种付款方式

如果您使用 WooCommerce 运行在线商店,那么您可以使用 PayPal 和 Stripe 支付网关轻松提供其他付款方式。

在本教程中,我们假设您已经安装了 WooCommerce。

将 PayPal 添加到您的 WooCommerce 商店

在遵循该指南中的 WooCommerce 设置向导时,您可能已经设置了 PayPal。如果有,那么您可以继续下一部分并设置 Stripe。

如果没有,您需要前往 WooCommerce » 设置,然后单击屏幕顶部的“付款”选项卡。

之后,向下滚动页面,直到找到PayPal,然后单击“开始使用”按钮。

单击 PayPal 入门按钮

您需要首先输入您的 PayPal 电子邮件地址,然后从下拉菜单中选择您所在的国家/地区。

之后,您应该单击“下一步”按钮继续。

如果您已经拥有使用该电子邮件地址的 PayPal 帐户,则系统会要求您提供密码并登录。否则,您将首先被要求提供您的个人详细信息并创建一个新帐户。

登录您的 PayPal 帐户或创建一个新帐户

最后,您应该单击“同意并同意”按钮将您的 PayPal 帐户连接到在线商店。

完成此操作后,您需要转到收件箱并按照发送给您的电子邮件中的说明确认您的电子邮件地址。然后,您可以通过滚动到底部并单击按钮来关闭弹出窗口。

同意连接您的帐户,然后向下滚动并单击按钮

您应该发现自己回到了 WooCommerce Payments 设置页面。在这里,您需要选中该框以在您的在线商店中启用PayPal支付网关。

之后,小心地向下滚动页面并确保所有设置都正确无误。当您满意时,您可以单击页面底部的“保存更改”按钮。

在您的 WooCommerce 商店上启用 PayPal 支付网关

结账时,您的客户现在可以使用 PayPal 作为付款选项进行付款。

将 Stripe 添加到您的 WooCommerce 商店

您需要做的第一件事是安装并激活 WooCommerce Stripe Payment Gateway

某些付款方式仅适用于某些货币。如果您使用的是美元以外的货币,那么您应该导航到 WooCommerce » 设置 并确保您位于“常规”选项卡上。

在这里,您可以为您的在线商店选择货币。确保单击“保存”按钮以存储设置。

为您的在线商店选择货币

之后,您应该单击“付款”选项卡。到达那里后,您应该向下滚动,直到在“方法”列中找到“条纹”。请注意,有多种 Stripe 支付方式。

multpaywoocommercestripesetup 1699251681786 33

您需要首先单击“Stripe – 信用卡”旁边的“设置”按钮。这将启动一个设置向导,引导您完成将 WooCommerce 连接到 Stripe 的步骤。

在下一个屏幕上,单击“输入帐户密钥”按钮。

enter account keys 1699251681786 34

WooCommerce 现在将要求您提供 Stripe 账户密钥。要获取此信息,您需要在新标签页中登录 Stripe 管理平台

在 Stripe 管理平台内,您应该确保位于屏幕顶部的“开发人员”选项卡上,然后从左侧菜单中选择“API 密钥”。

stripe api keys 1699251681786 35

您现在可以复制“可发布密钥”。

然后,切换回您的 WordPress 仪表板并将此密钥粘贴到“实时可发布密钥”字段中。

live publishable key 1699251681786 36

现在,您需要对密钥执行相同的操作。只需切换回您的 Stripe 管理平台,然后单击“显示实时密钥”按钮即可。

这将显示您的密钥。

reveal live key 1699251681786 37

您需要复制密钥,然后返回 WordPress 仪表板并将其粘贴到“实时密钥”字段中。

之后,只需单击“测试连接”链接。

stripe test connection 1699251681786 38

片刻之后,您将看到“连接成功”消息。这意味着 WooCommerce 现在已连接到您的 Stripe 账户。

您现在可以继续并单击“保存实时密钥”按钮。

save live keys 1699251681786 40

这将带您进入 Stripe 的“设置”屏幕。

在此屏幕上,您需要选中“启用条纹”框。如果您愿意,还可以单击“启用测试模式”框。

测试模式将允许您进行实际未从帐户中扣除的付款。这在WooCommerce商店中测试多种付款类型时很有用。当您准备好开始付款时,不要忘记返回并取消选中该设置。

woocommerce enable stripe 1699251681786 39

现在,您可以滚动到页面的最底部,然后单击“保存更改”按钮来存储您的设置。

现在您已经启用了 Stripe 信用卡支付,您可以启用您希望在在线商店中提供的任何其他 Stripe 支付方式。

返回 WooCommerce » 设置,然后单击“付款”选项卡。到达那里后,您可以探索适用于您商店货币的付款方式。

在本教程中,我们将启用支付宝。您需要在支付方式列表中找到“Stripe Alipay”,然后单击其“设置”按钮。

multpaywoocommercealipay 1699251681787 41

在这里,您可以单击“启用支付宝”按钮。这将在结账时显示支付宝作为付款选项。

接下来,您需要单击“保存更改”按钮来存储您的设置。

multpaywoocommerceenablealipay 1699251681787 42

另类:您可以使用免费的 Stripe Payment Gateway for WooCommerce 插件,而不是使用 WooCommerce 的默认 Stripe 插件,由 FunnelKit 创建。

它支持 Stripe、Apple Pay、Google Pay、SEPA、iDEAL 等。此外,它还具有额外的功能,例如简单的设置向导、自动 webhook 创建、一键式快速付款等。

向 WooCommerce 添加定期付款

为您的 WooCommerce 客户提供灵活付款安排的另一种方法是添加定期付款,以便每周、每月、每季度或每年自动向客户收费。

这样可以自动执行计费流程,从而节省您的时间。您不必手动发送发票,定期付款通常会减少付款延迟和错误。

现在,当您的客户结账时,他们将能够选择他们喜欢的付款方式。这是我们演示 WooCommerce 商店的示例屏幕截图。

multpaywoocommercepreview 1699251681787 43

我们的客户可以使用信用卡、PayPal 和支付宝付款。

方法3:使用WPForms提供多种付款方式

WPForms 是 WordPress 最好的拖放表单构建器插件。它使您可以创建简单的订单或捐赠表格,而无需使用成熟的电子商务平台或购物车插件。

您需要做的第一件事是安装并激活 WPForms 插件。

您将需要他们的 Pro 计划才能访问 Stripe、PayPal、Square 和 Authorize.net 支付插件。它还提供了一个包含 700+ 模板的库,其中包含多个订单表单模板、定期付款,并且没有额外的交易费用。

有一个免费的 WPForms Lite 版本,允许您接受一次性 Stripe 付款。但是,通过您的表格付款需要额外支付 3% 的交易费。

激活后,您需要访问 WPForms » 设置页面以输入您的许可证密钥。您可以在 WPForms 帐户区域中找到此信息。

contactmapslicensekey 1699251681787 44

将支付平台连接到WPForms

接下来,我们将WPForms与您计划使用的支付平台连接起来。为此,您需要前往 WPForms » Addons 并安装付款插件。

到达那里后,您需要向下滚动到 PayPal 标准插件,然后单击其“安装插件”按钮。

paypalforminstalladdon 1699251681787 45

您将看到一条消息,指出该插件已安装并激活,按钮上的文本将更改为停用。

我们将在本教程的后面设置您的 PayPal 帐户详细信息。

您还需要安装一个插件来接受信用卡付款。WPForms 支持 Stripe、Square 和 Authorize.net。在本教程中,我们将设置 Stripe,但设置其他平台的步骤类似。

您需要滚动到 Stripe 插件,然后单击“安装插件”按钮。

install stripe addon 1699251681787 47

安装并激活插件后,您需要将 WPForms 连接到您的 Stripe 账户。

为此,请转到 WPForms » 设置页面,然后单击“付款”选项卡。之后,您需要通过单击“与 Stripe 连接”按钮来连接您的 Stripe 帐户。

wpforms connect stripe 1699251681787 46

在下一个屏幕上,您可以输入您的 Stripe 电子邮件地址,然后单击“下一步”按钮。完成后,Stripe 现在将要求您输入密码,以便它可以登录您的账户。

登录后,您可以选择您的 Stripe 账户,然后单击“连接”按钮。然后,您将被重定向回 WPForms 付款设置选项卡。

stripeselectheaccount 1699251681787 48

为确保您的账户已成功连接,您可以转到 Stripe 设置下的“连接状态”设置。

当您看到绿色勾号时,表示您的 Stripe 账户现在已使用 WPForms。继续并单击“保存设置”按钮以存储您的设置。

multpaywpformsstripeconnected 1699251681787 49

WPForms 现在已准备好接受信用卡付款。

创建具有多种付款方式的订单

现在,我们将创建一个可以接受PayPal和信用卡付款的在线订单。

首先,前往 WPForms » Add New 页面。在这里,您需要为表单提供标题,然后选择“账单/订单”模板。

multpaywpformsaddnew 1699251681787 50

WPForms 将使用带有常用字段的简单订单表单预加载表单生成器。

您可以通过单击任何字段来编辑该字段。

multpaywpformseditingorderform 1699251681787 51

您可以使用拖放从左列添加新字段。

您需要将“多项选择”字段拖到表单上,以允许您的客户从多个付款选项中进行选择。

multpaywpformsmultiplechoice 1 1699251681787 52

之后,您应该将“Stripe Credit Card”字段拖到“多项选择”字段下方的表单上。

multpaywpformsstripecreditcardfield 1699251681787 53

接下来,您需要单击“多项选择”字段并更改选项以匹配您提供的付款方式。

首先在标签字段中输入“付款方式”。之后,您应该将前两个选项命名为“PayPal”和“信用卡”。

multpaywpformseditmultiplechoicefield 1699251681787 54

您可以通过单击红色减号 - 按钮来简单地删除第三个选项。

之后,您需要将“必需”选项切换为ON。这将确保用户在提交订单之前选择付款方式。

现在我们需要设置 Stripe Credit Card 字段。我们希望它被隐藏,直到用户选择它作为他们的支付选项。我们需要使用 WPForms 的条件逻辑功能。

您需要单击 Stripe 字段以便对其进行编辑,然后单击“Smart Logic”选项卡。只需单击切换到 ON 位置的切换开关即可启用条件逻辑。

multpaywpformsconditionallogicswitch 1699251681787 55

现在,您将看到一些其他选项,这些选项允许您为字段设置规则。您需要确保将第一个选项选择为“显示”,然后使用下拉菜单,以便其余字段显示“付款是信用卡”。

multpaywpformsstripeconditions 1699251681787 56

现在,只有在用户从“付款方式”字段中选择“信用卡”后,才会显示“Stripe 信用卡”字段。

在订单上启用付款方式

现在,我们将为订单启用 PayPal 和 Stripe 付款。

您应该首先导航到 付款 » PayPal 标准 在 WPForms 表单构建器中。到达那里后,您应该选中右侧面板中的“启用 PayPal 标准付款”框。

multpaywpformsenablepaypalpayments 1699251681787 57

之后,您应该填写其余字段。输入您的 PayPal 电子邮件地址并将帐户置于“生产”模式。您还需要配置用户是否需要提供送货地址。

multpaywpformspaypalenableconditionallogic 1699251681787 58

之后,您需要向下滚动到“启用条件逻辑”选项并将其切换到 ON 位置。这将显示更多设置。

multpaywpformspaymentmethodpaypal 1699251681788 61

您应该将规则设置为“如果付款方式是 PayPal,则处理费用”。

接下来,您需要单击“付款”选项卡的“Stripe”部分,然后选中“启用 Stripe 付款”框。

multpaywpformsenablestripepayments 1699251681787 59

您可以添加付款说明,并根据需要选择通过电子邮件发送收据。之后,您需要将“启用条件逻辑”开关切换到 ON 位置,以便您可以为此付款选项创建规则。

multpaywpformspaymentmethodcreditcard 1699251681787 60

您需要配置规则,使其显示为“如果付款方式是信用卡,则处理此费用”。

如果您想通过信用卡接受定期订阅付款,则可以向下滚动到“订阅”部分并进行配置。

multpaywpformssubscriptions 1 1699251681788 62

完成后,您需要单击顶部的“保存”按钮并退出表单构建器。

将订单添加到您的 WordPress 网站

您具有多种付款方式的在线订单现已准备就绪,您可以将其添加到您网站上的任何 WordPress 页面。

要添加表单,只需编辑帖子或页面或创建一个新帖子或页面即可。然后,单击页面右侧的加号 + 号,并在 WordPress 编辑器中添加一个 WPForms 块。

multpaywpformsaddblock 1 1699251681788 64

之后,您需要单击WPForms块中的下拉菜单,然后选择您的订单。完成后,请确保保存或发布页面。

现在,您可以通过单击屏幕顶部的“预览”按钮来查看表单的运行情况。

multpaywpformspreview 1699251681788 63

我们希望本教程能帮助您了解如何允许用户在您的 WordPress 表单上选择付款方式。

Image

联系我们

六翼为您提供更丰富的服务项目,涵盖设计、开发、多媒体、营销、云服务等,驱动品牌网站的互联网创新发展,释放品牌潜力。

联系电话

400-188-6006
010-86469696

在线咨询