首页 > 编程语言> > stripe支付demo测试附源码
stripe支付demo测试附源码

2021-06-29 20:30:42 作者：互联网
 
<!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>
			<!-- Used to display form errors. -->
			<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>
标签：box,color,demo,源码,stripe,var,border,card
来源： https://blog.csdn.net/withkai44/article/details/118343239
stripe支付demo测试 附源码

stripe支付demo测试附源码
