在一个经典的商业应用程序中接受加密支付

　　如何将自定义加密支付方法集成到在线商店
　　每天‬分享‬最新‬软件‬开发‬，Devops，敏捷‬，测试‬以及‬项目‬管理‬最新‬，最热门‬的‬文章‬，每天‬花‬3分钟‬学习‬何乐而不为‬，希望‬大家‬点赞‬，加‬关注‬，你的‬支持‬是我‬最大‬的‬动力‬。
　　电子商务店面在向客户提供加密支付方式方面进展缓慢。加密支付插件或支付网关集成通常不可用，或者它们依赖第三方托管人收集、交换和分发资金。考虑到加密货币持有率和实验比率的不断增长，＂用加密货币支付＂按钮可以极大地推动销售。
　　本文演示如何在不依赖第三方服务的情况下将自定义、安全的加密支付方法集成到任何在线商店中。编码和维护智能合同需要相当繁重的工作，我们正在把这项工作移交给块环链建设者常用的工具链 Truffle 套件。为了在开发期间和应用程序后端提供对区块链节点的访问，我们依赖于 Infura 节点，这些节点以慷慨的免费层提供对以太网络的访问。一起使用这些工具将使开发过程更加容易。 场景: Amethon 书店
　　我们的目标是为可下载的电子书建立一个店面，接受以太区块链的本地货币(＂以太＂)和 ERC20稳定币(以美元挂钩的支付令牌)作为一种支付方法。从现在开始，我们称之为＂ Amethon＂。完整的实现可以在附带的 GitHub monorepo 中找到。所有 的代码都用Typescript 编写 并且能够被 yarn build   或 yarn dev 命令编译。
　　我们将一步一步地指导您完成这个过程，但是熟悉智能契约、以太坊以及 Solidy 编程语言的最低知识可能有助于您一起阅读。我们建议您首先阅读一些基础知识，以熟悉生态系统的基本概念。 Application Structure
　　存储后端是作为一个 CRUD API 构建的，它本身不连接到任何区块链。它的前端触发对该 API 的支付请求，客户使用他们的加密钱包完成。
　　Amethon 被设计成一个＂传统的＂电子商务应用程序，它负责业务逻辑，除了支付本身之外不依赖任何上链数据。在结帐过程中，后端发出 PaymentRequest 对象，这些对象携带一个唯一标识符(例如＂发票号码＂) ，用户将其附加到支付交易中。
　　后台守护进程侦听各自的契约事件，并在检测到付款时更新商店的数据库。
　　Amethon 的支付结算 收款人合约
　　在 Amethon 中心，PaymentReceiversmart 合同代表店面所有者接受和托管付款。
　　每次用户向 PaymentReceiver 合同发送资金时，都会发送一个 PaymentReceivedevent，其中包含有关支付的来源(客户的 Etherum 帐户)、其总价值、所使用的 ERC20令牌合同地址以及指向后端数据库条目的 paymentID 的信息。
　　TypeScript-JSX   event PaymentReceived(     address indexed buyer,     uint256 value,     address token,     bytes32 paymentId   );
　　以太合同的作用类似于基于用户(即＂外部拥有＂/EOA)的帐户，并在部署时获得自己的帐户地址。接收本地以太货币需要实现接收和回退功能，这些功能在某人将以太资金转移到合同时被调用，并且没有其他功能签名与调用匹配:
　　TypeScript-JSX  receive() external payable {     emit PaymentReceived(msg.sender, msg.value, ETH_ADDRESS, bytes32(0));   }    fallback() external payable {     emit PaymentReceived(       msg.sender, msg.value, ETH_ADDRESS, bytes32(msg.data));   }
　　官方的 Soliity 文档指出了这些函数之间的细微差别: 当传入的事务不包含额外数据时，就会调用 Receiveis，否则就会调用回退。以太本身的本地货币不是 ERC20令牌，除了作为计数单位外没有其他用途。然而，它有一个可识别的地址(0xEeeeeEeeEeeEeeEeeEeeEeeEeeEeeeeeeeeeeEEEE) ，我们使用信号以太支付在我们的 PaymentReceivedevents。
　　然而，以太传输有一个主要的缺点: 接收时允许的计算量非常低。客户送来的天然气只能让我们发出一个事件，但不能将资金重定向到店主的原始地址。因此，接收者契约保留所有传入的以太，并允许商店所有者在任何时候将它们释放到自己的帐户中:
　　TypeScript-JSX  function getBalance() public view returns (uint256) {   return address(this).balance; }  function release() external onlyOwner {   (bool ok, ) = _owner.call{value: getBalance()}(＂＂);   require(ok, ＂Failed to release Eth＂); }
　　由于历史原因，接受 ERC20令牌作为支付稍微有点困难。在2015年，最初规范的作者无法预测即将到来的需求，因此使 ERC20标准的接口尽可能简单。最值得注意的是，ERC20合同不能保证通知收件人有关转移的信息，所以当 ERC20令牌被转移到我们的 PaymentReceiver 时，它无法执行代码。
　　ERC20生态系统已经发生了演变，现在包括额外的规格。例如，EIP1363标准解决了这个问题。不幸的是，你不能依靠主要的稳定币平台来实现它。
　　因此，Amethon 必须以＂经典＂的方式接受 ERC20象征性付款。契约不会在不知情的情况下＂丢弃＂令牌，而是代表客户负责传输。这就要求用户首先允许合同处理一定数额的资金。这不方便地要求用户在与实际支付方法交互之前首先将 Approval 事务传输到 ERC20令牌合同。EIP-2612可能会改善这种情况，但是，我们必须按照旧的规则玩暂时。
　　TypeScript-JSX   function payWithErc20(     IERC20 erc20,     uint256 amount,     uint256 paymentId   ) external {     erc20.transferFrom(msg.sender, _owner, amount);     emit PaymentReceived(       msg.sender,       amount,       address(erc20),       bytes32(paymentId)编译、部署和可变安全性
　　有几个工具链允许开发人员编译、部署和与 Etherum 智能契约进行交互，但最先进的工具链之一是 Truffle Suite。它带有一个基于 Ganache 的内置开发块链和一个迁移概念，允许您自动化并安全地运行契约部署。
　　在＂真正的＂区块链基础设施上部署合同，比如以太网测试网，需要两件事: 一个连接到区块链节点的以太网提供商和一个账户的私钥/钱包助记符或者一个可以代表一个账户签署交易的钱包连接。该帐户还需要有一些(测试网)以太在它支付天然气费用期间部署。
　　MetaMask 就是干这个的。创建一个新的帐户，你不会使用其他任何东西，但部署(它将成为＂所有者＂的合同) ，并与一些以太使用你首选的测试网的水龙头(我们推荐 Paradigm)。通常情况下，你现在可以导出账户的私钥(＂ Account Details＂> ＂ Export Private Key＂)并将其与你的开发环境连接起来，但是为了规避这个工作流程所隐含的所有安全问题，Truffle 提供了一个专用的仪表板网络和网络应用程序，可以用来在浏览器中使用 Metamask 签署合同部署之类的事务。要启动它，在一个新的终端窗口中执行 truffle dashboard，并使用一个带有活动 Metamask 扩展的浏览器访问 http://localhost:24012/。
　　使用 truffle 的仪表板在不暴露私钥的情况下对事务进行签名
　　Amethon 项目还依赖于各种秘密设置。注意，由于 dotenv-flow 的工作方式，。Envfiles 包含示例或公开可见的设置，这些设置被 gitignored.env.localfiles 覆盖。收到。并覆盖它们的值。
　　若要将本地环境连接到以太网络，请访问同步块链节点。当然，你可以下载其中一个客户端，然后等待它在你的机器上同步，但是将你的应用程序连接到 Ethereum 的节点上要方便得多，这些节点是以服务的形式提供的，其中最著名的是 Infura。他们的免费层为您提供三种不同的访问密钥和每月10万的 RPC 请求，支持范围广泛的以太网络。
　　注册之后，注意你的 INFURA 密钥并把它放在你的合同中. env.localas INFURA _ KEY。
　　如果你想与合同互动，例如在 Kovan 网络上，只需在所有的 truffle 命令中添加相应的 truffle 配置和 -network Kovan 选项。您甚至可以启动一个交互式控制台: 纱松露控制台——网络 Kovan。在本地测试契约不需要任何特殊的设置过程。为了让我们的生活变得简单，我们使用 Metamask 通过truffle 仪表板提供者注入的提供者和签名者。
　　改变为contracts   文件夹 并运行 yarn truffle develop.  这将启动一个本地区块链与预先资助的帐户，并打开一个连接的控制台上。要将你的 Metamask 钱包连接到开发网络，使用 http://localhost:9545作为其 RPC 端点创建一个新的网络。当链条开始时，请注意列出的帐户: 您可以导入他们的私人密钥到您的 Metamask 钱包发送交易代表您的本地区块链。
　　输入compile来一次编译所有契约，并使用migrate将它们部署到本地链中。 你可以通过请求它们当前部署的实例来与契约交互，并像这样调用它的函数:
　　TypeScript-JSX  pr = await PaymentReceiver.deployed() balance = await pr.getBalance()
　　一旦您对结果感到满意，您就可以将它们部署到公共测试网(或 mainnet)上，以及:
　　Shell  yarn truffle migrate --interactive --network dashboardThe Backend存储 API/CRUD
　　我们的后端提供了一个 JSON API 来与高层次的支付实体进行交互。我们决定使用 TypeORM 和本地 SQLite 数据库来支持 Books 和 PaymentRequest 的实体。书籍代表我们商店的主要实体，有一个零售价格，以美分表示。为了最初在数据库中添加书籍，可以使用 companyingSeed.ts 文件。编译完文件后，可以通过 invokingnode build/Seed.js 执行它。
　　TypeScript  //backend/src/entities/Book.ts import { Entity, Column, PrimaryColumn, OneToMany } from ＂typeorm＂; import { PaymentRequest } from ＂./PaymentRequest＂;  @Entity() export class Book {   @PrimaryColumn()   ISBN: string;    @Column()   title: string;
　　注意: 在任何计算机系统上都强烈建议不要将货币值存储为浮动值，因为对浮动值进行操作肯定会引入精度错误。这也是为什么所有的加密令牌都使用18位十进制数，而 Soliity 甚至没有 float 数据类型的原因。1以太实际上代表＂10000000000000000000＂为最小的以太单位。
　　对于打算从 Amethon 购买书籍的用户，首先通过调用/books/: isbn/orderpath 为他们的商品创建一个个人支付请求。这将创建一个新的唯一标识符，必须随每个请求一起发送。
　　我们在这里使用的是普通整数，但是，对于实际的用例，您将使用更复杂的东西。唯一的限制是 id 的二进制长度必须适合32字节(uint256)。EachPaymentRequest 继承书籍的零售价值(以美分为单位) ，并记录客户的地址，在购买过程中确定 Hash 和 paidUSDCentwill。
　　TypeScript  //backend/src/entities/PaymentRequest.ts @Entity() export class PaymentRequest {   @PrimaryGeneratedColumn()   id: number;    @Column(＂varchar＂, { nullable: true })   fulfilledHash: string | null;    @Column()   address: string;    @Column()   priceInUSDCent: number;    @Column(＂mediumint＂, { nullable: true })   paidUSDCent: number;    @ManyToOne(() => Book, (book) => book.payments)   book: Book; }
　　创建 PaymentRequesttity 的初始订单请求如下:
　　TypeScript  POST http://localhost:3001/books/978-0060850524/order Content-Type: application/json  {   ＂address＂: ＂0xceeca1AFA5FfF2Fe43ebE1F5b82ca9Deb6DE3E42＂ } ---> {   ＂paymentRequest＂: {     ＂book＂: {       ＂ISBN＂: ＂978-0060850524＂,       ＂title＂: ＂Brave New World＂,       ＂retailUSDCent＂: 1034     },     ＂address＂: ＂0xceeca1AFA5FfF2Fe43ebE1F5b82ca9Deb6DE3E42＂,     ＂priceInUSDCent＂: 1034,     ＂fulfilledHash＂: null,     ＂paidUSDCent＂: null,     ＂id＂: 6   },   ＂receiver＂: ＂0x7A08b6002bec4B52907B4Ac26f321Dfe279B63E9＂ }区块链监听器后台服务
　　查询区块链的状态树不会花费客户机任何气体，但节点仍然需要计算。当这些操作变得计算量太大时，它们可能会超时。对于实时交互，强烈建议不要轮询链状态，而是监听事务发出的事件。这需要使用支持 WebSocket 的提供程序，因此一定要使用以 wss://as URL 方案开头的 Infura 端点，用于后端的 PROVIDER _ RPC 环境变量。然后，您可以启动后端的 daemon.tsscript 并在任何链上侦听 PaymentReceivedevents:
　　TypeScript  //backend/src/daemon.ts   const web3 = new Web3(process.env.PROVIDER_RPC as string);   const paymentReceiver = new web3.eth.Contract(     paymentReceiverAbi as AbiItem[],     process.env.PAYMENT_RECEIVER_CONTRACT as string   );    const emitter = paymentReceiver.events.PaymentReceived({     fromBlock: ＂0＂,   });
　　注意我们是如何用一个应用二进制接口实例化契约实例的。Soliity 编译器生成 ABI，并为 RPC 客户机提供有关如何编码事务以调用和解码智能契约上的函数、事件或参数的信息。
　　一旦实例化，您就可以在契约的 PaymentRecected 日志(从块0开始)上钩住一个侦听器，并在收到后处理它们。
　　因为 Amethon 支持 Ether 和 stablecoin (＂ US＂)支付，所以守护进程的 handlePaymentEventmethod 首先检查用户支付中使用了哪个令牌，并在需要时计算其美元价值:
　　TypeScript  //backend/src/daemon.ts const ETH_USD_CENT = 2_200 * 100; const ACCEPTED_USD_TOKENS = (process.env.STABLECOINS as string).split(＂,＂); const NATIVE_ETH = ＂0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE＂;  const handlePaymentEvent = async (event: PaymentReceivedEvent) => {   const args = event.returnValues;   const paymentId = web3.utils.hexToNumber(args.paymentId);   const decimalValue = web3.utils.fromWei(args.value);   const payment = await paymentRepo.findOne({ where: { id: paymentId } });   let valInUSDCents;   if (args.token === NATIVE_ETH) {     valInUSDCents = parseFloat(decimalValue) * ETH_USD_CENT;   } else {     if (!ACCEPTED_USD_TOKENS.includes(args.token)) {       return console.error(＂payments of that token are not supported＂);     }     valInUSDCents = parseFloat(decimalValue) * 100;   }    if (valInUSDCents < payment.priceInUSDCent) {     return console.error(`payment [${paymentId}] not sufficient`);   }    payment.paidUSDCent = valInUSDCents;   payment.fulfilledHash = event.transactionHash;   await paymentRepo.save(payment); };The Frontend
　　我们书店的前端是建立在官方的创建反应应用程序模板与类型支持，并使用 Tailwind 的基本样式。它支持所有已知的 CRA 脚本，因此您可以在创建自己的脚本之后通过纱线启动本地脚本。本地文件，包含之前创建的支付接收方和 stablecoin 合同地址。
　　注意: CRA5将他们的 webpack 依赖关系转移到了一个不再支持浏览器中节点填充的版本。这打破了今天几乎所有与以太坊相关的项目的构建。避免弹出的一个常见解决方案是挂钩到 CRA 构建过程中。我们正在使用 response-app-rewire，但是你可以简单地呆在 CRA4，直到社区提出一个更好的解决方案。连接 WEB3钱包
　　任何 Dapp 的关键部分都是连接到用户的钱包。您可以尝试按照正式的 MetaMask 文档手动连接该进程，但我们强烈建议使用适当的 React 库。我们发现 Noah Zinsmeister 的 web3反应是最好的。检测和连接 web3客户端归结为以下代码(ConnectButton.tsx) :
　　TypeScript  //frontend/src/components/ConnectButton.ts import { useWeb3React } from ＂@web3-react/core＂; import { InjectedConnector } from ＂@web3-react/injected-connector＂; import React from ＂react＂; import Web3 from ＂web3＂;  export const injectedConnector = new InjectedConnector({   supportedChainIds: [42, 1337, 31337], //Kovan, Truffle, Hardhat });  export const ConnectButton = () => {   const { activate, account, active } = useWeb3React();    const connect = () => {     activate(injectedConnector, console.error);   };    return active ? (     connected as: {account}   ) : (            Connect        ); };
　　通过将应用程序的代码封装在 < Web3ReactProvider getLibrary = { getWeb3Library } > 上下文中，您可以从任何组件使用 useWeb3Reacthook 访问 web3提供程序、帐户和连接状态。由于 Web3React 与所使用的 web3库(Web3.js 或 ethers.js)是不可知的，因此您必须提供一个回调，以生成一个连接的＂库＂:
　　TypeScript-JSX  //frontend/src/App.tsx import Web3 from ＂web3＂; function getWeb3Library(provider: any) {   return new Web3(provider); }支付流程
　　从 Amethon 后端加载可用的图书后，< BookView > 组件首先检查该用户的付款是否已经处理，然后显示打包在 < PaymentOptions > 组件中的所有支持的付款选项。Paying With ETH
　　< PayButton > 负责启动对 PaymentReceiveragreement 的直接以太传输。由于这些调用并不直接与契约接口交互，我们甚至不需要初始化契约实例:
　　TypeScript-JSX  //frontend/src/components/PayButton.tsx const weiPrice = usdInEth(paymentRequest.priceInUSDCent);  const tx = web3.eth.sendTransaction({   from: account, //the current user   to: paymentRequest.receiver.options.address, //the PaymentReceiver contract address   value: weiPrice, //the eth price in wei (10**18)   data: paymentRequest.idUint256, //the paymentRequest＂s id, converted to a uint256 hex string }); const receipt = await tx; onConfirmed(receipt);
　　如前所述，由于新的事务带有 msg.data 字段，Soliity 的约定触发 PaymentReceiver 的回退()外部支付函数，该函数发出一个带有 Ether 令牌地址的 PaymentReceivedevent。这由被守护的链监听器接收，该监听器相应地更新后端的数据库状态。
　　静态助手函数负责将当前的美元价格转换为以太值。在一个真实的场景中，从值得信赖的第三方(如 Coingecko)或像 Uniswap 这样的 DEX 查询汇率。这样做允许您扩展 Amethon 以接受任意令牌作为支付。
　　TypeScript  //frontend/src/modules/index.ts const ETH_USD_CENT = 2_200 * 100; export const usdInEth = (usdCent: number) => {   const eth = (usdCent / ETH_USD_CENT).toString();   const wei = Web3.utils.toWei(eth, ＂ether＂);   return wei; };用 ERC20稳定币支付
　　由于前面提到的原因，从用户的角度来看，ERC20令牌中的支付稍微复杂一些，因为不能简单地删除契约中的令牌。像几乎所有具有类似用例的人一样，我们必须首先请求用户允许我们的 PaymentReceiver 合同转移他们的资金，并调用代表用户转移请求资金的实际 payWithEerc20方法。
　　下面是 PayWithStableButton 对选定的 ERC20令牌授予权限的代码:
　　TypeScript  //frontend/src/components/PayWithStableButton.tsx const contract = new web3.eth.Contract(   IERC20ABI as AbiItem[],   process.env.REACT_APP_STABLECOINS );  const appr = await coin.methods   .approve(     paymentRequest.receiver.options.address, //receiver contract＂s address     price // USD value in wei precision (1$ = 10^18wei)   )   .send({     from: account,   });
　　请注意，设置 ERC20令牌的契约实例所需的 ABI 接收一般的 IERC20 ABI。我们使用从 OpenZeppelin 的官方库中生成的 ABI，但是任何其他生成的 ABI 都可以完成这项工作。在批准转让后，我们可以开始付款:
　　TypeScript-JSX  //frontend/src/components/PayWithStableButton.tsx const contract = new web3.eth.Contract(   PaymentReceiverAbi as AbiItem[],   paymentRequest.receiver.options.address ); const tx = await contract.methods   .payWithErc20(     process.env.REACT_APP_STABLECOINS, //identifies the ERC20 contract     weiPrice, //price in USD (it＂s a stablecoin)     paymentRequest.idUint256 //the paymentRequest＂s id as uint256   )签署下载请求
　　最后，我们的客户可以下载他们的电子书。但是有一个问题: 既然我们没有＂登录＂用户，我们如何确保只有真正为内容付费的用户才能调用我们的下载路径？答案是加密签名。在将用户重定向到我们的后端之前，< DownloadButton > 组件允许用户签署一个独特的消息，该消息被提交作为帐户控制的证明:
　　TypeScript-JSX  //frontend/src/components/DownloadButton.tsx const download = async () => {   const url = `${process.env.REACT_APP_BOOK_SERVER}/books/${book.ISBN}/download`;    const nonce = Web3.utils.randomHex(32);   const dataToSign = Web3.utils.keccak256(`${account}${book.ISBN}${nonce}`);    const signature = await web3.eth.personal.sign(dataToSign, account, ＂＂);    const resp = await (     await axios.post(
　　后端的下载路由可以恢复签名者的地址，方法是按照与用户以前相同的方式组合消息，并使用消息和提供的签名调用加密套件的 ecRecovery 方法。如果恢复的地址与我们数据库中已完成的 PaymentRequest 匹配，我们知道我们可以允许访问请求的电子书资源:
　　TypeScript  //backend/src/server.ts app.post(   ＂/books/:isbn/download＂,   async (req: DownloadBookRequest, res: Response) => {     const { signature, address, nonce } = req.body;      //rebuild the message the user created on their frontend     const signedMessage = Web3.utils.keccak256(       `${address}${req.params.isbn}${nonce}`     );
　　这里提供的帐户所有权证明仍然不是完全正确的。任何知道所购物品的有效签名的人都可以成功地调用下载路由。最后的修复方法是首先在后端上创建随机消息，然后让客户签名并批准它。由于用户无法理解他们应该签署的混乱的十六进制代码，他们不会知道我们是否会欺骗他们签署另一个有效的交易，这可能会危及他们的帐户。
　　虽然我们已经通过使用 web3的 eth.Personal.signmethod 避免了这种攻击向量，但是最好以人性化的方式显示要签名的消息。这就是 EIP-712达到的目标ーー MetaMask 已经支持这一标准。结论及下一步
　　对于开发者来说，接受电子商务网站的付款从来都不是一件容易的事情。尽管 web3生态系统允许店面接受数字货币，但独立于服务的插件解决方案的可用性不足。本文演示了一种安全、简单和自定义的方法来请求和接收加密支付。
　　还有进一步发展的空间。以太网上 ERC20传输的天然气成本远远超过我们的账面价格。低价物品的加密支付在天然气友好的环境中是有意义的，比如 Gnosis Chain (他们的＂本地＂以太货币是 DAI，所以你甚至不用担心稳定币的转移)或者 Arbitrum。您还可以使用购物车签出来扩展后端，或者使用 DEXes 将任何传入的 ERC20令牌交换到您首选的货币。
　　毕竟，web3的承诺是允许没有中间商的直接货币交易，并为希望吸引懂加密技术的客户的在线商店增加重大价值。