跳至内容
WebViewGold 从 Vibe Coding 到 App Store
中文
获取 WebViewGold

Replit + Apple Wallet

从您的 Replit 应用添加 Apple Wallet 卡券:门票、会员卡、优惠券

如果您的 Replit 应用销售活动门票、运营会员计划或发放优惠券,这些卡券就应该放进 Apple Wallet(Apple 钱包),在需要的时候出现在锁定屏幕上。WebViewGold 补上了缺失的一环:把 .pkpass URL 中的 https:// 换成 addpkpass://,iOS 就会显示原生的“添加到 Apple 钱包”面板。卡券仍需您自己创建并签名;在 Android 上,Google Wallet 则通过它自己的网页保存链接来实现。

每个平台一次性 $109 起,或由我们的团队全程代劳,$698 起。

  • 审核通过保证 – 否则 14 天内退款
  • 无需编程
  • 一次性付费,免费更新
  • 7×24 小时人工支持
  • 2014 年起德国出品 · ISO 27001

应用内“添加到 Apple 钱包”的工作原理

一个链接

<a href="addpkpass://yourdomain.com/passes/ticket-123.pkpass">:WebViewGold 会把它还原为 https:// URL,并在应用内浏览器标签页中打开;该标签页能识别卡券,并显示原生的“添加到 Apple 钱包”预览。

卡券由您创建并签名

.pkpass 文件是一个经过签名的文件包(pass.json、图片、清单文件和签名),用您 Apple Developer 账号中自己的 Pass Type ID 证书制作。您可以在自己的服务器上生成,也可以使用卡券服务;WebViewGold 负责把它交给 Wallet。

正确地提供文件

HTTPS、MIME 类型 application/vnd.apple.pkpass,以及有效的签名。三者中任何一项出错,iOS 都无法显示预览,用户只会看到一条错误信息。

Android:Google Wallet

自 2024 年起,Google Wallet 可以导入许多 .pkpass 文件,但支持情况因设备和卡券而异,而且 addpkpass:// scheme 仅适用于 iOS。Android 上可靠的做法是用 Google Wallet API 创建 Google Wallet 卡券,并使用官方的“添加到 Google 钱包”按钮,它链接到 pay.google.com 上一个由您服务器签名的保存 URL。

给 Replit 的提示词

把这段粘贴到 Replit 中以实现 Web 应用端。检查结果,发布,然后在 WebViewGold 应用中测试。

粘贴到 Replit Agent 的提示词
为这个 Replit 应用添加会员卡类 Apple Wallet 卡券(WebViewGold iOS 封装)。在后端创建 POST /api/passes:为已登录的 Replit Auth 用户构建一张 storeCard 卡券,包含会员姓名、以二维码呈现的会员编号和当前积分,用来自 Replit Secrets 的 Pass Type ID 证书、私钥和 WWDR 证书签名,把序列号和随机下载令牌保存到 Postgres 的 passes 表中,并返回下载 URL。添加 GET /passes/:serial.pkpass?t=TOKEN,以 Content-Type application/vnd.apple.pkpass 流式返回文件,令牌错误时返回 404。在 React 前端的会员页面显示 Apple 的“添加到 Apple 钱包”徽标;在 iOS 应用内(navigator.userAgent 包含我的 WebViewGold 标识以及 iPhone 或 iPad),导航到把 https:// 替换为 addpkpass:// 的下载 URL;在 Safari 中使用 https URL;在 Android 上全屏显示会员二维码。在卡券中加入 webServiceURL 和 authenticationToken,并为 Apple 的卡券 Web 服务路由留一个 TODO,以便日后推送积分变化。

出色的工作!无需任何编码就能轻松完成。简单快捷!创作者也提供了大力帮助!

卢卡斯·杜波依斯(Lucas Dubois) · CodeCanyon

适合 Vibe Coding 应用的卡券

Apple Wallet 有五种卡券样式:活动门票、商店卡、优惠券、登机牌和通用卡券。最常用到的是:

活动门票

