templates/_credit_card_js.html.twig line 1

Open in your IDE?
  1. <script src="https://js.stripe.com/v3/"></script>
  2. <script type="text/javascript">
  3.     // Create a Stripe client
  4.     var stripe = Stripe('{{ stripe.publishable_key }}');
  5.     // Stripe Card
  6.     var card;
  8.     function initCard() {
  9.         // Create an instance of Elements
  10.         var elements = stripe.elements();
  12.         // Custom styling can be passed to options when creating an Element.
  13.         // (Note that this demo uses a wider set of styles than the guide below.)
  14.         var style = {
  15.             base: {
  16.                 color: '#32325d',
  17.                 lineHeight: '24px',
  18.                 fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
  19.                 fontSmoothing: 'antialiased',
  20.                 fontSize: '16px',
  21.                 '::placeholder': {
  22.                     color: '#aab7c4'
  23.                 }
  24.             },
  25.             invalid: {
  26.                 color: '#fa755a',
  27.                 iconColor: '#fa755a'
  28.             }
  29.         };
  31.         // Create an instance of the card Element
  32.         card = elements.create('card', {style: style});
  34.         // Add an instance of the card Element into the `card-element` <div>
  35.         card.mount('#card-element');
  37.         // Handle real-time validation errors from the card Element.
  38.         card.addEventListener('change', function (event) {
  39.             var displayError = document.getElementById('card-errors');
  40.             if (event.error) {
  41.                 displayError.textContent = event.error.message;
  42.             } else {
  43.                 displayError.textContent = '';
  44.             }
  45.         });
  46.     }
  48.     function resetCard() {
  49.         card.destroy();
  50.         initCard();
  51.     }
  53.     function saveCC(btn) {
  54.         var $form = $('#ccForm');
  55.         var $btn = $(btn);
  57.         $btn.prop('disabled', true);
  59.         stripe.createToken(card).then(function(result) {
  60.             if (result.error) {
  61.                 $btn.prop('disabled', false);
  62.                 // Inform the user if there was an error
  63.                 var errorElement = document.getElementById('card-errors');
  64.                 errorElement.textContent = result.error.message;
  65.                 if (window.ccPromise !== undefined) {
  66.                     window.ccPromise.resolve(false);
  67.                 }
  68.             } else {
  69.                 $('#stripe_credit_card_token').val(result.token.id);
  70.                 $('#stripe_credit_card_last4').val(result.token.card.last4);
  71.                 $('#stripe_credit_card_brand').val(result.token.card.brand);
  72.                 $('#stripe_credit_card_exp_month').val(result.token.card.exp_month);
  73.                 $('#stripe_credit_card_exp_year').val(result.token.card.exp_year);
  75.                 $('#card-element').addClass('is-valid');
  77.                 {% if doNotSubmit is defined and doNotSubmit %}
  78.                     // var ccInfo = '<p class="form-control-static">' +
  79.                     //     '<strong>' + result.token.card.brand + ' </strong> ending in ' + result.token.card.last4 +
  80.                     //     '</p>';
  81.                     // $('#cc_info').html(ccInfo);
  82.                     // $('#ccModal').modal('hide');
  83.                     if (window.ccPromise !== undefined) {
  84.                         window.ccPromise.resolve(true);
  85.                     }
  86.                 {% else %}
  87.                     $form.submit();
  88.                 {% endif %}
  89.             }
  90.         });
  91.     }
  93.     $(document).on('click', '#save-cc-btn', function() {
  94.         saveCC($(this));
  95.     });
  96. </script>