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
€47.98
List Price:  €67.18
You save:  €19.19
£39.89
List Price:  £55.86
You save:  £15.96
CA$69.90
List Price:  CA$97.87
You save:  CA$27.96
A$76.87
List Price:  A$107.62
You save:  A$30.75
S$67.31
List Price:  S$94.24
You save:  S$26.93
HK$389.14
List Price:  HK$544.83
You save:  HK$155.68
CHF 44.67
List Price:  CHF 62.54
You save:  CHF 17.87
NOK kr553.51
List Price:  NOK kr774.97
You save:  NOK kr221.45
DKK kr357.84
List Price:  DKK kr501
You save:  DKK kr143.16
NZ$85.68
List Price:  NZ$119.95
You save:  NZ$34.27
د.إ183.61
List Price:  د.إ257.07
You save:  د.إ73.46
৳5,972.22
List Price:  ৳8,361.58
You save:  ৳2,389.36
₹4,221.07
List Price:  ₹5,909.84
You save:  ₹1,688.76
RM223.35
List Price:  RM312.71
You save:  RM89.36
₦84,627.22
List Price:  ₦118,484.88
You save:  ₦33,857.66
₨13,887.22
List Price:  ₨19,443.22
You save:  ₨5,556
฿1,722.96
List Price:  ฿2,412.28
You save:  ฿689.32
₺1,727.27
List Price:  ₺2,418.32
You save:  ₺691.05
B$289.99
List Price:  B$406.01
You save:  B$116.02
R905.58
List Price:  R1,267.89
You save:  R362.30
Лв93.83
List Price:  Лв131.37
You save:  Лв37.54
₩70,211.45
List Price:  ₩98,301.65
You save:  ₩28,090.20
₪185.06
List Price:  ₪259.10
You save:  ₪74.04
₱2,946.36
List Price:  ₱4,125.14
You save:  ₱1,178.78
¥7,736.95
List Price:  ¥10,832.35
You save:  ¥3,095.40
MX$1,021.22
List Price:  MX$1,429.79
You save:  MX$408.57
QR182.26
List Price:  QR255.18
You save:  QR72.92
P683.46
List Price:  P956.90
You save:  P273.44
KSh6,472.14
List Price:  KSh9,061.51
You save:  KSh2,589.37
E£2,482.01
List Price:  E£3,475.01
You save:  E£993
ብር6,118.22
List Price:  ብር8,566
You save:  ብር2,447.77
Kz45,640.87
List Price:  Kz63,900.87
You save:  Kz18,260
CLP$49,324.13
List Price:  CLP$69,057.73
You save:  CLP$19,733.60
CN¥362.07
List Price:  CN¥506.93
You save:  CN¥144.86
RD$3,012.01
List Price:  RD$4,217.06
You save:  RD$1,205.04
DA6,712.40
List Price:  DA9,397.90
You save:  DA2,685.50
FJ$113.77
List Price:  FJ$159.29
You save:  FJ$45.51
Q385.78
List Price:  Q540.13
You save:  Q154.34
GY$10,455.70
List Price:  GY$14,638.82
You save:  GY$4,183.11
ISK kr6,982.60
List Price:  ISK kr9,776.20
You save:  ISK kr2,793.60
DH502.76
List Price:  DH703.91
You save:  DH201.14
L910.90
List Price:  L1,275.33
You save:  L364.43
ден2,951.80
List Price:  ден4,132.76
You save:  ден1,180.95
MOP$400.70
List Price:  MOP$561.01
You save:  MOP$160.31
N$906.31
List Price:  N$1,268.91
You save:  N$362.60
C$1,838.97
List Price:  C$2,574.70
You save:  C$735.73
रु6,749.45
List Price:  रु9,449.77
You save:  रु2,700.32
S/189.51
List Price:  S/265.32
You save:  S/75.81
K201.21
List Price:  K281.71
You save:  K80.50
SAR187.68
List Price:  SAR262.77
You save:  SAR75.08
ZK1,382
List Price:  ZK1,934.92
You save:  ZK552.91
L238.86
List Price:  L334.42
You save:  L95.56
Kč1,216.06
List Price:  Kč1,702.59
You save:  Kč486.52
Ft19,746.05
List Price:  Ft27,646.05
You save:  Ft7,900
SEK kr551.69
List Price:  SEK kr772.42
You save:  SEK kr220.72
ARS$50,182.44
List Price:  ARS$70,259.44
You save:  ARS$20,076.99
Bs345.34
List Price:  Bs483.50
You save:  Bs138.16
COP$219,443.60
List Price:  COP$307,238.59
You save:  COP$87,794.99
₡25,456.77
List Price:  ₡35,641.51
You save:  ₡10,184.74
L1,262.95
List Price:  L1,768.23
You save:  L505.28
₲390,155.46
List Price:  ₲546,248.87
You save:  ₲156,093.40
$U2,130.69
List Price:  $U2,983.14
You save:  $U852.45
zł208.13
List Price:  zł291.40
You save:  zł83.27
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.