工作坊、线下聚会、音乐会、课程。一个包含门票 ID 的二维码、日期和地点,再设置一个相关日期,让卡券在活动开始前出现在锁定屏幕上。

会员卡和集点卡

咖啡馆、美发店、健身房。一张以条形码显示会员编号、带积分余额的商店卡,之后还可以更新。

优惠券和优惠活动

在柜台扫码或在结账时出示的折扣码,带有用户看得到的到期日期。

会员资格和门禁

俱乐部会员、联合办公空间门禁、VIP 或季票:身份识别正是 Apple 明确列出的用途之一。

为 Replit 应用添加 Wallet 卡券

第一种卡券类型大约需要一天;最耗时的是证书。

  1. 创建 Pass Type ID 和证书

    在 Apple Developer 账号的“证书、标识符和描述文件”(Certificates, Identifiers & Profiles)中注册一个 Pass Type ID(例如 pass.com.yourcompany.tickets),创建对应的证书,并下载 Apple 的 WWDR 中间证书。两者都放在您的服务器上,绝不放进客户端。

  2. 在服务器上生成卡券

    在 Express/Flask/FastAPI 后端,搭配 Replit Postgres 或外部数据库 中用一个服务器函数构建 pass.json(序列号、包含门票代码的条形码、相关日期或地点)并签名,例如在 Node 上使用 passkit-generator,或者通过托管的卡券 API。把序列号和订单一起保存。

  3. 用令牌保护下载

    应用内浏览器标签页可能不与 WebView 共享登录 Cookie,所以请给卡券 URL 加上一个签名的短期令牌,而不是依赖登录会话。

  4. 添加按钮

    使用 Apple 官方的“添加到 Apple 钱包”徽标。在 iOS 应用内用 addpkpass:// 链接到卡券;在 Safari 中,普通的 https 链接原生即可使用;在 Android 上则显示 Google Wallet 按钮或 PDF 门票。

  5. 保持卡券最新(可选)

    在 pass.json 中添加 webServiceURL 和 authenticationToken,并实现 Apple 的卡券 Web 服务;当检票口、座位或积分余额发生变化时,通过 APNs 通知设备,Wallet 就会下载新版本。

  6. 在真实 iPhone 上测试

    添加一张卡券,从锁定屏幕打开它,再试试过期的令牌和已作废的门票。确认条形码能被您在入口处实际使用的扫码设备识别。

一个适用于所有平台的辅助函数

您的服务器返回两个 URL,由页面选择合适的那个。YourAppToken 是 Config.swift / Config.java 中的自定义 User-Agent。

javascript
var ua = navigator.userAgent;
var inApp = ua.indexOf("YourAppToken") !== -1;
var isIOS = /iPhone|iPad|iPod/.test(ua);
var isAndroid = /Android/.test(ua);

