Purchasing...DONE! Thank you page and.... Ciao!

6 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$49.99
List Price:  $69.99
You save:  $20
€48.02
List Price:  €67.23
You save:  €19.21
£39.14
List Price:  £54.79
You save:  £15.65
CA$71.63
List Price:  CA$100.29
You save:  CA$28.65
A$80.06
List Price:  A$112.09
You save:  A$32.03
S$67.51
List Price:  S$94.52
You save:  S$27.01
HK$388.46
List Price:  HK$543.88
You save:  HK$155.41
CHF 44.24
List Price:  CHF 61.94
You save:  CHF 17.70
NOK kr563.34
List Price:  NOK kr788.73
You save:  NOK kr225.38
DKK kr358.57
List Price:  DKK kr502.03
You save:  DKK kr143.46
NZ$88.43
List Price:  NZ$123.81
You save:  NZ$35.37
د.إ183.61
List Price:  د.إ257.07
You save:  د.إ73.45
৳5,964.32
List Price:  ৳8,350.53
You save:  ৳2,386.20
₹4,269.04
List Price:  ₹5,977
You save:  ₹1,707.95
RM224.30
List Price:  RM314.04
You save:  RM89.74
₦77,264.53
List Price:  ₦108,176.53
You save:  ₦30,911.99
₨13,894.99
List Price:  ₨19,454.09
You save:  ₨5,559.10
฿1,708.15
List Price:  ฿2,391.55
You save:  ฿683.40
₺1,759.41
List Price:  ₺2,463.31
You save:  ₺703.90
B$318.75
List Price:  B$446.27
You save:  B$127.52
R937.33
List Price:  R1,312.34
You save:  R375
Лв93.99
List Price:  Лв131.59
You save:  Лв37.60
₩72,848.40
List Price:  ₩101,993.60
You save:  ₩29,145.19
₪182.43
List Price:  ₪255.42
You save:  ₪72.98
₱2,932.41
List Price:  ₱4,105.61
You save:  ₱1,173.20
¥7,857.17
List Price:  ¥11,000.67
You save:  ¥3,143.49
MX$1,008
List Price:  MX$1,411.29
You save:  MX$403.28
QR181.52
List Price:  QR254.14
You save:  QR72.62
P693.18
List Price:  P970.50
You save:  P277.32
KSh6,450.70
List Price:  KSh9,031.50
You save:  KSh2,580.80
E£2,541.20
List Price:  E£3,557.88
You save:  E£1,016.68
ብር6,354.82
List Price:  ብር8,897.26
You save:  ብር2,542.43
Kz45,590.88
List Price:  Kz63,830.88
You save:  Kz18,240
CLP$49,454.60
List Price:  CLP$69,240.40
You save:  CLP$19,785.80
CN¥364.87
List Price:  CN¥510.85
You save:  CN¥145.98
RD$3,040.26
List Price:  RD$4,256.60
You save:  RD$1,216.34
DA6,753.71
List Price:  DA9,455.74
You save:  DA2,702.02
FJ$115.90
List Price:  FJ$162.28
You save:  FJ$46.37
Q384.44
List Price:  Q538.26
You save:  Q153.81
GY$10,442.13
List Price:  GY$14,619.81
You save:  GY$4,177.68
ISK kr6,976.10
List Price:  ISK kr9,767.10
You save:  ISK kr2,791
DH503.31
List Price:  DH704.68
You save:  DH201.36
L920.86
List Price:  L1,289.28
You save:  L368.41
ден2,954.07
List Price:  ден4,135.94
You save:  ден1,181.86
MOP$399.27
List Price:  MOP$559.01
You save:  MOP$159.74
N$928.04
List Price:  N$1,299.34
You save:  N$371.29
C$1,836.54
List Price:  C$2,571.30
You save:  C$734.76
रु6,797.51
List Price:  रु9,517.06
You save:  रु2,719.54
S/185.85
List Price:  S/260.20
You save:  S/74.35
K202.57
List Price:  K283.61
You save:  K81.04
SAR187.71
List Price:  SAR262.82
You save:  SAR75.10
ZK1,381.27
List Price:  ZK1,933.89
You save:  ZK552.61
L239.16
List Price:  L334.85
You save:  L95.68
Kč1,208.85
List Price:  Kč1,692.49
You save:  Kč483.63
Ft19,737.39
List Price:  Ft27,633.93
You save:  Ft7,896.53
SEK kr544
List Price:  SEK kr761.65
You save:  SEK kr217.64
ARS$51,344.11
List Price:  ARS$71,885.87
You save:  ARS$20,541.75
Bs344.88
List Price:  Bs482.86
You save:  Bs137.98
COP$220,596.26
List Price:  COP$308,852.42
You save:  COP$88,256.15
₡25,341.90
List Price:  ₡35,480.70
You save:  ₡10,138.79
L1,268.10
List Price:  L1,775.44
You save:  L507.34
₲389,249.85
List Price:  ₲544,980.94
You save:  ₲155,731.08
$U2,221.61
List Price:  $U3,110.44
You save:  $U888.82
zł204.67
List Price:  zł286.56
You save:  zł81.88
Already have an account? Log In

Transcript

We are going to show the positive feedback to the user that big basically is composed by a simple checkmark inside a column and we will give even an order number that will simply be the transaction ID received by stripe. So as to create the thank you component. Some of you we will like to use all the functional component because you we have all the render method anyway in this case is not the purpose of this course to analyze these kind of topics. So, let's take an order number Prop, a number none the property from the props and we are going to return center div. We use the text center class from bootstrap. Then we can for example, inform the user saying thanks for your purchase and sound kind of my search your there was successfully place it.

And basically what we can do here is to create a thank you component that has its side. a checkmark the checkmark. html entity is the following one. 04 and inside we can have a div with the order number. You can even have directly the order barber that basically contains the, the order number written IDs. And we can even think of other known simple methods such as say you will receive your article in three, five, this So, let's go to use this component.

And as you can see from our cut for component we already have the pushy success successful and purchase transaction ID We import the thank you component. So let's go into use these two parameters in our render method. So what we are going to do is okay like this. So, what happens here, if per purchase is successful, we are simply going to return the thank you component in which the order number is set to purchase transaction ID. Otherwise, we show the classical for to see our order in place so, just to be sure that everything is working correctly, we try Again the worst case so when the sorry when the card payment is declined. So, for example this should be if I recall correctly okay so this works fine when the card is declined we see the error message now let's go to see what happens when the form is submitted with a valid card and here it is.

So we have the stripe transaction ID and we have our thanks for your purchase my such with the checkmark and so on. So, okay this was as you can see, the card declined error that we had before. And this is what we received when the successful API call was submitted. So, in the field, we have the transaction Id just to be sure we just check what happens okay, this is not so good we will of course, as an exercise you can give some margin here and some space here anyway, it I mean, the column works fine. So, this concludes our course, we have seen. So how to create a very simple, a very simple page that displays some articles with the chance to filter for types or to search by some terms and to submit stripe payment using get token that too you retrieve thanks to a very catchy stripe credit card for Thank you, everyone and I hope to see you in the next course.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.