Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport"
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <style type="text/css">
- /**
- * The CSS shown here will not be introduced in the Quickstart guide, but shows
- * how you can use CSS to style your Element's container.
- */
- .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>
- </head>
- <body>
- <div class="row">
- <div class="col-12">
- <form action="{{ route('bundles.charge') }}" method="post" id="payment-form">
- @csrf
- <div class="form-row">
- <label for="card-element">
- Credit or debit card
- </label>
- <div id="card-element">
- <!-- A Stripe Element will be inserted here. -->
- </div>
- <!-- Used to display form errors. -->
- <div id="card-errors" role="alert"></div>
- </div>
- <button>Submit Payment</button>
- </form>
- </div>
- </div>
- <script src="https://js.stripe.com/v3/"></script>
- <script>
- // Create a Stripe client.
- var stripe = Stripe('pk_test_j8J6ZkZNeCbbguMFf2BWszRP0045uQeRgv');
- // Create an instance of Elements.
- var elements = 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.)
- 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 = '';
- }
- });
- // 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 {
- // Send the token to your server.
- stripeTokenHandler(result.token);
- }
- });
- });
- // Submit the form with the token ID.
- function stripeTokenHandler(token) {
- // 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);
- // Submit the form
- form.submit();
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement