Help needed with integrating Stripe payments

Wappler General How To
#21

Ooh, that looks very promising. I shall give it a go right now. Huge thanks, I’ll let you know.

#22

Thanks again for your help. I reckon you have the solution but, for some reason, I just cannot get my success event to trigger. I’ve tried putting an alert or notification in there but it’s just not firing so I’m now trying to work out why.

#23

I’ve spent about 2 days on this now and it’s driving me mad. @Teodor or @George, are you able to give me any help with this? The Stripe info is here:

Cheers, Jon.

1 Like
#24
#25

Instead of dmx-on:success="runStripe()" it should be onsuccess="runStripe()".

#26

Thanks @patrick. Unfortunately I’ve already tried that and it didn’t work. I’ve just tried it again just to be sure but it’s still not firing.

#27

Hi again @patrick. It’s now triggering! I’ve put in a line to output to the console log and it’s appearing. So the issue isn’t the triggering, it’s the value of the clientSecret which doesn’t seem to be setting.

The line I have is:

var clientSecret = dmx.parse("connDancerInsert.data.apiStripePaymentIntent.data.client_secret");

The console error is:

Uncaught IntegrationError: Invalid value for stripe.handleCardPayment intent secret: value should be a client_secret string. You specified: undefined.

Any ideas?

#28

Try making a small change by adding an extra delay. This should give App Connect the time to update the bindings first.

function runStripe() {
  requestAnimationFrame(function() {
    stripe.handleCardPayment(
      dmx.parse("connDancerInsert.data.apiStripePaymentIntent.data.client_secret"),
      cardElement, {
        payment_method_data: {
          billing_details: {name: cardholderName.value}
        }
      }
    ).then(function(result) {
      if (result.error) {
        // Display error.message in your UI.
      } else {
        // The payment has succeeded. Display a success message.
      }
    });
  });
}
#29

Thanks again, @patrick. I’m still having problems.

If I put the onsuccess command in the form tag then it does execute the script but the clientSecret is undefined.

But, if I put the onsuccess command in the Server Connect then it doesn’t trigger at all. So nothing put in the onsuccess, or the dynamic event Success, in the Server Connect seems to work.

My thinking is I need the onsuccess to be in the Server Connect when that completes rather than the form in order to get the variable but that’s just not doing anything.

Is that right?

#30

When should the runStripe be called, is this on page load as soon you have the client_secret or after some user action. If I check the documentation from stripe you link to they run it after click on button.

Perhaps you could share the full html of your page, you may also send it me in a private message.

#31

If it helps, I’ve had to wrap scripts in a timeout with even just a 1 ms delay to deal with the same type of issue:

function yourFunctionName () {
    setTimeout(function(){
   // your function code here

}, 1);
}
#32

@patrick - I have a form on the page which the visitor completes. They click the submit button and the data is inserted into the database, the Stripe API executes and sends data to Stripe and gets the clientSecret back. Then, the javascript in my runStripe function should run which talks back to Stripe and causes the credit card entry form to appear so the payment can be made. Everything works as it should until that last step.

I’ve put a Success Static Event into the Server Connect action and also tried a Success Dynamic Event but neither seem to trigger.

I’ve sent you the whole file via private message. Thanks again.

#33

Thanks @mebeingken, I actually did exactly that the other day but with the value of 2,000 so it delayed 2 seconds but that still didn’t give me the clientSecret (it remained undefined).

#34

I have it working! I’ll try and explain what the problem was but it might be tricky for others to understand without seeing all the code, which I can’t post for obvious reasons.

I have a Server Action which has a few steps in it. One is the API Action and another is a Database Insert. The problem was that I had put a Server Connect of that Server Action on the page and was trying to bring the variables in from it. @patrick was able to spot that and let me know that it wasn’t actually doing anything so I have now removed it.

The variables are actually coming back via the Server Action of the form. In the data bindings there is a data section which has all the variables and I’d never spotted that before. I changed to this and it’s now working perfectly.

I need to tidy up some output but the functionality is there.

Thanks everyone for your help. It’s actually given me more insight into Wappler which will be invaluable.

1 Like
#35