技术变现第一步：Stripe 接入指南

技术变现第一步：Stripe 接入指南

1. Stripe 账号申请指南

Stripe 是一家提供让个人或者公司在互联网上接受付款服务的科技公司。总部位于美国硅谷，目前在伦敦、巴黎、新加坡、东京等地区都有办事处。目前只支持34个国家和地区，其中并不包括中国大陆。

由于 Stripe 并不在大陆开展业务，所以个人用户申请 Stripe 账号只能通过曲线救国的方式来解决。下面的操作有一定的门槛，但是基本上可以通过淘宝来解决。

1.1 准备材料

1. 护照Id
2. 中国香港银行卡

关于银行卡办理存在一定的准入条件，但是也不是非常硬性的规定。现在比如腾讯、阿里、百度等公司都会定期有银行员工上公司来组团办理，留意下消息就好了。那不是这些公司想办理怎么办呢？其实也有另外相对麻烦一点的渠道，富途股票经理们会组团拉人去中国香港办理银行卡，往返车费是免费的。但是需要本人亲自去中国香港，这也不失为一个途径，有需要话可以帮忙拉群。

1. 中国香港手机号码

淘宝选个套餐就好了，建议买个长期的，接受短信免费，月租2港币。

1. 独立网站

Idea 落地：快速构建产品主页进行早期验证和推广

1.2 申请过程

1. 访问 https://stripe.com/ ，使用 Email 注册账号账号，进入到 dashboard 页面 。
2. 在dashboard页面中，需要填写 姓名（护照中姓名拼音），护照 Id ，公司主页（可以填写个人网站），手机号和银行账号。
3. 注意：其中手机号码可以在淘宝购买，可以让店家先告诉你手机号码进行申请，收到手机卡激活后再进行手机号码验证也是可行的。银行账号和大陆银行卡片的卡号不一样，各家银行叫法不一，一般叫做登记名称。特意找了个卡面，如下红框中就是银行的账号。

1. 关于公司和家庭地址，在地图上选个写字楼的地址填上就好了。
2. 填写完信息后，注意根据检查用来申请 Stripe 的邮箱，根据提示操作完成必要的验证。
3. 因为我本身材料齐全，半个小时就通过了。进入dashboard 主页，能看到下图就能正式进行线上的交易了。

1. 当然，如果只是进行纯粹的技术研究，勾选查看测试数据，就能拿到用于测试使用的 Publishable 和 Secret

1.3 （可选）美国身份申请

申请方式是一样的，不同的地方在于国家、银行卡、手机号的不同。需要的这些材料也很容易搞定。但是目前看来有一定的几率审核不通过。在上面的方式条件难以满足的条件下可以尝试下。

1. 美国（+1）手机号

Google Voice ,类似国内的阿里小号业务。淘宝上10元一个，买回来可以立即转移到自己账号，省时省力。

1. 美国地址

https://www.fakenamegenerator.com/

1. 美国银行卡

Payoneer 类似于国内商家版的支付宝，主要作用是用来收取来自跨境电商平台的销售款项。实际上它能提供虚拟的银行账号，我们可以通过它来获取到美国银行的账号。而收到的款项是可以直接提现到国内的银行卡上的。如果是做外贸电商或者亚马逊KDP等，都可以通过它的虚拟美国银行账号进行关联。 通过 Payoneer 注册 邀请链接，当你获得$1000后，你和我都能获得额外的25美元的奖励。如果直接在官网注册，是没有这个奖励的。官网直达

注册完成后，能看到不同币种的收款账号，如下图所示。

单独查看 USD 收款账号，可以查看到银行的账号和路由编码。（米国银行体系是通过路由编码和账号进行统一识别的）

2. Stripe 接入指南

2.1 官网参考文档

https://stripe.com/docs/api

2.2 支付流程介绍

图片引用于 https://www.nascenia.com/stripe-integration-in-swift/

https://multimerch.com/blog/automate-multimerch-marketplace-stripe/

