CODEWITHSUNDEEP
javascriptjquerylaravelstripe-payments
jmike
jmike

Reputation: 481

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

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

Upvotes: 0

Views: 540

Answers (1)

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13928

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.

Upvotes: 1

Related Questions