Is the 'Stripe Payment Element' supported?

Wappler General How To
5

You’re mixing javascript and appconnect bindings.

If you want to create the payment element with the clientsecret, you can do something like this:

    // create the payment element with the clientsecret returned from 'create_order'
    function createPaymentElement(clientSecret){
        const appearance = {
        theme: 'stripe',
        };
        elements = dmx.stripe.instance.elements({ appearance, clientSecret });
        // options for rendering the payment element
        let options = {
            fields: {
                billingDetails: {
                name: 'never',
                email: 'never'
                }
            }   
        }
        const paymentElement = elements.create("payment", options); // added options to not render name and email
        paymentElement.mount("#payment-element");
}

Note that I wrapped it in a function createPaymentElement() and pass clientSecret as argument?
So I need to first create an order, I don’t think you need to do that. But you can apply the same logic as this…

image
image1227×1215 114 KB

I’m calling the function createPaymentElement() with the argument of the client secret that I got from the server action.

So that way I’m passing my app connect variable to javascript.

You can also access the javascript variables like this: const items = dmx.parse('CartContents.data.ProductData')

More info here: