Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <script src="https://js.stripe.com/v3/"></script>
- <script>
- // Stripe API Key
- var stripe = Stripe('pk_test_kM2nnXlTXWJdQUUNVhieZzK2');
- var elements = stripe.elements();
- // Custom Styling
- var style = {
- base: {
- color: '#32325d',
- lineHeight: '24px',
- 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', {hidePostalCode: true, 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 = '';
- }
- });
- // Handle form submission
- var form = 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
- var errorElement = document.getElementById('card-errors');
- errorElement.textContent = result.error.message;
- } else {
- stripeTokenHandler(result.token);
- }
- });
- });
- // Send Stripe Token to Server
- function stripeTokenHandler(token) {
- // Insert the token ID into the form so it gets submitted to the server
- var form = document.getElementById('payment-form');
- // Add Stripe Token to hidden input
- var hiddenInput = document.createElement('input');
- hiddenInput.setAttribute('type', 'hidden');
- hiddenInput.setAttribute('name', 'stripeToken');
- hiddenInput.setAttribute('value', token.id);
- form.appendChild(hiddenInput);
- // Submit form
- form.submit();
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement