國際支付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") {
                            //支付成功的邏輯操作
                        }
                })
             }

渲染成功

自動校驗失敗

校驗成功

總結：

插件集成度比較高，前端難度較低。只需要實例化插件，驗證秘鑰即可。