I want my form to be submitted after successful payment JS

@tomasosho Looks right. You might need... maybe put id="myForm" on the form tag.

function payWithPaystack(event){
    event.preventDefault();



document.getElementById('myForm').submit();

Not sure I understand but have you tried replacing

document.myform.submit();
handler.openIframe();

with just

handler.openIframe();

Cause you are submitting it on success and also on every button click.

@fylzero It's still responds the same way. Once clicked it submits. It doesn't wait to fail of be successful.

<form action="/membersubscribe" id="myform" name="myform" method="POST">
                    {{csrf_field()}}
                  <script src="https://js.paystack.co/v1/inline.js"></script>
                  <button type="button" onclick="payWithPaystack()"> Pay </button> 
                </form>
 
                <script>
                  function payWithPaystack(){
                    var handler = PaystackPop.setup({
                      key: 'pk_test_0e8187eb43726e09614de21d5a2fe6d48266dbaa',
                      email: '{{ auth()->check()?auth()->user()->email: null}}',
                      plan: 'PLN_b4zn1ixrsn9j87a',
                      currency: "NGN",
                      ref: ''+Math.floor((Math.random() * 1000000000) + 1), // generates a pseudo-unique reference. Please replace with a reference you generated. Or remove the line entirely so our API will generate one for you
                      metadata: {
                        custom_fields: [
                            {
                                display_name: "Mobile Number",
                                variable_name: "mobile_number",
                                value: "+2348012345678"
                            }
                        ]
                      },
                      callback: function(response){
                          alert('success. transaction ref is ' + response.reference);
                      },
                      onClose: function(){
                          alert('window closed');
                      }
                    });
                    
                    function payWithPaystack(event){
                    event.preventDefault();
                    }

                    document.myform.submit();

                    handler.openIframe();
                  }
                </script>

@bugsysha with just the handler.openIframe(); it just loads the alert, it doesn't submit. I want it to submit once it is successful.

I solved it

callback: function(response){
                        document.myform.submit();
                      }
                    });

@tomasosho but you've already had that in your callback method?

@bugsysha yes I did, but it was submitting without confirming payment

So if you have same code how does it behave differently? I do not understand.

You'd have to place the submit in the call back so there'll be a confirmation before it redirects.

Look at your initial post. You already had that in the callback. What I said is to remove the one from the end of the payWithPaystack function.

So you should have

<script>
                  function payWithPaystack(){
                    var handler = PaystackPop.setup({
                      key: '####',
                      email: '{{ auth()->check()?auth()->user()->email: null}}',
                      amount: '{{$prv->amount}}',
                      currency: "NGN",
                      ref: ''+Math.floor((Math.random() * 1000000000) + 1), // generates a pseudo-unique reference. Please replace with a reference you generated. Or remove the line entirely so our API will generate one for you
                      metadata: {
                        custom_fields: [
                            {
                                display_name: "Mobile Number",
                                variable_name: "mobile_number",
                                value: "+2348012345678"
                            }
                        ]
                      },
                      callback: function(response){
                          alert('success. transaction ref is ' + response.reference);
                          document.myform.submit();
                      },
                      onClose: function(){
                          alert('window closed');
                      }
                    });

                    // document.myform.submit(); this should be removed.
                    
                    handler.openIframe();

                  }
                </script>

@bugsysha lol, just let it go. lmao

@fylzero 🤣

@bugsysha your reply which was me removing the document.myform.submit(); Was originally my initial code and which only submits on the payment platform and gives a flash message. NOTE it doesn't send a POST request to my controller and I needed it to. What I did was I replaced the callback value with a document.myform.submit();. You really did not understand what I was talking about. I'm glad I got you laughing.🙂

I'm not laughing at you.

It's cool. Did you get what I was saying? I'm still building up my js skill.

@tomasosho to be honest I did not. I'm repeating one thing and you are repeating other. For some reason we do not understand each other fully. Sorry for that.

You should create a duplicate form, then pass the values of the original form to the duplicate form when the payment gateway is initiated. Then apply the submit method on the form duplicate inside the callback response.