Shopify插件部署教程

Pay Protocol Shopify 支付插件可以为您的客户提供无缝的结账体验。本教程将指导您完成插件部署的步骤。

0. 前提条件

Shopify 商店
Pay Protocol 商户账户，您可以阅读这里的介绍。
从 Pay Protocol 管理后台获取商户 API Key，参考此指南。

1. 添加 Pay Protocol 支付方式

第一步是在您的 Shopify 商店中添加 Pay Protocol 作为手动支付方式。

登录到您的 Shopify 管理站点，在管理页面左下角的选择设置。

Shopify 管理站点

在设置页面中点击收款。

Shopify 设置页面

向下滚动到手动支付方式部分，点击添加手动支付方式并选择创建自定义支付方式。

创建自定义支付方式

在自定义支付方式名称字段中输入 Cryptocurrency Payments - Pay Protocol，并填写其他两个字段，然后点击激活。

激活自定义支付方式

其他详细信息：这是将显示给您的客户的支付方式说明。复制下面的文本并将其粘贴到字段中（可以根据实际情况自行修改）。

We accept payments in multiple cryptocurrencies such as ETH, USDT, BNB and TRX. Support MetaMask, Coinbase, TronLink and more wallets. Please tap "Complete Order" to pay.

付款说明：这是将显示给您的客户的支付方式说明。复制下面的文本并将其粘贴到字段中。

After clicking “Cryptocurrency Payment”, you will be redirected to Pay Protocol - Payment Gateway to complete your purchase securely.

注意

请确保收款方式名称包含 Pay Protocol，否则插件将无法正常工作。

现在您可以在手动付款方式部分中看到 Pay Protocol 支付方式。

VAR::BRAND_NAME 支付方式

2. 创建私有应用

此步骤的目的是同步和更新您 Shopify 商店中订单的支付状态。

在设置中点击应用和销售渠道，点击开发应用。

开发应用

点击创建应用，在应用名称字段中输入 Pay Protocol Payment Gateway，然后点击创建应用。

创建应用

应用创建后，会展示以下页面，点击配置后台 API 范围。

应用页面

搜索并选择以下权限，然后点击保存。

read_orders, write_orders, write_order_edits, read_order_edits

配置后台 API 范围

选择 API 凭据选项卡，点击安装应用。

安装应用

应用安装之后，会展示以下页面。点击显示一次令牌，复制并保存后台 API 访问令牌以备后续使用。

显示一次令牌

注意

为保护您的数据，您的后台 API 令牌只能显示一次。请复制您的后台 API 访问令牌并将其保存在安全位置。

将您的商店信息发送到 bd@payprotocol.network

您在 Pay Protocol 管理后台的商户名称：您的公司名称
您的 Shopify 商店域名：https://your-store.myshopify.com
您的 Shopify 商店后台 API 访问令牌：您在第 6 步中复制的后台 API 访问令牌
您的 Shopify 商店报价货币：USD、JPY、HKD 等

3. 添加 Pay Protocol Shopify 插件

这一步目的是在订单状态页面调起 Pay Protocol 支付插件。 本插件只支持英文版的结账页面。

打开管理页面左下角的设置，点击结账。

Shopify 设置页面

向下滚动到订单状态页面部分，复制下面的代码并将其粘贴到自定义脚本字段中。

<style>.os-header__hanging-icon,.step__footer__continue-btn,#main-header {visibility: hidden;}
 .os-step__special-description {display: none;}</style>
<noscript><strong style="color:red">We're sorry but it doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript>
<script id="payprotocol-shopify" data-sandbox="false" data-api="your-api-key" src="https://plugin.payprotocol.network/shopify.js"></script>