stripe.js踩坑日记

先附上代码【选择支付方式并唤起对应支付后重定向到支付结果页面】

先安装依赖包

npm install @stripe/stripe-js

代码【vue3语法】

<template><div class="stripe-pay-ment-box"><div id="payment-element"></div><button @click="handlePayment">Pay</button></div>
</template><script setup>
import { ref, onMounted } from "vue";
import { loadStripe } from "@stripe/stripe-js";
import { closeToast } from "vant";let Stripe = null;
const paymentElement = ref(null);
const clientSecret = ref("");
const payOrder = ref({});
let elements = null;onMounted(async () => {Stripe = await loadStripe("pk_test_you_stripe_key");init();
});
const init = async () => {await initialize();};async function initialize() {const appearance = {theme: "stripe",};const options = {layout: "tabs",paymentMethodOrder: ["apple_pay", "google_pay"],};elements = Stripe.elements({clientSecret: 'you clientSecret',appearance,});const paymentElement = elements.create("payment", options);paymentElement.mount("#payment-element");
}async function handlePayment() {Stripe.confirmPayment({elements,confirmParams: {return_url: `${window.location.origin}/PayTest?pay_order_no=${payOrder.value.bizNo || ''}`},}).then(function ({error}) {if (error) {alert('error:' + JSON.stringify(error))}});
}
</script>

附文档地址

stripe官方文档飞机票

总结：需要英文阅读理解能力，直接减少一半时间

文档英文，前后端文档散乱，没有完善的生态，相关官方回复周期长
分为预支付和收银台模式
1. checkout不支持预支付，但是基本是即用的
2. payment支持
  可以前端使用stripe ui搭建页面
  也采用后端生成方式，全配置化
  页面会自动列举适用的支付方式
限制条件很多
1. 支付方式受设备限制，例如需要设备下载Google Pay 或者 Apple Pay
2. 必须在上户后台配置域名以及激活支付方式
3. Google支付和apple支付激活钱包支付方式后，需要绑定信用卡且受信用卡地区等限制
优点
1. 会自动检测用户环境，给出支持的所有支付方式
2. 完成所有支付流程，只需要关注回调
3. 嵌入式界面，减少开发成本(但是文档阅读成本和试错成本很高)
4. 基本是全配置化的（意味着要熟悉文档）
一些兼容限制【浏览器、设备、银行卡】
- 硬件兼容
- 支付方式及浏览器对应支付方式兼容表