Stripe - Wappler 7.1 - Payments incomplete

[steveni]

Hi All,
I have found the latest Stripe components seem to be easier to setup. The problem I am having is that the payment method from the stripe-payment component is not being relayed to the payment intent. The payments are going to Stripe but not being processed - reason given "status": "requires_payment_method" Because the stripe-payment element has the payment type tabs shouldn't the chosen payment method be transferred to the server side payment intent?

As a side topic I spent 4 hours with AI trying to get it to create a stripe payment and it could not do it. It kept using old components that were deprecated and its final advice was that the Wappler Stripe documentation must need updating and to use the latest extensions.

[Teodor]

Stripe docs are available here, and these are the most recent ones, covering the latest stripe components:

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…

In addition to these docs, here’s also how to create use a custom checkout with these components:

Stripe - equivalent elements when upgrading from v6.8 to 7b14

For custom checkout you need: Server side: Create a server action. Add a Create Payment Intent Template: [Screenshot 2025-03-02 at 9.54.48] Setup its options - amount, currency and enable Automatic Payment Methods: [Screenshot 2025-03-02 at 9.55.34] Done, save the server action On your page Add the server action component and select the one you just created, with the payment intent inside: [Screenshot 2025-03-02 at 9.56.14] Add Stripe Elements component. Add your Key and set the Flow…

[patrick]

Do you use the confirmPayment method on the Stripe Payment element? Also important is that you have the Stripe Elements component on the page.

[steveni]

Hi Patrick, I have the stripe-elements on the page and stripe-payment. That is all. I am close as everything works except the error saying the "requires-payment-method. I cant see the confirmPayment method on the Stripe Payment element. Do you mean the flow on the button? I don't have that and will try it

[steveni]

That was it. Can you explain how that works?

[patrick]

Stripe js docs: Confirm a PaymentIntent

The confirmPayment method on the Payment element calls stripe.confirmPayment and sets the elements property to the instance of the Elements element on the page. The Elements instance knows about the Payment element and collects all the information from it and sends it to Stripe.

[steveni]

Thanks Patrick