Shopify App 开发：商品支付流程完整链路测试

hauk0101
819 阅读3分钟

背景

在做 Shopify 项目开发的过程中，最核心的流程之一就是如何完成一个产品的购买流程，也就是订单的支付流程。尤其是对于国内开发者来说，海外信用卡支付流程相对来讲比较麻烦。好在 Shopify 官方提供了测试 Shopify Payments 的模式 和 Shopify 虚假网关。

本文主要利用 Shopify 虚假网关来向大家示例一个商品完整支付的流程。

目录

  • 准备工作
  • 配置虚假网关
  • 购买示例

准备工作

  • 确认你已经拥有一个开发商店，如果不知道如何创建开发商店，可以参考我之前的文章Shopify App 开发：快速搭建一个 App 应用，里面有关于如何创建一个开发商店的步骤。
  • 设置商店的预览密码

图1-1.png

  • 重新打开在线商店

图1-2.png

配置虚假网关

tips：之所以选择配置“虚假网关”的方式而不是使用“测试 Shopify Payments”，是因为后者需要公司相关的信息，且需要配置的东西会更繁琐一些，而前者则简单很多。

  • 默认情况下，虚假网关是开启的，也就是说创建好商店后，不需要额外配置。
  • 如果你想确认是否开启，或是想关闭，可以从下面入口进入。

    • 进入商店的左侧“设置”，记住是商店 admin 页面的“设置”，而不是 “Partners” 页面的“设置”。网页地址示例：https://admin.shopify.com/store/xxxxx/settings

      图2-1.png

    • 点击“收款”按钮，点击右边的“测试支付服务提供商”。

      图2-2.png

    • 可以看到已经开启状态的“虚假网关”。

      图2-3.png

    • 配置说明：从上图中可以看到，配置不同的信用卡号，可以模拟不同的状态：

      • 1：模拟的是支付成功的状态
      • 2：模拟的是支付失败的状态
      • 3：模拟的是网络错误的状态

购买示例

  • 通过访问我们的在线商店，任意选择一个商品，进入支付流程
  • 填写支付信息，测试地址可以随意网上搜索，只要能通过校验即可（建议邮箱填入一个可以收到邮件的邮箱，这样当你支付成功后，会收到 Shopify 自动发送的支付成功提示）

    • 个人信息部分

      图3-1.png

    • 信用卡部分（不同的信用卡数字，表示不同的测试状态，具体可以参考”配置虚假网关“部分的说明

      图3-2.png

  • 确认支付

    • 支付成功结果页面

      图3-3.png

    • 支付成功邮件通知

      图3-4.png

  • 至此我们完成了在 Shopify 测试商店中的支付流程，同时我们可以在店铺的 admin 后台的订单中看到我们刚才支付的订单数据。整个过程可以帮我们快速的跑通 Shopify 店铺的整个流程。

图4-1.png

参考文档

浏览知识共享许可协议

知识共享许可协议
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。

avatar
文章
阅读
粉丝