如图所示，这里存在三个角色，即用户、Stripe、和服务提供方。当用户想购买服务提供方的某种服务比如一本电子书。用户不信任服务提供商，不想把支付信息提供给服务提供商。所以用户是直接和 Stripe 本身交互的（体现在标号1）。Stripe 根据用户提供的支付数据之后，会生成一个token（标号2），可以理解为在酒店刷的一个预授权，此时并不会真正的扣款。只是代表用户允许该服务提供商可以在他的账号上面进行扣款以及扣款的额度。用户把此token发送给服务提供方，然后再由服务提供方去stripe进行扣款，也就是验证这个token的有效性（体现在标号3，4）。此时才是真正的扣款（理解为到酒店前台退房，直接结账走人不要再支付房费过程）。至此，一笔支付是真正完成了，但是交易还未完成，在这个场景中，服务提供方在扣款完成后，还需要对该用户的账号数据进行发货处理，比如在用户名下写入某个电子书的访问权限等（这样用户才能阅读到电子书，也意味着本次购买电子书的交易完成了，当然，这是后面的业务逻辑。我们重点在于如何处理支付流程）。

2.3 前端页面引入 Stripe

Web前端页面引入 Stripe 。

详见 stripeCheckout/views/payindex.ejs

<form action="/pay/charge" method="POST">
    <script
            src="https://checkout.stripe.com/checkout.js" class="stripe-button"
            data-key="pk_test_2ZfoLZkMgcLzFDDKUZiBreZ300BExzdxSL"
            data-amount="999"
            data-name="test store"
            data-description="Widget"
            data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
            data-locale="auto"
            data-zip-code="false"
            data-currency="usd">
    </script>
</form>

2.4 后台服务于Stripe进行扣款请求通信

详见 stripeCheckout/routes/pay.js

const stripe = require("stripe")(keySecret);

router.post('/charge', (req, res) => {
    let amount = req.body.amount || 999
    try {
        stripe.customers.create({
            name: 'xxxxx',
            email: req.email,
            source: req.body.stripeToken
        }).then(customer => {
            console.log("step 1 stripe customer create success info")
            stripe.charges.create({
                amount: amount,
                currency: 'usd',
                customer: customer.id,
                description: 'Thank you for your generous donation.'
            }).then((rsp) => {
                console.log("cool,success pay")
                res.json({ec: 0, msg: 'success'})
            }).catch((err) => {
                console.log('step 2 stripe create charges err', err)
                res.json({ec: 2, msg: err})
            })
        }).catch((err) => {
            console.log('step 1 stripe create customer err', err)
            res.json({ec: 1, msg: err})
        })

    } catch (err) {
        console.log('step final invoke pay charge err', err)
        res.json({ec: 999, msg: err})
    }
})

3. 项目运行说明

git clone https://github.com/cvbox/stripeCheckout.git

cd stripeCheckout

npm install

npm run dev

http://localhost:3000/pay

若想修改成自己的app数据
1. config目录下有三个文件，分别对应不同的环境（开发环境，生成环境。若不指定，默认使用default.js下的配置信息）
2. 把从Stripe官网上的信息替换掉原始代码中的keyPublishable，keySecret
3. keyPublishable在前端页面 stripeCheckout/views/payindex.ejs 中形如 pk_test_xxx 是硬编码的，需要替换为自己申请的 keyPublishable 值

打开浏览器后，点击支付按钮，会弹出 Stripe 支付浮层。 输入测试账号的支付信息，并且点击支付。等待出现成功提示后。 即可以在 Stripe 后台进行查看本次支付流水。（前提是要把2.3，2.4中提到的data-key, keySecret替换成自己申请的相应的数据）

Stripe 后台查看支付情况

4. 补充

2.3 中引入的支付界面是 Stripe 默认提供的样式，接入简单，但是会以浮层的方式展示。若期望自定义组件的样式，形如

那么则需要使用 Stripe 提供的基础元素进行接入。 上图中是采用Vue的一个组件 https://github.com/jofftiquez/vue-stripe-checkout ，有兴趣的可以看看，不明白的地方也可以和我交流。电报交流