10 分鐘創建起一個支持 ERC20 代幣的在線 B2C 商城

時間 2019-11-21

標籤分鐘創建一個支持 erc20 erc 代幣在線 b2c 商城欄目 C&C++ 简体版

原文原文鏈接

這篇文章將會教你如何在 10 分鐘中內創建起一個支持 ERC20 代幣的在線 B2C 商城。git

安裝 WordPress

在開始配置商城前，你須要先安裝 WordPress 。你須要購買一個支持 PHP + MySQL 的虛擬主機，或自行配置 VPS、雲服務器的環境，以支持 WordPress 的運行。github

當你安裝好 WordPress 後，你能夠看到一個這樣的後臺。安全

安裝 WooCommerce

安裝完 WordPress 後，接下來安裝 WordPress 的商城插件 WooCommerce ，點擊菜單欄中的「插件」-「安裝插件」，訪問到安裝插件的界面，在界面右上角的搜索框內容輸入 WooCommerce，並按下回車，能夠搜索到 WooCommerce 。服務器

點擊如今安裝，來安裝 WooCommerce。安裝完成後，點擊啓用，啓用插件。網絡

啓用插件後， WooCommerce 會引導你進行初始化配置，根據提示對插件進行配置。wordpress

容許線下支付區塊鏈

並設置郵費測試

插件安裝時，取消 MailChimp 的安裝，僅啓用 StoreFront插件

並跳過 JetPack 設計

當你看到如圖所示的界面時，就說明完成了初始化的配置了。

點擊訪問控制面板，回到 WordPress 界面。

添加 ERC20 Token 做爲支付貨幣

爲了支持原生的 ERC20 Token 來實現支付，從而免去匯率換算，咱們須要添加一款自定義的貨幣。

打開「插件」——「安裝插件」，在關鍵詞中輸入「Woocommerce Customize ERC20 Currency」並回車。

找到「Woocommerce Customize ERC20 Currency」插件，並安裝。

安裝，並啓用「Woocommerce Customize ERC20 Currency」。

啓用插件後，點擊左側菜單中的「settings」——「WooCommerce ERC20 貨幣自定義」，進入到插件的設置界面。

在插件的設置界面，你能夠設置須要添加的貨幣的名稱和對應的符號。好比這裏我設置爲 LCCN 和 Ⓛ，並點擊保存。

保存後，點擊左側菜單欄中的「WooCommerce」——「設置」，進入到 WooCommerce 設置界面，在常規選項中，拖動到最底部，能夠看到幣種選項。點擊貨幣，找到你本身設置的貨幣後，點擊設置，並保存設置。

此時，站點的商品便以你本身設定的 ERC20 Token 做爲支付貨幣進行交易了。

安裝 Woocommerce ERC20 Payment Gateway 插件做爲支付網關。

接下來，咱們來安裝 Woocommerce ERC20 Payment Gateway 來開啓站點的 ERC20 Token 的支付支持。

點擊左側菜單欄中的「插件」——「安裝插件」，在關鍵詞中輸入「Woocommerce ERC20 Payment Gateway」，並回車，找到「Woocommerce ERC20 Payment Gateway」並安裝、啓用。

安裝，並啓用完成後，點擊插件後的「設置」，進入到設置頁面。

在設置頁面，啓用「使用 ERC 20 Token 支付」這一支付方式，並保存。

而後點擊支付方式後面的「設置」，進入到插件的設置界面。

首先，設置一些支付方式的基礎信息。

標題是支付方式的標題，將會展現在結帳的頁面，所以，你能夠將其設置爲諸如「使用 LCCN 支付費用」或其餘內容，讓顧客明白此支付方式爲 Token 支付。

描述會展現在支付方式的下方，一樣的，你能夠設置爲「使用 LCCN 支付費用」，此外，還建議你在此引導顧客安裝、並打開 Metask ，切換到主網絡，確保後續支付。

支付方式圖標則會展現在支付方式標題後，將其設置爲你的 Token 的圖標，以得到更明顯的提醒效果。

三者具體的示意圖以下

支付方式設置完成後，接下來設置與 ERC20 Token 有關的內容。

錢包地址爲顧客支付時轉帳的對象，將其設置爲你本身的錢包地址便可。

合約 ABI 則能夠在 etherscan 中找到，好比，LCCN 的合約地址爲：etherscan.io/address/0x8…，其 ABI 能夠在合約的界面找到，點擊右側「Copy」，複製 ABI，並將其填入設置項目中去。

合約地址爲你的合約在對應網絡中的地址，若是你是測試環境，就須要將其設置爲對應測試網絡下的合約地址，若是是生產環境，就設置爲主網的合約地址。

Gas 提醒這裏是用來提醒用戶支付時選擇較高的 gas ，從而加快確認的速度。你能夠根據本身的須要設置具體的內容，也能夠使用默認的語句。

至此，插件就已經設置完成了。

測試支付

插件設置完成後，咱們來新建一個產品，用於測試。點擊頂欄中的「新建」——「產品」，進入到建立產品的界面。

在產品界面輸入產品名稱、描述、售價等信息

而後點擊發布，建立新的產品。並點擊「查看產品」，進入到產品的主頁。

將其加入購物車

在購物車界面點擊「結算」，進行結算。

輸入帳單地址（帳單地址將做爲收貨地址顯示在界面中），點擊「使用 Token 完成支付」。

在結算頁面，拖動到底部，能夠看到支付按鈕，點擊支付按鈕，會自動喚起 Metamask 。

在彈出的窗口中確認支付

支付完成後，頁面會自動刷新，並看到支付完成的字樣。

處理訂單

用戶支付完成後，如何肯定訂單已經支付完成了呢？進入後臺——「WooCommerce」——「訂單」，能夠看到用戶全部的訂單。

正在處理狀態的訂單爲用戶已經支付完成，尚未處理的訂單。點擊訂單，進入到訂單詳情，在右側的「訂單備註」中能夠看到交易的 Tx 值。你能夠點擊對應連接，查看交易是否完成。

至此，整個使用 ERC20 的交易流程就走通了，接下來你就能夠建立商品，使用 ERC20 Token 來完成你的 ERC20 在線交易流程啦！

聯繫方式

插件使用有任何問題，能夠加咱們的 Slack Channel ：join.slack.com/t/inkerk/sh…

關於咱們

Inkerk Blockchain Inc 是一個區塊鏈諮詢服務提供商，咱們爲顧客提供全面的 ERC20 Token 發行、安全審計、解決方案構建、流通流程設計、 Airdrop 解決方案等服務，爲顧客提供諮詢與支付服務。若是您對咱們的服務有興趣，能夠經過 contact@inkerk.com 聯繫咱們。