Stripe Integration Part 4a - The basic Payment Action - App Connect Page

This is a longer tutorial so i have split it into 2 parts dealing with the App connect and server Connect sides separately

Most of the required code is available from the stripe APi documentation then a few minnor customisations are required

Take a look at the Stripe.js and Elements page here

From here we need to take some HTML, CSS and Javascript

On that page you will see a section were you can copy the code

Copy the HTML code to your new page, I suggest you create a new page, add app connect and bootstrap, create a container and paste the html into the container

Secondly you need to create the CSS and JS for the page

Personally i prefer to create separate CSS and .JS files to hold the information

Create these pages and then copy the .JS and CSS code from the CSS and Javascript tabs on the stripe page

I include example files here as zip files

HTML Page:
stripepay.zip (1.1 KB)

CSS Page
style.zip (482 Bytes)

elements.zip (1.0 KB)

The sample HTML file shows where to add your JS links which must be after the form tags


Don’t forget to include the css file in the header


In testing this I found that when I added APP connect and Bootstrap to the page the card processing div did not display correctly and appeared to have a width of 0.
Hence i have made on change to the CSS provided by stripe and added a width attribute, in this case width:100%; This cured the problem


We need to pass a checkout value to the stripe API.
To pass values to the checkout we use hidden fields. As the use of an amount input could easily be hacked via the developers console we do not send the amount to the checkout, we send a product code and allow the price to be collected via that within the server action

In this simple example i am going to send the product ID of one item to the checkout
We can see this is the sample code:

<input type="hidden" name="ProductID" class="form-control mb-3 StripeElement StripeElement--empty"  dmx-bind:value="1">

This will provide a Product ID to match this simple products table, in this case a Widget Type 1


Lastly note the browser.goto


The stripe checkout really screws with the server action which actually runs in the browser window and returns either a blank screen (if output off) or the returned json which you definable don’t want the customer to be able to see.
Due to this a browser.goto is essential to take the focus to a new page

NOTE I have not forgotten about checking for status returns to indicate failure issues, we will come back to that later

Next we will look at the Server Connect side of the process