0%

【學習筆記】 初探 Stripe:第三方金流串接

A. Introduction

Stripe 是一家線上付款服務提供商,協助個人或公司在網路上接受付款服務。

其特點主要如下:

  • 介面簡潔
  • 支援站內付款(不需跳轉頁面,如:PayPal)
  • 支援超過 30 種語言、135 種貨幣,包含加密貨幣
  • 目前支援八種支付方式,如:信用卡、簽帳金融卡、銀行轉帳、數位錢包等

B. Online Payments

Stripe 提供一系列的收款服務:

  • Stripe Payment Links:客戶可直接點擊產品的付款連結,填寫資料即完成支付
  • Stripe Elements:能夠自行設計付款頁面的樣式,鑲嵌在網頁中
  • Stripe Checkout:透過 Client SDK,直接應用 Stripe 預製的托管支付頁面
  • Stripe Connect:提供更多功能,如:快速註冊、全球收款、以本地貨幣向全球付款(提現)等
  • Stripe Invoicing:能夠自訂 Stripe 賬單,直接向客戶收款
  • Stripe Billing:能夠自訂頻率和計費方式,進行定期重複的收款

也可以直接使用 API 或是 SDKs,套用至自訂的 UI 介面,可參考以下文件:

  • Stripe API:https://stripe.com/docs/api
  • Stripe SDKs:https://stripe.com/docs/js

下圖是官網列出不同服務的特點與差異:

C. Payment Flow

  • Client-side:將使用者的交易細節送至 Stripe 處理驗證,確認後會回傳一組 token(基於 PCI Compliance 支付安全規範,開發者不會儲存任何用戶的信用卡資料)
  • Server-side:將這組 token 送至 Server 進行後續驗證流程

可參考官網的 Payment Intent 流程圖:

D. Sample Code

以下是官網提供的 GitHub Repo 範例:

  • accept-a-payment:Learn how to accept a payment from customers around the world with a variety of payment methods
  • checkout-single-subscription:Learn how to combine Checkout and Billing for fast subscription pages
  • checkout-one-time-payments:Use Checkout to quickly collect one-time payments

接著會簡單介紹 Payment LinksSubscriptionsStripe Elements 這三種付款服務:

有兩種方式能夠建立商品的付款連結:

  • 直接在 Stripe 網站建立
  • 透過程式碼

(1) Create Links by Payment links page

• 直接在線上建立商品付款頁面,可參考 DEMO For 1 month subscription

(2) Create a payment link with the Payment Links API

  • 每次發送 API 時,均需帶上 Secret Key,可從 Dashboard > API keys 頁面取得
  • 首先新增商品項目,response 會得到商品 PRODUCT_ID
const stripe = require('stripe')('sk_test_51LcngPAAS0stR7a9fGwPc85JbiYhAxIkP0pS32PLpuy00joiHlGYEeO9NQEpyPSWnOATsSGU5LeL0tlFTegi5MbI00r1YKjzMX');

const product = await stripe.products.create({
  name: 'Gold Special',
});
  • 制定商品價格、數量、支付方式、為一次性購買或是訂閱制等細節
// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('sk_test_51LcngPAAS0stR7a9fGwPc85JbiYhAxIkP0pS32PLpuy00joiHlGYEeO9NQEpyPSWnOATsSGU5LeL0tlFTegi5MbI00r1YKjzMX');

const price = await stripe.prices.create({
  currency: 'usd',
  unit_amount: 1000,
  product: '{{PRODUCT_ID}}',
});
  • 傳入剛才新增的商品 PRICE_ID,即可建立交易連結
// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('sk_test_51LcngPAAS0stR7a9fGwPc85JbiYhAxIkP0pS32PLpuy00joiHlGYEeO9NQEpyPSWnOATsSGU5LeL0tlFTegi5MbI00r1YKjzMX');

const paymentLink = await stripe.paymentLinks.create({
  line_items: [{
			price: '{{PRICE_ID}}', 
			quantity: 1
	}],
});
  • 在客戶完成購買後,可決定是否進行導頁或顯示訊息
// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('sk_test_51LcngPAAS0stR7a9fGwPc85JbiYhAxIkP0pS32PLpuy00joiHlGYEeO9NQEpyPSWnOATsSGU5LeL0tlFTegi5MbI00r1YKjzMX');

const paymentLink = await stripe.paymentLinks.create({
  line_items: [{price: '{{PRICE_ID}}', quantity: 1}],
  after_completion: {type: 'redirect', redirect: {url: 'https://example.com'}},
});
  • Test Cards 測試信用卡號可參考:https://stripe.com/docs/testing

D-2. Subscription 訂閱制

參考 https://github.com/stripe-samples/checkout-single-subscription 範例,可實作訂閱付款:

透過調整 .env 檔案中的 PRICE_ID,可決定要連結的商品:

# Stripe subscription data
DOMAIN=http://localhost:4242
BASIC_PRICE_ID=price_1Ld9T3K6EvHjzoA0yj8UoJmT
PRO_PRICE_ID=price_1LdPVvK6EvHjzoA0UOnCsDXn

點擊後會導頁至 Stripe 的輸入付款資訊頁:

D-3. 使用 Stripe Elements 鑲嵌在網頁

以上兩種方式,在付款時均會外開一個 Stripe 網頁。

根據不同需求,也可以將付款表單內嵌到自己的網頁上進行付款:

  • 首先建立一個 payment form
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>
  • 透過 clientSecret 參數帶入客戶的相關資訊:
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

示意圖如下,客戶可選擇自行付款方式:

E. Conclusion

過去比較常聽到綠界、Paypal 等金流服務,這次因為專案需求,第一次接觸到 Stripe 這家公司。

參考幾篇介紹,都形容 Stripe API 非常簡易好上手,最初在閱讀官方文件時,其實有點搞不清楚幾種付款服務的差異在哪,會想一次通盤瞭解;但跟著範例實作後,會發現其實觀念大同小異。

Stripe 還有提供 Dashboard 能夠進行後台管理,提供 API 或 No Code 的方式給用戶使用,即使不熟後端語言,也能夠快速上手。

F. Reference

  • Stripe 串金流教學(上) - Yuanchieh’s Blog
  • Stripe 串接 - 本書簡介
  • [實作筆記] Stripe 串接
  • Stripe 金流串起來 - iT 邦幫忙
  • DEMO:angular-stripe-integration