作者： Bestony

这篇文章将会教你如何在 10 分钟中内借助 WordPress 搭建一个支持 ERC20 通证的在线 B2C 商城。

在区块链及通证经济备受瞩目的今天，很多开源社区纷纷在探讨如何将开源社区与区块链技术和通证经济相结合，从而为开源社区和开源生态提供自主、自洽、发展的动力和支持。我们 “Linux 中国”就是这诸多探索的开源社区之一。可喜的是，我们已经迈出了第一步： 发布社区通证 ，也迈出了第二步， 使通证流通起来 。这里，我们愿意分享我们的经验给各个社区伙伴，使更多的开源社区也可以投身于新的生态探索，避开一些我们遇到的陷阱，从而共同营造一个更繁荣的开源世界。

我们的 通证商城 是基于 WordPress 的 WooCommerce 商城构建的。

安装 WordPress

在开始配置商城前，你需要先安装 WordPress 。你需要购买一个支持 PHP + MySQL 的虚拟主机，或自行配置 VPS、云服务器的环境，以支持 WordPress 的运行。

当你安装好 WordPress 后，你可以看到一个这样的后台。

安装 WooCommerce

安装完 WordPress 后，接下来安装 WordPress 的商城插件 WooCommerce ，点击菜单栏中的“插件”-“安装插件”，访问到安装插件的界面，在界面右上角的搜索框内容输入“WooCommerce”，并按下回车，可以搜索到 WooCommerce 。

点击现在安装，来安装 WooCommerce。安装完成后，点击“启用”，启用插件。

启用插件后， WooCommerce 会引导你进行初始化配置，根据提示对插件进行配置。

必要时，可以允许线下支付，但是针对加密货币而言，目前看起来不需要线下支付场景：

并设置邮费：

插件安装时，取消 MailChimp 的安装，仅启用 StoreFront：

并视需要觉得是否安装还是跳过 JetPack ：

当你看到如图所示的界面时，就说明完成了初始化的配置了。

点击访问控制面板，回到 WordPress 界面。

添加 ERC20 通证作为支付货币

为了原生支持 ERC20 通证来实现支付，从而免去汇率换算，我们需要添加一款自定义的货币。

打开“插件”-“安装插件”，在关键词中输入 “ Woocommerce Customize ERC20 Currency ”并回车。这是我们联合硬核区块链公司开发的一款用于给 WooCommerce 增加 ERC20 货币的插件，该插件已经开源于 GitHub 。

找到 “Woocommerce Customize ERC20 Currency” 插件，并安装。

安装，并启用 “Woocommerce Customize ERC20 Currency”。

启用插件后，点击左侧菜单中的“设置”-“WooCommerce ERC20 货币自定义”，进入到插件的设置界面。

在插件的设置界面，你可以设置需要添加的货币的名称和对应的符号。比如这里我设置为 “LCCN” 和 “Ⓛ”，并点击“保存”。

保存后，点击左侧菜单栏中的“WooCommerce”-“设置”，进入到 WooCommerce 设置界面，在常规选项中，拖动到最底部，可以看到币种选项。点击货币，找到你自己设置的货币后，点击“设置”，并“保存”设置。

此时，站点的商品便以你自己设定的 ERC20 通证作为支付货币进行交易了。

安装 ERC20 通证支付网关

接下来，我们来安装“ Woocommerce ERC20 Payment Gateway ” 来开启站点的 ERC20 Token 的支付支持。这也是我们联合硬核区块链公司开发的一款用于给 WooCommerce 提供 ERC20 货币支付支持的插件，该插件已经开源于 GitHub 。

点击左侧菜单栏中的“插件”-“安装插件”，在关键词中输入 “Woocommerce ERC20 Payment Gateway”，并回车，找到 “Woocommerce ERC20 Payment Gateway”并安装、启用。

安装，并启用完成后，点击插件后的“设置”，进入到设置页面。

在设置页面，启用 “使用 ERC 20 Token 支付”这一支付方式，并保存。

然后点击支付方式后面的“设置”，进入到插件的设置界面。

首先，设置一些支付方式的基础信息。

标题是支付方式的标题，将会展示在结账的页面，因此，你可以将其设置为诸如“使用 LCCN 支付费用”或其他内容，让顾客明白此支付方式为使用通证支付。

描述会展示在支付方式的下方，同样的，你可以设置为 “使用 LCCN 支付费用”，此外，还建议你在此引导顾客安装、并打开 Metask 插件，切换到主网络，确保后续支付。

支付方式图标则会展示在支付方式标题后，将其设置为你的通证的图标，以获得更明显的提醒效果。

三者具体的示意图如下

支付方式设置完成后，接下来设置与 ERC20 通证有关的内容。

钱包地址为顾客支付时转账的对象，将其设置为你自己的钱包地址即可。

合约 ABI 则可以在 etherscan 中找到，比如，LCCN 的合约地址为： https://etherscan.io/address/0x8f4f3b3c3a900d10e9cf74c30e16f5958d8fd339#code ，由于 LCCN 公开了其合约源代码，其 ABI 可以在合约的界面找到（如未公开，请向你的 ERC20 合约开发人员索要 ABI），点击右侧 “Copy”，复制 ABI，并将其填入设置项目中去。

合约地址为你的合约在对应网络中的地址。切记，如果你是测试环境，就需要将其设置为对应测试网络下的合约地址，如果是生产环境，就设置为主网的合约地址。

Gas 提醒这里是用来提醒用户支付时选择较高的 Gas ，从而加快确认的速度。你可以根据自己的需要设置具体的内容，也可以使用默认的语句。

至此，插件就已经设置完成了。

测试支付

插件设置完成后，我们来新建一个产品，用于测试。点击顶栏中的“新建”-“产品”，进入到创建产品的界面。

在产品界面输入产品名称、描述、售价等信息：

然后点击发布，创建新的产品。并点击“查看产品”，进入到产品的主页。

将其加入购物车：

在购物车界面点击“结算”，进行结算。

输入账单地址（账单地址将作为收货地址显示在界面中），点击“使用 Token 完成支付”。

在结算页面，拖动到底部，可以看到支付按钮，点击支付按钮，会自动唤起浏览器的 Metamask 插件。

在弹出的窗口中确认支付：

支付完成后，页面会自动刷新，并看到支付完成的字样。

处理订单

用户支付完成后，如何确定订单已经支付完成了呢？进入后台“仪表盘”-“WooCommerce”-“订单”，可以看到用户所有的订单。

正在处理状态的订单为用户已经支付完成，还没有处理的订单。点击该订单，进入到订单详情，在右侧的“订单备注”中可以看到交易的 Tx 值 。你可以点击对应链接，查看交易是否完成。

至此，整个使用 ERC20 通证的交易流程就走通了，接下来你就可以创建商品，使用 ERC20 通证 来完成你的 ERC20 在线交易流程啦！

关于硬核区块链

硬核区块链 是一个区块链技术服务提供商，我们为顾客提供全面的 ERC20 通证发行、安全审计、解决方案构建、流通流程设计、 空投解决方案等服务，为顾客提供咨询与支付服务。

相关链接

• Woocommerce ERC20 Payment Gateway 插件
• 官方市场
• 官方仓库
• 官方教程
• Woocommerce Customize ERC20 Currency 插件
• 官方市场
• 官方仓库
• 官方教程

点击“了解更多”可访问文内链接