• Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Register
  • Login
Bagisto Forum

Bagisto

  • Register
  • Login
  • Search
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups

How to include script and css file in payment.blade.php

Modules
4
29
9.1k
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • Y
    yousuf last edited by 6 Sept 2019, 12:30

    we just include this ,<script src="https://js.stripe.com/v3/"></script>
    in payment.blade.php and then we find in view-page-source ,not include

    1 Reply Last reply Reply Quote 0
    • J
      Jitendra last edited by 7 Sept 2019, 07:15

      In payment.php.blade file you can find the following view render event:

      {!! view_render_event('bagisto.shop.checkout.payment-method.after', ['payment' => $payment]) !!}

      Create a blade file and add your css and script there and add you file by calling addTemplate function.

          Event::listen('bagisto.shop.checkout.payment-method.after', function($viewRenderEventManager) {
              $viewRenderEventManager->addTemplate('your file path');
          });
      
      1 Reply Last reply Reply Quote 0
      • Y
        yousuf last edited by 11 Sept 2019, 05:43

        just add this line after

         {!! view_render_event('bagisto.shop.checkout.payment-method.after', ['payment' => $payment]) !!}
        

        $viewRenderEventManager->addTemplate('your file path');

        right?

        1 Reply Last reply Reply Quote 0
        • Y
          yousuf last edited by 11 Sept 2019, 05:43

          where we put this function ,

          Event::listen('bagisto.shop.checkout.payment-method.after', function($viewRenderEventManager) {
          $viewRenderEventManager->addTemplate('your file path');
          });

          1 Reply Last reply Reply Quote 0
          • R
            rahul last edited by 11 Sept 2019, 05:59

            Hi @yousuf

            In your service providers boot method.

            Thanks

            1 Reply Last reply Reply Quote 0
            • Y
              yousuf last edited by 11 Sept 2019, 06:08

              e4494960-cb80-4bbf-9006-02451cb87a86-image.png @rahul said in How to include script and css file in payment.blade.php:

              method

              we can add this in shopserviceprovider ,but it not call

              1 Reply Last reply Reply Quote 0
              • Y
                yousuf last edited by 11 Sept 2019, 06:12

                can you tell me the path of provider where we add this lines

                1 Reply Last reply Reply Quote 0
                • R
                  rahul last edited by 11 Sept 2019, 06:33

                  Hi @yousuf

                  You have to give path of view not url. Please see below one.

                  Event::listen('bagisto.shop.checkout.payment-method.after', function($viewRenderEventManager) {
                         $viewRenderEventManager->addTemplate('type-hint::folder1.flder2.filename');
                  });
                  

                  and one more thing, you are adding this in shop packages service provider which is core package and once new version will be released so your changes will be destroy or show conflict while version update.
                  So, if want to override any thing then create package for same and do all changes in your package.

                  Thanks

                  Y 1 Reply Last reply 11 Sept 2019, 12:04 Reply Quote 0
                  • Y
                    yousuf last edited by 11 Sept 2019, 07:53

                    we can done it but not show properly,
                    style and script not load

                    1 Reply Last reply Reply Quote 0
                    • Y
                      yousuf last edited by 11 Sept 2019, 07:53

                      <style>
                      /**

                      • 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>

                      <form action="/charge" method="post" id="payment-form">
                      <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>

                      <script>
                      // Create a Stripe client.
                      var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

                      // 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>

                      1 Reply Last reply Reply Quote 0
                      • Y
                        yousuf last edited by 11 Sept 2019, 07:56

                        currently show this ,

                        ab7a651c-2d5c-433d-8500-10ca6e0affd9-image.png

                        but we need like this

                        0ad1af94-c602-4267-9a21-22bc12638123-image.png

                        1 Reply Last reply Reply Quote 0
                        • Y
                          yousuf last edited by 11 Sept 2019, 07:58

                          actually we include stripe payment method in payment.blade.php

                          1 Reply Last reply Reply Quote 0
                          • Y
                            yousuf last edited by 11 Sept 2019, 08:08

                            css and script not load

                            1 Reply Last reply Reply Quote 0
                            • Y
                              yousuf last edited by 11 Sept 2019, 08:13

                              This is my file

                              <style>
                              /**

                              • 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>

                              <form action="/charge" method="post" id="payment-form">
                              <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>

                              <script>
                              // Create a Stripe client.
                              var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

                              // 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>

                              1 Reply Last reply Reply Quote 0
                              • Y
                                yousuf last edited by 11 Sept 2019, 09:56

                                css and script not load

                                1 Reply Last reply Reply Quote 0
                                • Y
                                  yousuf @rahul last edited by 11 Sept 2019, 12:04

                                  @rahul hi

                                  1 Reply Last reply Reply Quote 0
                                  • R
                                    rahul last edited by 11 Sept 2019, 14:02

                                    Hi @yousuf

                                    Instead of Writing whole form, css and js in single page,. is giving error. So what we can do is that we can use them separately.

                                    We are already fired two different event 'bagisto.shop.layout.head' and 'bagisto.shop.layout.body.after' from our master file, so we will use this event to add our css and js file.

                                    As we told earlier how to do this, we will follow same procedure.

                                    For JS

                                    \Event::listen('bagisto.shop.layout.body.after', function($viewRenderEventManager) {
                                         $viewRenderEventManager->addTemplate('type-hint::folder1.folder2.file-name');
                                    });
                                    

                                    Now put this code in your js file (This JS code is mentioned above), we did some small changes.

                                    <script>
                                    eventBus.$on('after-checkout-payment-section-added', function() {
                                    
                                        $(document).ready(function() {
                                    
                                            // Create a Stripe client.
                                            var stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
                                    
                                            // 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');
                                            console.log()
                                            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>
                                    

                                    For CSS

                                    We will again follow the same procedure.

                                     \Event::listen('bagisto.shop.layout.head', function($viewRenderEventManager) {
                                              $viewRenderEventManager->addTemplate('type-hint::folder1.folder2.file-name');
                                      });
                                    

                                    Paste this one in your css file.

                                    <style>
                                    
                                        .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;
                                        }
                                    
                                        .form-row {
                                            background: red;
                                        }
                                    </style>
                                    

                                    We have already did following one with form so we don't need to do it here.
                                    Right now our stripe's form, css & js is loading using three different event,

                                    Try this solution and write to us if you found any difficulty to implement it.

                                    Thanks

                                    1 Reply Last reply Reply Quote -1
                                    22 out of 29
                                    • First post
                                      22/29
                                      Last post