Shopify App的订阅和支付流程

浅墨momo
33 阅读5分钟

Shopify的Pricing模式

Shopify的Pricing分为两种模式，Managed Pricing（托管定价）和Manual Pricing（手动定价）。

托管模式比较简单，Shopify App上架前默认选择的就是托管定价方案，不需要开发者手动写Pricing页面的UI，也不需要调用Billing API来实现订阅支付的逻辑，只需要在Shopify Partner后台定义好自己App的定价方案，客户点击订阅入口后直接跳转到Shopify Admin的一个页面，如下图所示。

接下来我们重点说一下手动定价。

手动定价模式

由于Shopify后台默认是托管定价的，所以我们需要首先在Partner后台改成手动定价方案，但是这个入口相当难找，接下来我用一些截图来说明这个入口在哪里。

第一步：进入Shopify Partner后台，选择左侧菜单里的App distribution中的All apps，然后选择自己的App点击进入

第二步：在左侧菜单选择Distribution，找到Manage submission点击进入App Store review页面

第三步：点击Create按钮创建一个Language Listing，如果已经创建过了，这里应该是Edit

第四步：在Language listing页面，选择左侧菜单里的Pricing Details滚动到Pricing Details模块，点击Manage按钮进入Pricing的管理页面

第五步：进入Pricing管理页面后，点击右上角Settings按钮，进入Settings页面，选择Manual pricing，这样就模式切换成功了

需要注意一点的是，当我们在App代码里调用Billing API调起支付页面时，如果你已经创建了上面流程中提到Language Listing，但是没有切换成Manual pricing模式的话，调用是会报错的。

订阅支付流程

我们开发好了这个Pricing页面的UI后，当点击Select按钮时需要调起Shopify的支付页面，那么这个功能如何实现呢？

接下来我介绍一个通用的方案，供大家参考，只需要简单的3步就可以实现。

1. 创建一个subscribe的api

在Remix项目的routes目录下创建一个文件：api.subscribe.tsx，这个后端api里面主要是调用订阅的GraphQL，需要传入一些参数，主要有订阅计划的名称（name）、订阅成功后的跳转url（returnUrl）、是否是测试模式（test）、订阅的价格信息（lineItems）等等。

mutation appSubscriptionCreate($name: String!, $lineItems: [AppSubscriptionLineItemInput!]!, $returnUrl: URL!, $test: Boolean) {
    appSubscriptionCreate(name: $name, lineItems: $lineItems, returnUrl: $returnUrl, test: $test) {
      appSubscription {
        id
      }
      confirmationUrl
      userErrors {
        field
        message
      }
    }
  }

需要注意的是如果你的App还没上架，这里test需要传true，为了方便审核人员进行订阅测试，因为订阅是审核过程中非常重要的一环，如果流程走不通，Shopify会打回来让你修改的。

2. 调用subscribe api

在Pricing页面点击订阅按钮后，调用上面定义的subscribe api，传入订阅需要的参数。当subscribe api返回成功后，就可以跳转到Shopify官方提供的确认支付的页面了。

const response = await fetch('/api/subscribe', {
    method: 'POST',
    body: formData
  });
  
const data = await response.json();
if (data.success && data.confirmationUrl) {
  // 使用 top.location.href 确保在嵌入式应用中正确跳转
  if (window.top) {
    window.top.location.href = data.confirmationUrl;
  } else {
    window.location.href = data.confirmationUrl;
  }
} else {
  console.error('Subscription failed:', data.message);
}

因为上面test模式传的true，所以这里上面会提示You will not be billed for this test charge，这样我们就可以直接点击Approve按钮进行测试。

3. 读取订阅计划

当上述支付流程成功后，会根据你传入的returnUrl调回到你的App页面，你可以在对应的页面调用GraphQL读取已订阅的计划信息，GraphQL语句如下。

query {
currentAppInstallation {
  activeSubscriptions {
    ...
  }
}

读取到计划的详细信息后，就可以根据这些信息做一些功能分级的限制了。

取消订阅的流程

Shopify官方要求，如果有订阅支付功能，必须有取消订阅的入口，取消订阅流程比订阅更简单，只需要2步

1. 创建一个取消订阅的api

同样在Remix项目的routes目录下创建一个文件：api.cancel-subscribe.tsx，这个后端api里面主要做了2件事情，一是查询当前订阅的计划，二是取消这个计划的订阅，我分别把这两个GraphQL语句写在下面。

# 查询计划
query {
    currentAppInstallation {
      activeSubscriptions {
        id
        name
      }
    }
  }
  
# 取消订阅
mutation appSubscriptionCancel($id: ID!) {
    appSubscriptionCancel(id: $id) {
      appSubscription {
        id
        status
      }
      userErrors {
        field
        message
      }
    }
  }

2. 调用取消订阅api

在Pricing页面点击取消订阅后，调用这个api，

const response = await fetch('/api/cancel-subscription', {
    method: 'POST'
});

这样就可以成功地取消订阅了。

以上分别介绍了订阅支付和取消订阅的流程，大家可以实践一下，这是我们开发的Shopify App的最重要的模块了，只有上线了这个功能，我们的App才能有收入进账。因为涉及到的代码比较多，文章里面无法将代码全部贴上来，所有的源码可以在下面的知识星球里面进行查看。

真诚邀请

如果你：正在做 Shopify 相关的开发，或者准备入坑，或者已经被各种坑折磨到怀疑人生，那我真心邀请你加入这个知识星球。我们一起：把零散的经验沉淀下来，把孤独的开发者聚在一起，一点一点，做出属于国内开发者自己的 Shopify 社区。

欢迎你来。

我们星球见 🤝 t.zsxq.com/N0wY8

avatar
文章
阅读
粉丝