国际支付stripe前端代码实现

公司海外运营要求使用 stripe 进行支付

话不多说，直接看前端在支付过程中负责的模块

1、引入stripe 模块

注意只能使用https方式导入

<script src="https://js.stripe.com/v3/"></script>

2、放入html代码

              <form action="/charge" method="post" id="payment-form">
                    <div class="form-row">
                        <div id="card-element">
                        </div>
                        <div id="card-errors" role="alert"></div>
                    </div>
                </form>

3、css样式

        .StripeElement {
            box-sizing: border-box;
            height: 3.0769rem;
            padding: 0.7692rem 0.9231rem;
            border: 0.0769rem solid transparent;
            border-radius: 0.3077rem;
            background-color: white;
            box-shadow: 0 0.0769rem 0.2308rem 0 #e6ebf1;
            -webkit-transition: box-shadow 150ms ease;
            transition: box-shadow 150ms ease;
        }
        .StripeElement--focus {
            box-shadow: 0 0.0769rem 0.2308rem 0 #cfd7df;
        }

        .StripeElement--invalid {
            border-color: #fa755a;
        }
        .StripeElement--webkit-autofill {
            background-color: #fefde5 !important;
        }

4、js 代码实现

            let stripe = Stripe(stripKey); //测试环境秘钥   
            let elements = stripe.elements({        //设置默认显示语种   en 英文 cn 中文 auto 自动获取语种
                locale: 'en'
            });
            var style = {
                base: {
                    color: '#32325d',
                    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                    fontSmoothing: 'antialiased',
                    fontSize: '16px',
                    '::placeholder': {
                        color: '#aab7c4'
                    }

                },
                invalid: {
                    color: '#fa755a',
                    iconColor: '#fa755a'
                }
            };

            // Create an instance of the card Element.
            var card = elements.create('card', { style: style });

            // Add an instance of the card Element into the `card-element` <div>.
            card.mount('#card-element');

            // Handle real-time validation errors from the card Element.
            card.addEventListener('change', function (event) {
                var displayError = document.getElementById('card-errors');
                if (event.error) {
                    displayError.textContent = event.error.message;
                } else {
                    displayError.textContent = '';
                }
            });

5、支付验证

       $('.payBtn').click(stripePay)            //支付按钮的监听
            function stripePay(event) {
                event.preventDefault();
                stripe.createToken(card).then(function (result) {
                    if (result.error) {
                        // Inform the user if there was an error.
                        var errorElement = document.getElementById('card-errors');
                        errorElement.textContent = result.error.message;
                    } else {
                        // Send the token to your server.
                        stripeTokenHandler(result.token);
                    }
                });
            }
         function stripeTokenHandler(token, _this) {

                // Insert the token ID into the form so it gets submitted to the server
                var form = document.getElementById('payment-form');
                var hiddenInput = document.createElement('input');
                hiddenInput.setAttribute('type', 'hidden');
                hiddenInput.setAttribute('name', 'stripeToken');
                hiddenInput.setAttribute('value', token.id);
                form.appendChild(hiddenInput);
                shopCarPay()
            }
            // 购物车支付流程
            function shopCarPay() {
                stripe.confirmCardPayment(data.client_secret, { payment_method: { card: card } }).then(function (result) {        
                    //此处data.client_secret变量为生成订单后 后端返回给前端的秘钥  将这个秘钥返回给stripe去做校验
                     if (result.paymentIntent && result.paymentIntent.status == "succeeded") {
                            //支付成功的逻辑操作
                        }
                })
             }

渲染成功

自动校验失败

校验成功

总结：

插件集成度比较高，前端难度较低。只需要实例化插件，验证秘钥即可。