这个开发过程就是一堆坑，中文教程都没有，心累。 更多内容见个人博客 :https://iii.run/

权限

image

请确保对应的权限是支持的

Checkout

Checkout 最经典的实现方式，代码非常简单。
官方介绍

<form action="your-server-side-code" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_g6do5S237ekq10r65BnxO6S0"
    data-amount="999"
    data-name="Stripe.com"
    data-description="Widget"
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
    data-locale="auto"
    data-zip-code="true">
  </script>
</form>

image

但总是有这个错误

Unrecognized request URL (POST: /v1/alipay/send_sms). Please see https://stripe.com/docs or we can help at https://support.stripe.com/.

Github上找到了官方回复，支付宝不支持Checkout。

话说那你还写个支付宝在哪里干嘛，气死了简直。

Stripe.js & Elements

alipay 介绍

官方的介绍嘛，也没说自己是什么语言，一直在原地打转。

试来试去，发现是js。主要没学过js，愣是现学现用。

构造页面

<p class="card-heading">请选择充值金额：（美元）</p>
    <div class="form-group form-group-label">
    <input type="hidden" id="stripe" value="'.Config::get("stripe_Publishable").'">
    <input type="hidden" id="alipayRedirect" value="'.Config::get("baseUrl").'/pay_callback'.'">
    <input class="form-control" id="payment-amount" type="number" min="0.00" max="10000.00" value="5" step="1">
    </div>
    <div class="card-action-btn pull-left">
    <button class="btn btn-flat waves-attach" id="alipay-submit" ><span class="icon">check</span>&nbsp;支付宝充值</button>
    </div>

监控按键，处理返回参数

这块单独写了一个js文件，到对应的页面直接调用即可。

$(document).ready(function() {
    $('#alipay-submit').on('click', function() {
        const amountInput = $('#payment-amount');
        var totalAmount = parseFloat(amountInput.val()) * 100;
        var stripe = Stripe($('#stripe').val()); 
        var user = $('#user').val();
        var alipayRedirect = $('#alipayRedirect').val();
        var stripeSource = stripe.createSource({
            type: 'alipay',
            amount: totalAmount,
            currency: 'usd',
            owner: {
                name: user,
            },
            redirect: {
                return_url: alipayRedirect
            },

        }).then(function(result) {
            if (result && result.source && result.source.redirect && result.source.redirect['url']) {
                //console.log(result.source.id);
                //console.log(result.source.amount/100);

                $.ajax({
                    type:"POST",
                    url:"/user/code/stripe_pay",
                    dataType:"json",
                    data:{
                        userid: result.source.owner.name,
                        total: result.source.amount/100,
                        tradeno: result.source.id
                    },
                    success:function(data){
                        if(data.ret == 1){
                            $("#result").modal();
                            $("#msg").html(data.msg);
                            window.setTimeout(location.href = result.source.redirect['url'], 2000);
                        }else{
                            $("#result").modal();
                            $("#msg").html(data.msg);
                        }
                    },
                    error:function(){
                        $("#result").modal();
                        $("#msg").html(data.msg);
                    }
                });
            } else {
                console.log(result);
                $("#result").modal();
                $("#msg").html(result.error.message);
            }
        });
    });

});

有两个地方比较关键：

• var stripe = Stripe($('#stripe').val());
• }).then(function(result) { 后边的部分对result的处理

调用

调用这块再说一下

<script src="https://js.stripe.com/v3/"></script>
<script src="上边那个js"></script>

记得先调用stripe的js，然后调用我们的。

看起来好像也没我写的时候那么难。