Stripe - How do I bind client_secret?

[daves88]

Hi Wapplers,

I am struggling with getting the new Stripe elements to work. I am using Stripe Payment and the form is showing up (although no tabs are showing up with payment methods which is a seperate issue). I am trying to bind the client_secret for the server connect payment intent action to the Stripe elements, but its showing as undefined in my server logs. My form is:

  <form id="form1" is="dmx-stripe-checkout-form" payment-method="card" action="/api/newdeal/submitdeal" dmx-on:error="notifies1.warning(error)" dmx-on:success="notifies1.success('Valid order')" method="post">

                        <!-- Stripe Elements -->
                        <dmx-stripe-elements id="stripe-elements11" currency="aud" key="hidingthisforposting" locale="en" appearance-theme="bootstrap" dmx-bind:client-secret="createPaymentIntent.client_secret" mode="payment" amount="1000">
                        </dmx-stripe-elements>

                        <!-- Stripe Payment Method -->
                        <dmx-stripe-payment payment-method="card" id="stripe-payment1" layout="accordion">
                        </dmx-stripe-payment>

                        <!-- Submit Button -->
                        <button id="btn1511" class="btn btn-primary" type="submit">Button</button>
                    </form>

Results are:

server-connect:output status: 'requires_payment_method',
server-connect:output transfer_data: null,
server-connect:output transfer_group: null
server-connect:output } +472ms
server-connect:app Executing action step setvalue +395ms
server-connect:app options: {
server-connect:app value: '{{createPaymentIntent.client_secret}}',
server-connect:app key: 'client_secret'
server-connect:app } +0ms
server-connect:output client_secret: undefined +2ms

As you can see payment method is missing and client_secret is undefined,

[Teodor]

@daves88

I am trying to bind the client_secret for the server connect payment intent action to the Stripe elements

Bind the value returned by the server action to the client secret dynamic attribute of the stripe element.
Also you don't need any form to wrap the stripe elements and payment. Here's my test page code:

 <dmx-serverconnect id="serverconnect1" url="../dmxConnect/api/stripe/custom_checkout.php"></dmx-serverconnect>

<dmx-stripe-elements id="stripe-elements1" key="pk_test_1234567890" flow="withIntent" dmx-bind:client-secret="serverconnect1.data.client_secret">
    </dmx-stripe-elements>

    <div class="container pt-5">
        <div class="row">
            <div class="col">
                <dmx-stripe-payment id="stripe-payment1">
                </dmx-stripe-payment>
                <button class="btn" dmx-on:click="stripepayment1.confirmPayment({confirmParams:{return_url:'https://localhost'}})">Pay</button>
            </div>
        </div>
    </div>

[daves88]

Thanks I tried that before but it kept going through to stripe as “incomplete payment” because there was no payment method attached. My setup has automatic payment setup and in stripe dashboard as well. Also for some reason the payment tabs are not showing up at the top of the form it only has the word “card” in text

[Teodor]

@daves88

My setup has automatic payment setup and in stripe dashboard as well. Also for some reason the payment tabs are not showing up at the top of the form it only has the word “card” in text

Please post a screenshot of your page and the dev tools / console of your browser open next to it.

[daves88]

If I set flow in Stripe Elements as With Intent (as per yours) then the payment form does not even load. See below.

However when I set it to Without Intent then the payment form loads.

Also I noticed in your button you hacve a confirmpayment action. I dont have that. All I have is 1 server action which contains the payment intent template

I am using NodeJS not PHP.

[Teodor]

Remove the mode="payment" and currency="aud" from your code.
Can you just copy my code, paste it as it is on your page and change the keys/server actions/redirect urls to use your own values then test again.

@daves88

Also I noticed in your button you hacve a confirmpayment action.

Of course you need this to start the payment flow.

Also if anything does not appear as it should on your page just check dev tools/console of your browser the errors can be seen there, that's why i asked you to check there.

[daves88]

No form showing up.

Also worth mentioning this is declared on my layout page:

  <script src="/dmxAppConnect/dmxStripe/dmxStripe.js" defer></script>
  <script src="https://js.stripe.com/v3/" defer></script>

[Teodor]

Please open the Console of dev tools (not Network > XHR) and refresh your page. Don't hit the button to run the payment flow. Just see what errors are show in in the console on page load!

[daves88]

[Teodor]

So there are no Stripe related errors?
Is the payment intent server action actually running on your page? Can you check if you haven't set it to no auto load?

[daves88]

It was on no auto load.. just changed it and refreshed submitdeal is the api action

[Teodor]

So when you set it to load, do you see the payment element with the payment options which you configured on the dashboard?

Also, the return_url is defined on the button used to run the payment:

<button class="btn" dmx-on:click="stripepayment1.confirmPayment({confirmParams:{return_url:'https://your_url_here'}})">Pay</button>

[daves88]

I just noticed that error of not a valid url - so I just added https://google.com in the payment intent sevre action.. and now the error is: },
"error": "You cannot confirm this PaymentIntent because it's missing a payment method. You can either update the PaymentIntent with a payment method and then confirm it again, or confirm it again directly with a payment method or ConfirmationToken."
}

[daves88]

Just added your button and form is still not showing up:

    "chargeKyc": "no"
},
"error": "You cannot confirm this PaymentIntent because it's missing a payment method. You can either update the PaymentIntent with a payment method and then confirm it again, or confirm it again directly with a payment method or ConfirmationToken."

}

[Teodor]

On page load:

@Teodor

do you see the payment element with the payment options which you configured on the dashboard?

[daves88]

No on page load there is no form

[daves88]

Btw my payment form is in a modal..

[Teodor]

Do you see this error after clicking the Pay button?

[daves88]

No I can't even click the pay button as its not working

[Teodor]

Can you please create a new server action for the payment intent which only contains the payment intent template and test with it.
The only options to test with are these:

So test with this only, no other steps.