Help needed with integrating Stripe payments

Hi everyone

I’m really getting into working with APIs in Wappler and it’s going really well. @Hyperbytes tutorial on integrating Stripe has been very helpful but, unfortunately, the API he used is no longer an option because of the new SCA regulatations so I’ve been trying to implement another of their APIs myself. But I need some help.

I’m using the instructions from here: https://stripe.com/docs/payments/payment-intents/web

I’ve created the API Server Action and it’s talking to Stripe fine. It sends some info and gets back the response.

My page has a fairly long form on it to get lots of information from the visitor. The submit button then stores all this in the database and also executes the API Server Action to talk to Stripe.

My database insert works perfectly and is also inserting data returned by the Stripe API but I need their javascript to then run so that the card payment details modal is shown (I think that’s what should happen but can’t be sure as I keep getting errors).

The code I’m pasting is this (from Step 4 at the link above):

var cardholderName = document.getElementById('cardholder-name');
var cardButton = document.getElementById('card-button');
var clientSecret = cardButton.dataset.secret;

cardButton.addEventListener('click', function(ev) {
  stripe.handleCardPayment(
    clientSecret, 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.
    }
  });
});

My form fields have the right IDs but I need to put the client secret in this line:

var clientSecret = cardButton.dataset.secret;

This is what’s driving me nuts! I’ve tried this:

var clientSecret = connDancerInsert.data.apiStripePaymentIntent.data.client_secret;

and this:

var clientSecret = '{{connDancerInsert.data.apiStripePaymentIntent.data.client_secret}}';

but neither work.

I’m sure it’s just a syntax issue but my javascript isn’t as good as it probably needs to be.

Can anyone give me a steer?

Cheers, Jon.