Stripe Checkout not working

you’ll have to exclude the stripe JS from being optimized roamingk

Do i Just add it like this? Sorry am not sure…

In Exclude scripts from Autoptimize: I have added: stripe.js

wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery,js,stripe.js,

Or do I need to add something else.. the above does not work for me.

This is the code to add the button:

<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>

<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
  style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
  id="checkout-button-price_1GzRojLzfdYlHbbNAgf8eI8s"
  role="link"
>
  Checkout
</button>

<div id="error-message"></div>

<script>
(function() {
  var stripe = Stripe('pk_live_51Gxza4LzfdYlHbbNEOHdzeMhrNGh2v8ANIaEABSpQMXTKhnxH9dSWaIcdxUBRSMqQKaXnkKZmipyFu73gJ2G8nDW0070xQCF5A');

  var checkoutButton = document.getElementById('checkout-button-price_1GzRojLzfdYlHbbNAgf8eI8s');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      lineItems: [{price: 'price_1GzRojLzfdYlHbbNAgf8eI8s', quantity: 1}],
      mode: 'payment',
      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfillment
      successUrl: window.location.protocol + '//gaysitgesguide.com/success',
      cancelUrl: window.location.protocol + '//gaysitgesguide.com/canceled',
    })
    .then(function (result) {
      if (result.error) {
        // If <code>redirectToCheckout</code> fails due to a browser or network
        // error, display the localized error message to your customer.
        var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
  });
})();
</script>

K

• This reply was modified 4 years, 8 months ago by roamingk.

had a look at your HTML source, problem seems to be that you have HTML tags in your JavaScript;

<script>
(function() {
  var stripe = Stripe('pk_live_51Gxza4LzfdYlHbbNEOHdzeMhrNGh2v8ANIaEABSpQMXTKhnxH9dSWaIcdxUBRSMqQKaXnkKZmipyFu73gJ2G8nDW0070xQCF5A');</p>
<p>  var checkoutButton = document.getElementById('checkout-button-price_1GzRojLzfdYlHbbNAgf8eI8s');

while that should be:

<script>
(function() {
  var stripe = Stripe('pk_live_51Gxza4LzfdYlHbbNEOHdzeMhrNGh2v8ANIaEABSpQMXTKhnxH9dSWaIcdxUBRSMqQKaXnkKZmipyFu73gJ2G8nDW0070xQCF5A');
  var checkoutButton = document.getElementById('checkout-button-price_1GzRojLzfdYlHbbNAgf8eI8s');

hope this helps,
frank

I changed the code..and updated it.. but no joy.

I’m seeing this error on the console both with and without Autoptimize active when clicking the button:

IntegrationError: The provided success URL domain (gaysitgesguide.com) is not enabled in the dashboard. Add this domain at https://dashboard.stripe.com/account/checkout/settings. v3:1:10981

So it seems the problem now is in the configuration on the Stripe dashboard?

I edited the code and added https:// to the success and failed pages. And it works, for some reason the widget to create the code doesn’t put them in ..

Anyway that worked for me.

Thanks for your time and a great plugin.

happy it works roamingk ??

feel free to leave a review of the plugin and support here! ??

frank