Basic implementation using Stripe Elements

Wappler General Need Help
1

With the previous version of Stripe, I could create a payment form integrated on a payment page (ie not the hosted page option). Neither products not customers are stored in Stripe, so it was just a matter of creating a form with the card details, description and price. The Stripe Card component was included in a form, which was submitted to an API using Create Payment Intent. This was quite straightforward.

I would like to create exacly the same functionality with Stripe Elements. After quite a few hours reading posts, watchcing videos and trying AI etc. I think I’ve got close but am missing some essential details.

I’ve created a page with the Stripe Element and Stripe Payment components. The dynamically created form is submitted to a Server Connect API using the Create Payment Intent template. Payments are sent to Stripe and essentially it works. but I’m stuck on something which must be staring me in the face:

How do I pass parameters (the amount, description and customer name/email address) to the API from the payment page? I can enter a static price and description but obviously that’s no use. The form and inputs are created dynamically so it doesn’t seem possible to add fields. I’ve also tried adding the Amount Dynamic Attribute but this doesn’t work even with a static value.

I would be very grateful for any help.

2

Can you please explain in more details/screenshots what exactly do you have on your page, what info do you want to send and where?

3

The payment page is very straightforward. Here’s App Connect structure and the result:

image
image900×363 77.8 KB

. and here’s the code:

```
<!doctype html>
<html>

<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap/5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="dmxAppConnect/dmxAppConnect.js"></script>
    <script src="https://js.stripe.com/v3/" defer></script>
    <script src="dmxAppConnect/dmxStripe/dmxStripe.js" defer></script>
</head>

<body is="dmx-app" id="stripe_test">
    <dmx-serverconnect id="sc_stripe" url="dmxConnect/api/stripe/createPmtIntent.php"></dmx-serverconnect>
    <dmx-stripe-elements id="stripe-elements" flow="withIntent" key="pk_test_xxxxxxxxxxxxxxxxxx" dmx-bind:client-secret="sc_stripe.data.client_secret"></dmx-stripe-elements>
    
    <div class="container mt-4">
        <div class="row">
            <div class="col">
                <dmx-stripe-payment id="stripe-payment1"></dmx-stripe-payment>
                <button id="btn1" class="btn btn-primary mt-2" dmx-on:click="run({'stripe.confirmPayment':{name:'confirmPayment',output:true,confirmParams:{return_url:'/about.php'}}})">Make Payment</button>
            </div>
        </div>
    </div>

    <script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
```

The form created above is submitted to a server connect API using the Create Payment Intent template. Essentially, I want to know how to pass values to these fields:

image
image575×721 29 KB

In the previous Stripe implementation, I could simply create a form like this, with extra fields like this:

image
image857×221 20.5 KB

(or usually hidden field ), but I can’t see how to do this with the new Stripe Elements (perhaps I’m using the wrong options). I think I must be missing something obvious.

Thanks