// pass = {
//   pkpassUrl:     "https://yourdomain.com/passes/T-1042.pkpass?t=SIGNED_TOKEN",
//   googleSaveUrl: "https://pay.google.com/gp/v/save/SIGNED_JWT",   // 由您的服务器生成
//   pdfUrl:        "https://yourdomain.com/tickets/T-1042.pdf"
// }
function walletLink(pass) {
  if (isIOS && inApp) return pass.pkpassUrl.replace(/^https:\/\//, "addpkpass://");
  if (isIOS) return pass.pkpassUrl;                       // Safari 原生支持打开 .pkpass
  if (isAndroid && pass.googleSaveUrl) return pass.googleSaveUrl;
  return pass.pdfUrl;                                     // 桌面端和兜底方案
}

document.getElementById("add-to-wallet").href = walletLink(window.currentPass);

Android 和 Google Wallet

WebViewGold 没有专门的 Google Wallet API,而且 addpkpass:// scheme 仅适用于 iOS。走网页路线效果很好:

  • 在 Google Pay & Wallet Console 中创建一个发卡方账号,定义一个卡券类别(活动门票、会员卡、优惠或通用),并让您的服务器用服务账号签名一个 JWT。得到的就是 pay.google.com 上的一个保存链接。
  • 在 WebView 之外、用户已登录 Google 的地方打开这个链接:把 pay.google.com 添加到 Config.java 的 BROWSER_BLACKLIST 中,或者给链接加上 newtab: 前缀,并把 SPECIAL_LINK_HANDLING_OPTIONS 设为 2(URL 处理文档)。
  • 使用 Google 官方的“添加到 Google 钱包”按钮图稿并遵守其品牌指南,就像您在 iOS 上使用 Apple 的徽标一样。
  • 较新版本的 Google Wallet 也能导入 .pkpass 文件,但请把它当作需要在目标设备上测试的额外加分项,而不是主要方案:在 Android 应用内,.pkpass 链接不会交给 Wallet 处理。
  • 始终保留兜底方案:PDF 门票或屏幕上的二维码在任何设备上都能用。

常见问题

WebViewGold 会帮我创建 Wallet 卡券吗?

不会。WebViewGold 负责把卡券交给 Apple Wallet。.pkpass 文件的创建和签名在您的服务器或卡券服务中完成,使用的是您通过 Apple Developer Program 获得的 Pass Type ID 证书。

“添加到 Apple 钱包”在 Android 上能用吗?

Apple Wallet 只存在于 Apple 设备上。在较新的 Android 手机上,Google Wallet 能导入许多 .pkpass 文件,但支持情况不一,所以可靠的做法是通过 Google Wallet API 创建 Google Wallet 卡券,并在 WebView 之外、用户已登录 Google 的地方打开它的保存链接(Config.java 中的 BROWSER_BLACKLIST)。WebViewGold 没有专门的 Google Wallet API。

用户添加卡券后,我还能更新它吗?

可以,借助 Apple 的卡券 Web 服务:在 pass.json 中加入 webServiceURL 和 authenticationToken,Wallet 就会向您的服务器注册该设备。当检票口、座位或余额变化时,您通过 APNs 发送推送,Wallet 就会获取新版本。

为什么卡券会在应用内浏览器标签页中打开?

这个标签页能识别 .pkpass 内容类型,并显示原生的“添加到 Apple 钱包”预览。它可能不与主 WebView 共享 Cookie,因此卡券 URL 必须在没有应用登录会话的情况下也能使用,例如带上一个签名且会过期的令牌。

用户也能从网站上添加卡券吗?

可以。iPhone 和 Mac 上的 Safari 原生支持打开 .pkpass 链接,所以同一个 https URL 在网页上也能用;只有应用内才使用 addpkpass:// 前缀。

让您的应用上架商店的三种方式

结果相同,只是您需要投入的工作量不同。三种方式都附带审核通过保证和 7×24 小时人工支持。

自己动手

$109 每个平台,一次性付费

WebViewGold 许可证:一个现成的 Xcode 或 Android Studio 项目。粘贴您的 URL,设置名称和图标,开启所需功能,构建并提交。永久免费更新。

在主页查看方案

Cloud Builder

$349 每个许可证,一次性附加购买

无需 Mac、Xcode 或 Android Studio:在浏览器中完成配置,我们在云端构建两个应用,并将其交付到 App Store Connect 和 Play Console。

Cloud Builder 如何运作 试用免费演示

Full Service

$698 每个平台 $798

把您的 URL 和图标发给我们。我们的团队在 72 小时内完成配置、构建并交付您的应用,白标,附源码项目。两个平台共 $1,158。

Full Service 详情 服务提供方: WeSetupYourWebViewApp

冬季特惠价格有效期至 2026年12月31日。

准备好发布您的 Replit 应用了吗?

App Store & Google Play 审核通过保证 – 否则 14 天内退款

想直接交给我们?Full Service:我们在 72 小时内完成配置、构建并交付,每个平台 $698 起。有疑问?通过 7×24 小时在线聊天联系我们。

退款依据我们 FAQ 中列出的条件:应用因非内容原因被 Apple 和/或 Google 拒审,并在购买后 14 天内提出申请。