WEBVTT

00:00.800 --> 00:06.260
So in this section of the course, we're going to build a simple form that allows someone to buy a widget

00:06.710 --> 00:11.930
and as you can see right here, we have our page up where someone can buy a widget and enter their first

00:11.930 --> 00:12.190
name.

00:12.200 --> 00:12.830
So I'll put it in.

00:12.830 --> 00:14.900
Bruce last name, Wayne.

00:15.290 --> 00:21.980
Email Bruce at Wayne Enterprises dot com.

00:22.010 --> 00:23.570
The name on the card is Bruce Wayne.

00:24.530 --> 00:29.300
And we put in a test credit card number, which doesn't really charge a credit card, but it takes us

00:29.300 --> 00:35.360
through the steps as though a real credit card was entered and I put an expiry date and a security code

00:35.360 --> 00:36.650
and charged the card.

00:36.980 --> 00:39.620
And when that happens, it does some client side validation.

00:40.010 --> 00:46.360
It calls straight from the back and authorizes the payment and then gives us a payment, succeeded page

00:46.370 --> 00:48.530
a receipt, which seems pretty straightforward.

00:48.680 --> 00:55.400
And when I go to my stripe dashboard and look at test transactions and reload this page, you can see

00:55.400 --> 00:58.660
that Bruce Wayne was actually charged ten dollars.

00:58.790 --> 01:00.520
So there's our transaction.

01:00.920 --> 01:04.390
So there's quite a few steps necessary to make this happen and to make it secure.

01:04.880 --> 01:09.860
And just so you know, in this section of the course, we're going to build this form and we're going

01:09.860 --> 01:11.740
to do it largely on the front end.

01:11.930 --> 01:16.190
There's some calls to the back end, but for the most part, we're going to be using the front end to

01:16.190 --> 01:18.530
make this transaction in the next section.

01:18.530 --> 01:22.800
When we actually subscribe to a monthly recurring payment, we buy a subscription.

01:22.820 --> 01:26.780
In other words, we'll do it the other way where the front end is purely cosmetic.

01:26.780 --> 01:31.150
It's some JavaScript and some HTML and all of the logic is done on the back end.

01:31.340 --> 01:33.480
That way you'll get experience doing it both ways.

01:33.770 --> 01:34.450
Let's get started.