入门日语 30 天
在线视频课程 · 永久访问
¥ 89.00
商务写作技巧
互动课程 · 含练习
¥ 45.00
由 MB Wallet 提供安全支付
顾客在商城选好商品后，点击「用 MB 钱包支付」按钮。你的后端收到请求后，调用 MB Wallet API 创建一个 Checkout 会话。
需要做什么
第一步：按钮怎么写（前端）
按钮只做一件事：调用你自己的后端。API 密钥保存在服务器上，浏览器代码里永远不出现密钥。
<!-- 购物车页面：支付按钮 -->
<button id="mb-pay-btn">用 MB 钱包支付</button>
<script>
document.getElementById("mb-pay-btn")
.addEventListener("click", async () => {
// 调用你自己的后端，不要直接调用 MB Wallet
const res = await fetch("/api/pay", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ cart_id: "cart_123" }),
})
const { url } = await res.json()
// 后端返回 Checkout 链接后，跳转过去
window.location.href = url
})
</script>第二步：商品怎么变成 line_items（后端）
把鼠标放在左边手机的商品上，看它对应请求里的哪一段。试试在手机上改数量（+ / −），下面的请求会实时更新。
POST /v1/checkout_sessions
Authorization: Bearer mb_test_...
Idempotency-Key: order_1842_attempt_1
Content-Type: application/json
{
"currency": "jpy",
"line_items": [
{
"quantity": 1,
"unit_amount": 8900,
"product": {
"name": "入门日语 30 天",
"description": "在线视频课程 · 永久访问"
}
}, {
"quantity": 1,
"unit_amount": 4500,
"product": {
"name": "商务写作技巧",
"description": "互动课程 · 含练习"
}
} ],
"success_url": "https://shop.example/success?checkout={CHECKOUT_SESSION_ID}",
"cancel_url": "https://shop.example/cart"
}| 手机上看到的 | 请求里对应的字段 |
|---|---|
| 商品名「入门日语 30 天」 | line_items[0].product.name |
| 单价 ¥ 89.00 × 1 | unit_amount: 8900，quantity: 1 |
| 商品名「商务写作技巧」 | line_items[1].product.name |
| 单价 ¥ 45.00 × 1 | unit_amount: 4500，quantity: 1 |
| 合计 ¥ 134.00 | 不用提交 MB Wallet 自动计算 |
第三步：拿到支付链接（响应）
MB Wallet 返回一个 Checkout 会话，其中 url 就是支付链接。后端把它发给前端，前端跳转过去。
{
"id": "MB-PAYMENT-7K9M2Q4R",
"object": "checkout.session",
"status": "open",
"payment_status": "unpaid",
"currency": "jpy",
"url": "https://app-checkout.media-bank.global/checkout/MB-PAYMENT-7K9M2Q4R",
...
}密钥只在后端使用API 密钥 (mb_test_...) 绝对不能出现在浏览器端代码中。
浏览器只收到一个链接返回的 url 是不透明的，不含购物车数据。
金额由服务端计算MB Wallet 根据 unit_amount × quantity 自动计算，商户不提交总额。