One final attempt at eCommerce

[brad]

Ok, this will be my final post on the eCommerce tools or lack of in Wappler.

I have one week left to inform a client if I can redo their site or not before their AGM. (Been putting it off for two years now) So, even though I am sure I cannot do it, I am going to try. I need to know what my best plan of attack is. Please don’t link to the tutorials on this, I have read them all many times. Stripe tutorials as well. I am even more confused after reading them than I was before.

My need is very simple. I have a community theatre website and I have to sell theatre tickets to the plays online. To make it even simpler it is only one show at a time. So I need one item (name of show) with up to 12 options (show dates). I need to be able to add this to a cart, adjust quantity, checkout to Stripe Checkout or PayPal. Both client and purchaser should get an email with purchase details. Thats it. I do not need any shipping or taxes or anything like that. Just a simple one product, add to cart and checkout. Should be very simple.

Do I have to have my products in a database or do I administer my products from the Stripe dashboard?
- If I add my products to the Stripe Dashboard, how do I add them to my site?
- If I had my products to the Stripe Dashboard, how do I enter product options? Or do I have to enter in a product for each date?

I do not need to track any purchases in a database (but it’s ok if that is an easier way to go). I do need in the confirmation email that both parties get is the purchaser name and product.
- Does the Stripe purchase email confirmation go to both parties and contain that information?
- Is there a Stripe transaction email that goes to both parties?

Can this all be done without custom hand coding?

Suppose I get a cart working, how do you test to make sure checkout is working?

As you can see, my needs are very basic. I just have no idea where to start or how to set this up.

Current Website is: https://wlstudiotheatre.ca/

Anyone have any thoughts on where I would start? Much appreciated in advance.

[ben]

@brad

If I add my products to the Stripe Dashboard, how do I add them to my site?

I have not used Stripe, but this should be no different to other payment gateways.

In my experience, it is easiest to create your own procedure through to the checkout and allow the payment gateway to process the payment.

The flow:

1. click the payment button
2. the payment gateway will show the payment form
3. when payment is made, the gateway will notify the site after which you can notify the purchaser

This requires tables for Products, Customers, Invoices and Invoice details.

A Sandbox can be used to test the payment system.

[brad]

@ben

In my experience, it is easiest to create your own procedure through to the checkout and allow the payment gateway to process the payment.

Thanks Ben, this part especially I am not clear on. How is my total and product information passed on to the payment gateway?

I can't really start structuring my cart procedures until I know what is required by the payment gateway?

Does the payment gateway confirmation email state what the products purchased are?

[ben]

This is the form for Square

<form id="nonce-form" novalidate="" action="dmxConnect/api/square/transactions/charge.php" method="post" is="dmx-serverconnect-form">

    <fieldset>

        <div class="row">

            <div class="col">

                <div id="sq-card-number"></div>

            </div>

        </div>

        <div class="row">

            <div class="col-6">

                <div id="sq-expiration-date"></div>

            </div>

            <div class="col-6">

                <div id="sq-cvv"></div>

            </div>

        </div>

    </fieldset>

    <input type="hidden" id="card-nonce" name="nonce">

    <input type="hidden" name="amount_money[amount]" dmx-bind:value="(arrSubTotal.items.sum() + postage.value.toNumber()) * 100">

    <input type="hidden" name="userid" dmx-bind:value="scUser.data.qryUser[0].UserID" id="userid">

    <input type="hidden" name="userName" id="userName" dmx-bind:value="scUser.data.qryUser[0].UserFirstName + ' ' + scUser.data.qryUser[0].UserLastName">

    <input type="hidden" name="userEmail" id="userEmail" dmx-bind:value="scUser.data.qryUser[0].UserEmail">

    <input type="hidden" name="subtotal" id="subtotal" dmx-bind:value="arrSubTotal.items.sum()">

    <input type="hidden" name="postagehandling" id="postagehandling" dmx-bind:value="postage.value">

    <div id="record" is="dmx-repeat" dmx-bind:repeat="session.data.cart">

        <input id="inp_OrderDetailProductName" name="OrderDetailProductName" dmx-bind:name="record[{{$index}}][OrderDetailProductName]" dmx-bind:value="product" type="hidden">

        <input type="hidden" id="inp_OrderDetailPrice" name="OrderDetailPrice" dmx-bind:name="record[{{$index}}][OrderDetailPrice]" dmx-bind:value="price">

        <input type="hidden" id="inp_OrderDetailQuantity" name="OrderDetailQuantity" dmx-bind:name="record[{{$index}}][OrderDetailQuantity]" dmx-bind:value="qty.toNumber()">

    </div>

    <button id="sq-creditcard" class="btn btn-block btn-success mt-2" onclick="onGetCardNonce(event)" dmx-bind:disabled="state.executing">Pay

        {{(arrSubTotal.items.sum() + postage.value.toNumber()).formatCurrency("$", ".", ",", "2")}}

        <span class="spinner-border spinner-border-sm" role="status" dmx-show="state.executing"></span>

    </button>

