Stripe Integration Part 4b - The Basic Payment Action - Server Connect Page

Introduction We have covered the creation of the APP connect based payment page and this tutorial follows on from that to deal with the server connect and API p

Discuss

Introduction

We have covered the creation of the APP connect based payment page and this tutorial follows on from that to deal with the server connect and API parts of the process

Before we start, i have made some amendments to the part 4a code relating to the hidden fields

Former App Connect Page Amendments

The hidden field “ProductID” has now been changed to lower case “productid” and i have added another field, quantity so we now have:

      <input type="hidden" name="productid" class="form-control mb-3 StripeElement StripeElement--empty"  value="1">
      <input type="hidden" name="quantity" class="form-control mb-3 StripeElement StripeElement--empty"  value="1">

The Product Order Detail

In this case we are selling a quantity of 1 Type 1 Widget (product Id = 1)

This should be priced at 250 currency units, in my case UK pence so total £2.50 ( i have priced the product table in pence, not pounds)

The Server Action

So create your sever action, i have called it send_charge.

POST Variables

Add your post variables. stripeToken must match this case, productid and quantity must match those in your app connect form in name and case.

Server Action Overview

Now we set up the server action

Initializing The Variables

Firstly we make a server connection, this is well documented and i won’t say more
Next we go to Core Actions =>Set Value and declare a variable. It’s value is not important as this is overwritten later. This is initialised purely as it will not be available in the data picker unless initialised outside the repeat

We do the same for the product description which we will also obtain from a data query later

Retrieving the Price and Description via a data query

Next we query our products table using the product id posted to the action and return the price (in the cost column of the table)

Extracting Price and Description from the data query

We now set up a repeat based on that query i have called get_price

Setting the Price and Description variables

Next form within that repeat we redefine the variables itemprice and description to the values returned by the query from the products table.

Now we have retrieved the price and description so we can send the payment to Stripe

The API Call

Add an API Action stage

Our Action will be as below

Pass Errors Option

Keep “Pass Errors” checked until fully debugged so errors are echoed to the console

The API Call URL and Type

Our API Url is: https://api.stripe.com/v1/charges and Method is POST

The API Header

In the headers Section add the authorisation string i.e. the word Bearer followed by your secret key as outlined in Parts 1 and 2

The API Query

In the Query section we add the following:

Currency

currency: in my case gbp

Description

Description: This is the value of out variable {{description}}

Source

source is our stripeToken {{$_POST.stripeToken}} (which is automatically created at app connect level by the stripe javascript)

Amount

amount is our variable {{itemprice}}

The returned Object for Stripe

Once posted Stripe returns the object for the newly charged item, the makeup can be viewed via this link

Storing the Results in a Database Table

This can then be stored in a database table using an insert action

What needs to be stored

As most data can be retrieved via the API (see later) it is not actually necessary to store much more than the transaction ID however in this demo I have stored the entire returned object to illustrate how it works (63 columns)

The API Data Types

The API returns 4 data types
Numeric and string can be stored as is
Boolean can be stored using the expression {{fieldname?1:0}
Stripe also returns arrays for items like metadata (we will discuss this later) At this stage I suggest you ignore these until you understand their function as empty arrays are returned which can cause errors when storing.

###The Data Insert Query
A sample screen for this action is below:

Sample Table in Zipped .sql Format

An empty copy of this table in zipped .sql is attached. stripe_payment.zip (963 Bytes)

Ensure your app connect form has the correct server action set to point to this new server action

The Data Table Contents after the Transaction

The data is then stored in the database table (see sample below)

Checking your Stripe Account for Confirmation of the Transaction

Check your stripe account and you will see the transaction listed in your Dashboard

Next we will look at adding shipping details