<!DOCTYPE html><html><head><title>Stripe Element生み出す</title></head><body><h2>Stripeエレメントを生み出す</h2><script src="https://js.stripe.com/v3/"></script><formaction="/charge"method="post"id="payment-form"><divclass="form-row"><labelfor="card-element">独自フォーム
</label><divid="card-element"><!-- A Stripe Element will be inserted here. --></div><divid="card-errors"role="alert"></div></div><button>Submit Payment</button></form><script type="text/javascript">// Create a Stripe client.varstripe=Stripe('pk_test_yJpRRbNedLz6xLWzr504zrM800EBvb1cfh');// Create an instance of Elements.varelements=stripe.elements();// Custom styling can be passed to options when creating an Element.// (Note that this demo uses a wider set of styles than the guide below.)varstyle={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.varcard=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.on('change',function(event){vardisplayError=document.getElementById('card-errors');if(event.error){displayError.textContent=event.error.message;}else{displayError.textContent='';}});// Handle form submission.varform=document.getElementById('payment-form');form.addEventListener('submit',function(event){event.preventDefault();stripe.createToken(card).then(function(result){if(result.error){// Inform the user if there was an error.varerrorElement=document.getElementById('card-errors');errorElement.textContent=result.error.message;}else{// Send the token to your server.stripeTokenHandler(result.token);}});});// Submit the form with the token ID.functionstripeTokenHandler(token){// Insert the token ID into the form so it gets submitted to the servervarform=document.getElementById('payment-form');varhiddenInput=document.createElement('input');hiddenInput.setAttribute('type','hidden');hiddenInput.setAttribute('name','stripeToken');hiddenInput.setAttribute('value',token.id);form.appendChild(hiddenInput);// Submit the formform.submit();}</script></body></html>
参考