How can i disable and change text of a single stripe button that in a foreach loop

Question

I am using stripe basic checkout button that is looping through my products, is there a way to disable and change the text of the button after the button is submitted without affecting the button on the other products. I am having trouble trying to disable a single button after the payment is submitted that wont affect the buttons of the other products.

So what i want to happen is i click "pay with card", after i submit my information and the process goes through. The product that i just bought i want the button to be disable so i can only buy the product once.

@foreach($userproduct as $product)
    <div class="col-md-6 col-lg-4">
      <form id="btnst" action="{{ '/account/'.Auth::user()->slug .'/'. $product->id  }}" method="POST">
          {{ csrf_field() }}
          <script
            src="https://checkout.stripe.com/checkout.js" class="stripe-button"
            data-key="pk_test_fLAtreA6Mox2p8QVJLTfSBAH"
            dat a-amount=".99"
            data-name="ex"
            data-description=" expired"
            data-email="{{ auth::check() ? auth()->user()->email : null }}"
            data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
            data-panel-label=" Run Ad {{ $product->title }} Coupon"
            data-locale="auto">
          </script>

          <script type="text/javascript">
              $(document).ready(function(){
                  $(".stripe-button-el span").remove();
                      $("button.stripe-button-el").removeAttr('style').css({
                          "display":"inline-block",
                          "width":"50%",
                          "padding":"5px",
                          "background":"#d95a5c",
                          "color":"white",
                          "font-size":"1.3em",
                          "margin-left":"30%"}).html("Advertise");
                  });
          </script>
          <input type="hidden" name="adname" value="payment">
          <input type="hidden" name="adprice" value="0.99">
          <input type="hidden" name="prod_id" value="{{$product->id }}">
      </form>
@endif

A new page will be loaded very soon after you've submitted the form, can you please elaborate the question? — Teemu
@BhumiShah yes i want to disable the "pay with card " button once after the payment is submitted so that the user can't purchase that product again — jmike
@Teemu So the "pay with card" pop up i put my infomation in and then i want the button of that particular product to be disable after i submit the payment. So the other products on the page the pay with card is there but not for the product i purchased — jmike

Mohd Abdul Mujib Mohd Abdul Mujib · Accepted Answer · 2018-06-13T05:27:46

This can be done purely on the frontend by just adding the disabled attribute.

$(".your-button").on("click", function(){
 $(this).setAttr("disabled", "disabled");
});

Now this ofcourse has a drawback, that this won't make sure if the product purchase went through (was completed) or not.

Other way is to simply poll the server using ajax for the status of this payment and once you receive a true disable it.

You can use a mix of both methods.

How can i disable and change text of a single stripe button that in a foreach loop

1 Answers