Bigcommerce支付网关设计

技术方案

技术方案参考

Bigcommerce内置常用支付网关，但不支持第三方支付网关接入

https://www.brihaspatitech.com/blog/bigcommerce-custom-payment-gateway-development/ （基本参照该文章思路）
https://support.bigcommerce.com/s/question/0D54O00006Sak3cSAB/integrating-etisalat-payment-gateway
https://support.bigcommerce.com/s/question/0D51B00005SK92zSAD/assistance-with-payment-gateway-api-set-up
https://support.bigcommerce.com/s/article/Optimized-Single-Page-Checkout
https://medium.com/bigcommerce-developer-blog/the-complete-guide-to-checkout-customization-on-bigcommerce-6b566bc36fa9

提炼关键点：

（1）Phase 1: Fetching BigCommerce order data

The BigCommerce order data is fetched by utilizing the BigCommerce Orders API endpoint.

This is done as soon as an order is generated by the customer and the thank you page is loaded.

难点：BigCommerce 在 thank you page 完成创单，前端如何监测，通过观察发现，创单完成后，thank you page 会调用以下两个接口：

• https://linastore.mybigcommerce.com/api/storefront/orders/110?include=payments,lineItems.physicalItems.socialMedia,lineItems.physicalItems.options,lineItems.digitalItems.socialMedia,lineItems.digitalItems.options
• https://linastore.mybigcommerce.com/api/storefront/checkout-settings

前端返回当前订单详细信息，后者返回BigCommerce 收银台相关配置信息

因此前端可以通过嵌入JS脚本，监测这两个接口是否调用完成，并获取到店铺和订单相关信息，提交到APP后台进行创单

前端解决方案：1、监听内置AJAX接口调用完成并获取返回数据；2、监听内置AJAX接口调用完成并再次自行手动调用

（2）Phase 2: Sending order information to the payment processor

APP后端获取到订单信息，通过API查询订单详细信息，再发送给我们的支付网关，返回收银台地址给前端，前端实现重定向跳转

（3）Phase 3: Processing payments and updating in BigCommerce

Payment Async Notification → BigCommerce APP → BigCommerce API 更新订单状态
Payment Callback Redirect → thank you page → 轮询查询状态并更新UI

（4）参考：https://support.bigcommerce.com/s/question/0D54O00006Sak3cSAB/integrating-etisalat-payment-gateway

BigCommerce doesn’t have a native support for Etisalat Payment Gateway. What you can do is inject an option for it in the Payments step of the checkout using JS. You can make use of MutationObserver to get through the stepped checkout process to make the injection happen.

（5）参考：https://support.bigcommerce.com/s/question/0D51B00005SK92zSAD/assistance-with-payment-gateway-api-set-up

One way to achieve what you're trying to do is use the JS Checkout SDK to build a custom presentation layer for checkout, then integrate an external gateway. You'd have to — of course — host your payment app externally outside of BigCommerce, and so you'd have to also programmatically move the shopper through checkout on BC. I've seen others do this with a hidden offline payment method that gets discretely selected so the customer can see a success message after their payment is processed with the external provider.

I want to add, @Abhi Hariparsad (Customer)​, that we don't really recommend doing this. Ultimately we want you to use a supported gateway. You circumvent a lot of issues and potentially PCI compliance violations by taking payments with our processors.

官方文档参考

• https://developer.bigcommerce.com/api-docs/apps/quick-start
• https://developer.bigcommerce.com/api-docs/apps/guide/intro
• https://developer.bigcommerce.com/api-reference
• https://developer.bigcommerce.com/api-docs

技术方案实现

基于以上参考技术方案，会遇到如下问题：

收银台支付模块

问题1：收银台页面的线上支付网关都需要输入银行卡信息，才能继续往后操作，那么如何跳转到 thank you page，从而获取到创单信息

首先BigCommerce支持自定义收银台，参考：https://github.com/bigcommerce/checkout-sdk-js 和 https://medium.com/bigcommerce-developer-blog/the-complete-guide-to-checkout-customization-on-bigcommerce-6b566bc36fa9

自定义收银台前端工作量比较大，而且需要商户配置自定义Checkout（Advanced Settings › Checkout），BigCommerce官方推荐使用默认的Optimized One-Page Checkout ，参考：https://support.bigcommerce.com/s/article/Optimized-Single-Page-Checkout

我们的目的跨过Checkout中的Payment模块，因此这里采用一种取巧的方式，就是添加一种线下支付方式，然后将名称修改为 OKCloud Pay

设置路径：店铺设置管理 → 支付方式 → 展开线下支付方式 → 选择一种线下支付方式（比如Pay in Store），然后进入Pay in Store设置，将显示名称改为 OKCloud Pay

此时Checkout中的Payment模块无需输入任何信息，即可完成创单跳转 thank you page，订单状态为 Awaiting Payment

订单数据获取

问题2：thank you page 如何嵌入自定义JS脚本，如何监听/api/storefront/orders/xxx接口调用完成并获取到返回数据，如何与APP后端实现安全通信

（1）嵌入自定义JS脚本

Using-Script-Manager: https://support.bigcommerce.com/s/article/Using-Script-Manager

Storefront (店面) › Script Manager (脚本管理器)

（2）如何监听 /api/storefront/orders/xxx 接口调用完成

参考：https://blog.csdn.net/u010999809/article/details/79427640

前端解决

（3）如何获取到 /api/storefront/orders/xxx 接口返回数据

方案一：自定义JS监听到完成后，带上Cookie重新手动再次请求一次

前端解决

（4）如何与APP后端实现安全通信

至少需要带上店铺地址、orderId、cartId等信息，APP后端通过API查询具体信息

安全控制具体有待讨论，可以在APP后端配置相关授权信息，或通过API配置店铺相关认证信息，然后根据这个信息做一下算法处理再一并传过来

App开发

问题3：BigCommerce App开发

BigCommerce Java SDK：https://github.com/ChannelApe/bigcommerce-sdk

BigCommerce APP后端需要实现的功能：

（1）OAuth2认证

（2）暴露接口：如 /auth, /load, /uninstall

（3）接收自定义JS支付请求，首先通过BigCommerce API查询订单详细信息，然后提取该商户配置信息，再请求至CeleryPay支付网关，返回收银台地址给前端

（4）接收到CeleryPay支付完成异步通知后，通过BigCommerce API修改订单状态信息

（5）提供支付状态查询接口，以便支付完成重定向后可以查询支付状态信息（主要防止通知比重定向慢的情况）

（6）相关webHook接口可以利用，如创单hook、购物车创建hook等

（7）Advanced Settings (高级设置) › API Account (API账户)

商务准备

（1）注册店铺（14天试用）：https://www.bigcommerce.com/essentials/

（2）添加APP：https://devtools.bigcommerce.com/ （注：APP上线需要$99）

（3）注册Partner：https://partners.bigcommerce.com/