Stripe payment integration - What is the way to move .js [checkout.js] outside of loop?

Question

I'm creating stripe payment form according to their documentation. I need to use it in wordpress loop to it looks like:

Start loop:
Item name
Item img
Item desc 
etc.

    <form action="/charge" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_23123123"
    data-amount="2000"
    data-name="name"
    data-description="2 widgets"
    data-locale="auto"
    data-zip-code="true"
    data-currency="eur">
  </script>
</form>
Stop loop

But there's a problem - after adding stripe code website works very slow. I think it's about loading checkout.js multiple times. Is there a solution to move .js above the loop?

Answer 1

First, please note that Stripe's Checkout form does not process payments by itself -- it only collects a customer's card information and turns it into a token. The token must then be sent to your backend server where it can be used to eg create a charge .

You can get around loading Checkout multiple times using a custom integration . This way, Checkout's script would only be loaded once, and you would then call the configure() and open() methods on the StripeCheckout object to open the form with the parameters you want.

Since you're using WordPress, it might be simpler to use an already existing Stripe plugin. You can find some of those plugins here: https://wordpress.org/plugins/search.php?q=stripe