Stripe payment form not showing

[daves88]

Hi Wapplers,

Using latest version of Wappler, nodeJS, dockers.

Problem I am having is the stripe payment form is not showing up. Also, I am getting a Stripe is undefined error even though on my layout page I have declared:

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

Any idea what is going on?

Thanks!

[Teodor]

On the serverside you need to setup your payment intent server action (there's a create payment intent template step), then on the front end bind the returned client_secret to the stripe elements component.
Once you do this the payment element will show.

[daves88]

Thank you! That only took 2 days for me to figure out How do you pass a payment method to Stripe? as payments are goign through as incomplete?

[Teodor]

@daves88

How do you pass a payment method to Stripe?

Not sure i understand what are you asking exactly, but make sure to enable Automatic Payment Methods in the payment intent step in your server action:

On the page you will see the payment methods you enabled in the dashboard:

[daves88]

HI teodor,

Form UI is still not showing up.

My code is:

 <form id="form1" method="post" is="dmx-stripe-checkout-form" action="/api/newdeal/submitdeal" dmx-bind:prop-client-secret="'client_secret'">
                        <dmx-stripe-elements id="stripe-elements1" currency="aud" key="hiddenforshowingpurposes" locale="en" mode="payment" appearance-theme="bootstrap" amount="2323" payment-method-types="card"></dmx-stripe-elements>
                        <dmx-stripe-payment id="stripe-payment1">

                        </dmx-stripe-payment>
                    </form>

[daves88]

Okay the form is now showing. Should it be wrapped in a stripe form? How do I retrieve the client_secret? Also, still not sending payment method of card through

[evilvillain]

Were you ever able to find a resolution for the payment method not being sent? I'm encountering the same issue on both stripe elements and stripe-card/stripe-payments.

[revolution]

Hi aves88, have you found a way to complete the payment? I'm having the same issue and can't seem to figure it out.

[daves88]

Hi there, the Stripe module is far from perfect and needs a lot of TLC from the Wappler staff. They need to go through and test it thoroughly as there are quite a few bugs, and not nearly as straight forward as it should be. For example, if you have other sever actions on the payment intent server action (other than the Stripe stuff), the credit card form does not show up on the client side. I actually gave up completely and stopped wrestling with it. Instead I am now using the Stripe checkout hosted solution. Sorry I can't be more help but hopefully the staff pick up on the frustrations we all have with Stripe just not being where it should be on Wappler.

[ben]

Ditto

[TomD]

This and similar posts is one of the things that makes me reluctant to upgrade to the current version of Wappler. I get the impression (but could be wrong) that no one has managed to get the latest Stripe features to work - and for many sites this is critical.

I would rather stay on an older version if upgrading means spending a lot of time fixing broken functionality. I know this is inevitable to some extent (but I don't think it should be).

[Teodor]

@TomD

This and similar posts is one of the things that makes me reluctant to upgrade to the current version of Wappler. I get the impression (but could be wrong) that no one has managed to get the latest Stripe features to work - and for many sites this is critical.

We are not aware of any issues related to stripe checkout. There are updated docs about the new stripe components/elements which explain how to use them. We tested all the steps and i can confirm everything is working as it should:

You can check the docs:

Stripe Elements Overview

Intro Stripe Elements is a set of prebuilt UI components for building your web checkout flow. Elements features include: Automatic input formatting as customers type Complete UI translations to match your customer’s preferred language Responsive design to fit seamlessly on any screen size Custom styling rules so you can match the look and feel of your site Stripe Elements The following Stripe Elements are available in Wappler: Stripe Address The Address Element is an embeddable UI compo…

Creating a Stripe Buy Button

Intro You can create a customizable buy button to sell a product, subscription, or accept a payment on your website. The Buy Button redirects customers to a Stripe-hosted payment page. The Stripe buy button makes it easy to integrate secure payment options into online platforms for selling products or subscriptions with fixed prices. Buy Button The buy button requires you to have products set up in your Stripe account. You can create, access and edit the products and pricing on your Stripe d…

Creating Stripe Pricing Tables

Intro You can easily create a table that displays different subscription pricing levels to your customers. The Stripe Pricing Table is simple to configure using the the Stripe Dashboard. Stripe Pricing Table The Pricing Table displays pricing information and takes customers to a prebuilt checkout flow. Pricing Table Setup In the Dashboard, go to More > Product catalog > pricing tables Click +Create pricing table: [Screenshot_23] Add products or select from the existing ones. Optionally,…

Using Stripe Embedded Checkout

Intro Stripe's Embedded Checkout Form offers a powerful solution, allowing you to integrate a customizable and responsive payment form directly into your website. This enhances the user experience and ensures secure transactions. The Stripe Embedded Checkout Form simplifies the payment process for customers, allowing them to complete their purchases without being redirected to an external site. Whether you are running a small business, an online store, or a large enterprise, Stripe’s Embedded…

for any specific problems make sure to create a proper bug report showing what exactly are you doing in the server actions, what do you have on the page and what are the errors you see in the dev tools console.

Reports like "i can't get it to work", "it doesn't work" are not really useful for us to identify the problems you might be having.

Usually Stripe error messages are quite useful to identify the issues.

[revolution]

Hello everyone, I think the issue isn't with how it works, but with having proper step-by-step guides that lead us to a full understanding of all the components available on both the server and client side. In short, we’re missing that guide that makes us feel skilled even if we’re not really there yet...