Stripe Checkout Tutorial

[max_gb]

Thanks Jon, I’ve updated the tutorial with your findings. Surprised on the 200 response though, my integration wouldn’t work without it!

[dmbe11]

I am working with this tutorial and had a question. Would it be possible to do the following steps that @Max_gb provided using the visual tools built into Wappler? I can see the result in the Data Binding window but I am unable to reproduce it myself. Any help would be appreciated.

Thank you

@max_gb

<form id="cartForm" method="post" is="dmx-serverconnect-form" action="dmxConnect/api/stripe/checkout.php" dmx-on:success="run({runJS:{function:'runStripe'}})">
    <div class="row" is="dmx-repeat" id="rCart" dmx-bind:repeat="cart.data">

        <div class="col-4">
			<input id="productID" name="productID" type="hidden" class="form-control" dmx-bind:value="product_id" dmx-bind:name="record[{{$index}}][productID]">
		</div>

        <div class="col-4">
			<input id="lineQty" name="lineQty" type="hidden" class="form-control" dmx-bind:value="qty" dmx-bind:name="record[{{$index}}][lineQty]">
     	</div>

        <div class="col-3">
			<input id="linePrice" name="linePrice" type="hidden" class="form-control" dmx-bind:value="(price.toNumber() * qty)" dmx-bind:name="record[{{$index}}][linePrice]">
        </div>

        <div class="col-1">
			<p dmx-on:click="cart.delete({$id: $id})"><i class="far fa-trash-alt"></i></p>
		</div>

    </div>
</form>

[dmbe11]

Hi Max,
I have a question regarding the use of the new prices line items with stripe checkout. I set up my products using the prices api where you have one product and multiple prices. The biggest difference is that you only send a price_id, quantity, success and cancel urls, payment type, and mode. The problem I am having is the system thinks I am using the old checkout mode. Co you think it has to do with something I need to be sending along in the runstripe function? I was looking at the api info and I did see something about using a checkout button but that may not be related. Any thoughts on the matter?
By the way!, when I use the “Define Scheme” step it works just fine but when I try it with my entrie setup it returns an error looking for the currency parameter. If I add it get all confused and says I dont need it.

thank you

[max_gb]

I’ve followed the Payment Intents API rather than the old charges api so everything should work correctly, you can follow the Stripe docs to confirm.

The define schema will throw an error so you will have to play around with the input values, I can’t remember which one it was but it should tell you in the output.

[dmbe11]

ok thanks, in your setup did you require the stripe checkout for (running on stripe) to collect a shipping address?

[max_gb]

Yes you can collect a shipping address - https://stripe.com/docs/api/checkout/sessions/object#checkout_session_object-shipping_address_collection

[dmbe11]

I really am a newbie, I tried that step by adding this line to the API

shipping_address_collection[allowed_countries]"=US

I put the first part under name and US under value. Just like with the other parameters and it say nope. Should I enter it a different way? As I said I was able to get the billing address parameter to work:

billing_address_collection=auto

I entered it the same way. I searched the documentation for hours trying to find an example to verify how I entered the parameter but I could find nothing.

[max_gb]

It would simply be

"shipping_address_collection": US,

So in Wappler API action under the Input data, create a new line with Name being shipping_address_collection and the Value being US

[dmbe11]

That is exactly what I did and I got this back:
{“error”:{“message”:“Invalid object”,“param”:“shipping_address_collection”,“type”:“invalid_request_error”}}

I wonder if something is not updating in Wappler. I use docker and digitalocean and sometimes I think things don’t get uploaded. I am able to get the Business address to show up so maybe I can use that to get the address to send the product. I make dog treats for a business hobby and most of my sales are local at the farmers market but I have some customers who want to order online during the winter. I appreciate your help. I am a Design Professor by trade and even visual programming has been a bit difficult for me at times but I do find it challenging.

[dmbe11]

I wanted to update this response I received from Stripe in case it could help someone else:

take note that shipping_address_collection[allowed_countries] is an array and in curl command, you will need to pass the array using the syntax like following

-d “shipping_address_collection[allowed_countries][0]”=CA
-d “shipping_address_collection[allowed_countries][1]”=US \

take note of the [0] and [1] where are the array index indication.

[brad]

@max_gb

This is my checkout server action:

I am not clear on this part I have Highlighted. I think I have the ‘insOrder’ insert figured out. I do successfully insert into my order table.

And I assume I get the ‘totalPrice’ query from the repeat step? But I need help with that repeat step. What does that query look like?

And where does the {{_POST record}} come from?

[brad]

@max_gb

dmx-bind:name="record[{{$index}}][productID]"

Looks like you have your whole check out cart in a form? Can you explain a bit about dmx-bind:name attributes?

[brad]

@max_gb

Under globals $_POST I have an array called record . Within this, there are variables for: productID and QTY. The repeat expression is based on this array, the most important variable is the productID.

Ok, I figured out where you get the $_POST record from … but how do you get the variables in there?

I’m trying!

[max_gb]

@brad

And where does the {{_POST record}} come from?

Check this post, shows the snippet needed to get the cart contents to your server action.

[brad]

@max_gb

2. Next we need to create a few $_POST variables under Globals.

Variable: id
Variable: created
Variable: type

Object: data
    Object: object
            Variable: payment_intent

Ok, I understand what this endpoint is suppose to do but what are the variables for? (id, created, type)

And can this webhook be taken one step further and add an email step to send a confirmation to user and admin?

[max_gb]

Technically you don’t need them, they’re usable if you wanted to store it for an audit trail or if you needed to compare values

[brad]

Having trouble with the webhook endpoint. The endpoint/webhook is successful

But the data is. not being updated in my database. Here is my action post objects, is this right?

[brad]

@max_gb

And finally I insert a Response and set it to 200. This is to alert Stripe that we have received and accepted the webhook.

This did indeed prevent the webhook from succeeding for me.

[Qaiser]

I’m getting this error when clicking on fetch, can anyone have any idea about this error?

[sitestreet]

You need a value in the idempotent field. I set this to a hash of the current time just so it’s random like this:

Idempotency-Key
{{NOW_UTC.sha1('saltvalue')}}

This is set in the headers of your Stripe API action.