stripe支付demo测试附源码

<!DOCTYPE html><html> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>测试stripe支付demo</title></head> <body><div class="form-row"><label for="card-element">Credit or debit card</label><div style="margin-top: 10px;"><input id="cardholder-name" type="text" placeholder="持卡人姓名"></div> <div id="card-element"></div><div id="card-errors" role="alert"></div><button id="card-button" class="btnClass">确认支付</button></div></body><style type="text/css">#card-errors{color: red;}</style><script src="https://js.stripe.com/v3/"></script><script>var stripe = Stripe('pk_test_E5K4sB4KOMNl1WRk4kVtWdGI00tF9nbt75');var elements = stripe.elements();var cardElement = elements.create('card');cardElement.mount('#card-element');var cardholderName = document.getElementById('cardholder-name');var cardButton = document.getElementById('card-button');var clientSecret = 'pi_1FRsD4IOkWpKGmkzELjtmxJx_secret_WBTa9EgTKBFY9hTZ444smnVIF'; //后台传的密钥console.log(clientSecret)cardElement.addEventListener('change', function(event) { var displayError = document.getElementById('card-errors'); if (event.error) { displayError.textContent = event.error.message; } else { displayError.textContent = ''; }}); cardButton.addEventListener('click', function(ev) { stripe.handleCardPayment( clientSecret, cardElement, { payment_method_data: { billing_details: {name: cardholderName.value}, //持卡人姓名 // Authorization:'Bearer' +"pi_1FRsD4IOkWpKGmkzELjtmxJx_secret_WBTa9EgTKBFY9hTZ444smnVIF" }, } ).then(function(result) { console.log(result) if (result.error) { // f付款失败 } else { // 付款成功 } }); });</script><style>#card-element {padding: 30px 0px;} .btnClass {width: 100px;height: 28px;line-height: 28px;background-color: burlywood;border: none;margin-left: 20%;margin-top: 20px;} .StripeElement { box-sizing: border-box; height: 40px; padding: 10px 12px; border: 1px solid transparent; border-radius: 4px; background-color: white; box-shadow: 0 1px 3px 0 #e6ebf1; -webkit-transition: box-shadow 150ms ease; transition: box-shadow 150ms ease; } .StripeElement--focus { box-shadow: 0 1px 3px 0 #cfd7df; } .StripeElement--invalid { border-color: #fa755a; } .StripeElement--webkit-autofill { background-color: #fefde5 !important; }</style>

stripe支付demo测试 附源码

stripe支付demo测试附源码