</form>

And this is the Server side of things:

[brad]

So you are sending out your own confirmation emails? How are you handling repeating rows in an email?

[ben]

When payment has been made, the purchaser is redirected to the invoice that can be printed. There is also a logged in page where the purchaser can review/print the invoices.

A link to the invoices page is supplied in the email.

[max_gb]

Brad,

I recently completed a similar project you can see in the portfolio. It uses the data store component for the shopping cart and Stripe for payment. It was slightly more complex than normal as the client wanted members to be able to sign up, renew and receive discounted tickets.

@brad

Do I have to have my products in a database or do I administer my products from the Stripe dashboard?

Keep them in a database, I chose not to use Stripe for managing the products.

@brad

I do not need to track any purchases in a database

As you've got the database already for storing the tickets you may as well store the order details too. It's easier for integrating with Stripe, sending emails etc.

@brad

I do need in the confirmation email that both parties get is the purchaser name and product.

This was probably one of the more trickiest parts to get around as Wappler doesn't yet support repeats within the email body. I used an external email provider and sent them the data as an array. Still not ideal but the tickets can be seen on the user's online account.

@brad

Does the Stripe purchase email confirmation go to both parties and contain that information?

Yes there is a setting in the Stripe dashboard to enable admin email receipts. You could in fact let Stripe handle all of the email receipts to be fair. (I didn't think of this until now)

@brad

Can this all be done without custom hand coding?

It can all be done within Wappler, I started my project in PHP as Node was very early days. Again on standard shared hosting, no docker or anything else fancy for the infrastructure.

@brad

Suppose I get a cart working, how do you test to make sure checkout is working?

As Ben has mentioned Stripe give you two sets of keys, on is for development and the other is for live use. The development key lets you process payments without actually charging the card, you can use their test card numbers to trial the checkout process - Test card numbers | Stripe Documentation

Hope this helps in your ecommerce journey.

[Antony]

Hi there Brad…

My app works in a very similar way to Max. I send all the emails from my app via Postmark… The I can use repeats in server actions to compose the email content. I just use Stripe to take payment - nothing else.

Here is how to integrate Stripe just for payment…

(Link is coming… Can’t seem to copy it on my phone!)

Good luck!
Antony

[brad]

Thanks @max_gb. I am about to dive into this. Which site have you done this with? Would love to see how it is set up.

[sitestreet]

Just to chip in. I set up confirmation emails completely within Wappler by creating a variable which would contain the table in the email (the actual list of products ordered). I used a repeat to go through the products in the order and appended the html to the end of it.

eg. A variable called ‘items’ and a repeat which went through all the items in the order adding <tr><td>{item_name}</td><td>{qty}</td></tr> to it. My email body then had the <table> and </table> tags and output the variable inbetween them. Works perfectly.

[max_gb]

Would you be able to share a shot of your server action? I’ll admit I struggled with the email part. Didn’t think to use a variable

[sitestreet]

Of course. Here’s a couple of screenshots to hopefully illustrate how I did it.

The below code is what’s in the Set Value line in the loop.

I missed the part which starts the variable which contains this:

<table cellpadding="3" style="border: solid 1px #999999;">
<tr>
<th>Category</th>
<th>Product</th>
<th>Colour</th>
<th>Size</th>
<th align="right">Price</th>
<th align="right">Qty</th>
<th align="right">Total</th>
</tr>

And then just before sending the email the Set Value contains this:

{{OrderDetails}}
</table>

Hopefully this shows the logic clearly. Pretty basic and I stuck with old fashioned tables because it just works with all the email clients.

[max_gb]

I’ll give this a try, thanks!

[samrich]

@Antony

Antony,

I’m having some trouble with Stripe’s API. I can send the basics (currency, source, amount, description) But I cannot send any billing details or shipping details. At the moment, I would just like to send the customers name and email to the API so that when I view the charges in the Stripe dashboard I could tell which one is for whom. My payment is straightforward, just an amount. I already know the user’s name and email, can get it from the database.

How are you using Stripe? Which method?
What files did you have to setup?(ie: js, css, php, etc)
What does the Server Action look like?
What does the api call in that Server Action look like?

[samrich]

Antony,

Please ignore the previous reply. I managed to get the newer Stripe API working.