Unstyled Donation pages, I have pushed them since I am handing the t… #99
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,165 @@ | ||
|
|
||
| import React, { Component } from "react"; | ||
| import renderHTML from 'react-render-html'; | ||
| import { Container, Col,FormGroup, Label, Input, Button, Form} from 'reactstrap'; | ||
|
|
||
| //import { validatePassword, validateEmail, validateUsername } from './Validators.js'; | ||
| import { BrowserRouter, Route, Switch, NavLink } from "react-router-dom"; | ||
| /* <form> | ||
| Amount : <input type="text" id="AmountID" /><br/> | ||
| Organisation : <input type="checkbox" id="Org_One" /><Button variant="secondary"> View more </Button><br/> | ||
| Organisation : <input type="checkbox" id="Org_One" /><Button variant="secondary">View more </Button><br/> | ||
| </form> | ||
|
|
||
| <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> | ||
| <label>Payment </label> | ||
| <input type="hidden" name="cmd" value="_s-xclick" /> | ||
| <input type="hidden" name="hosted_button_id" value="WR3NGAATKPUWS" /> | ||
| <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" /> | ||
| <img alt="" border="0" src="https://www.paypal.com/en_ZA/i/scr/pixel.gif" width="1" height="1" /> | ||
| </form> | ||
| */ | ||
| class donation extends Component { | ||
| constructor(props){ | ||
| super(props); | ||
| this.state ={ | ||
| "cardNumber": "", | ||
| "nameonCard": "", | ||
| "expirationDate": "", | ||
| "cvc": "", | ||
| "country": "", | ||
| "state": "", | ||
| "city": "", | ||
| "postal": "", | ||
| "email": "", | ||
| } | ||
|
|
||
| // this.onChange=this.onChange.bind(this); | ||
| //this.onSubmit=this.onSubmit.bind(this); | ||
| } | ||
|
|
||
| Payment(){ | ||
|
|
||
| const RequestObject = { | ||
| "cardNumber": this.state.cardNumber, | ||
| "nameonCard": this.state.nameonCard, | ||
| "expirationDate": this.state.expirationDate, | ||
| "cvc": this.state.cvc, | ||
| "country": this.state.country, | ||
| "state": this.state.state, | ||
| "city": this.state.city, | ||
| "postal": this.state.emailValue, | ||
| "email": this.state.email, | ||
| } | ||
| fetch("https://localhost:44311/api/PayPal", { | ||
| method: 'post', | ||
| headers: { | ||
| 'Accept': 'application/json', | ||
| 'Content-Type': 'application/json' | ||
| }, | ||
| body: JSON.stringify(RequestObject) | ||
| }).then(function(response) { | ||
| return response.json(); | ||
| }).catch(function(data) { | ||
| }); | ||
|
|
||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
|
|
||
| <div className="App"> | ||
| <div> | ||
|
|
||
| <form> | ||
| <h>Donation details</h><br/> | ||
| Amount <input type="text" name="Amount" placeholder="R50.00"/><br/> | ||
|
|
||
|
|
||
| <p><b>Organisation</b><br/> Please choose your organisation of choice</p> | ||
|
|
||
| <br/> | ||
| Organisation Name <input type="checkbox" name="SecondOrganisation" size="50%" /> | ||
| <navItem> | ||
| <NavLink to="/register" ><button>view more</button></NavLink> | ||
| </navItem><br/><br/> | ||
| Organisation Name <input type="checkbox" name="SecondOrganisation" size="50%" /> | ||
| <navItem> | ||
| <NavLink to="/register" ><button>view more</button></NavLink> | ||
| </navItem> | ||
| </form> | ||
|
|
||
|
|
||
| <form> | ||
| <h>Payments</h><br/> | ||
| Credit card number <input type="number" name="card number" placeholder="1234567890"/><br/><br/> | ||
| Expiration date <input type="date" name="ExpDate" placeholder="1234567890"/><br/><br/> | ||
|
Collaborator
There was a problem hiding this comment. The expiration field of credit cards is usually made of the month and the year in two separated fields. |
||
| Security code <input type="password" name="SecurityCode" placeholder="****"/><br/><br/> | ||
| <nav> | ||
| <navItem> | ||
| <NavLink to="/donationSuccess" ><button>click me for payment</button></NavLink> | ||
| </navItem><hr /> | ||
| </nav> | ||
|
|
||
| </form> | ||
|
|
||
|
|
||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default donation; | ||
| {/* <form> | ||
| <FormGroup controlId="CardNumber" > | ||
|
Collaborator
There was a problem hiding this comment. Remove your GC codes here too. |
||
| <label>Card Number</label> | ||
| <input type="text" name="cardNumber" id="us" placeholder="Card number" /> | ||
|
|
||
| </FormGroup> | ||
| <FormGroup controlId="nameonCard" > | ||
| <label>Nameoncard</label> | ||
| <input type="text" name="nameonCard" id="us" placeholder="Name on Card" /> | ||
|
|
||
| </FormGroup> | ||
| <FormGroup controlId="nameonCardID" > | ||
| <label>Experation Date</label> | ||
| <input type="text" name="expirationDate" id="us" placeholder="Expiration Date" /> | ||
|
|
||
| </FormGroup> | ||
| <FormGroup controlId="cvcID" > | ||
| <label>CVC</label> | ||
| <input type="text" name="cvc" id="us" placeholder="CVC" /> | ||
|
|
||
| </FormGroup> | ||
| <FormGroup controlId="Country"> | ||
| <label>Country</label> | ||
| <input name="country" name="cvc" id="us" placeholder="Country " /> | ||
|
|
||
| </FormGroup> | ||
| <FormGroup controlId="State"> | ||
| <label>State</label> | ||
| <input name="state" type="text" id="us" placeholder="State" /> | ||
|
|
||
| </FormGroup> | ||
| <FormGroup controlId="City"> | ||
| <label>city</label> | ||
| <input name="city" type="text" id="us" placeholder="City" /> | ||
|
|
||
| </FormGroup> | ||
| <FormGroup controlId="Postal"> | ||
| <label>Postal</label> | ||
| <input type="text" name="postal" id="us" placeholder="Postal" /> | ||
|
|
||
| </FormGroup> | ||
| <FormGroup controlId="Email"> | ||
| <label>Email</label> | ||
| <input type="text" name="email" id="us" placeholder="name@mail.com" /> | ||
|
|
||
| </FormGroup> | ||
| <Button onClick={this.Payment} >Submit</Button> | ||
| </form> */} | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
|
|
||
| import React, { Component } from "react"; | ||
|
|
||
| import renderHTML from 'react-render-html'; | ||
| import { Container, Col,FormGroup, Label, Input, Button, Form} from 'reactstrap'; | ||
| //import { validatePassword, validateEmail, validateUsername } from './Validators.js'; | ||
| import { BrowserRouter, Route, Switch, NavLink } from "react-router-dom"; | ||
| /* <form> | ||
| Amount : <input type="text" id="AmountID" /><br/> | ||
| Organisation : <input type="checkbox" id="Org_One" /><Button variant="secondary"> View more </Button><br/> | ||
| Organisation : <input type="checkbox" id="Org_One" /><Button variant="secondary">View more </Button><br/> | ||
| </form> | ||
|
|
||
| <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> | ||
| <label>Payment </label> | ||
| <input type="hidden" name="cmd" value="_s-xclick" /> | ||
| <input type="hidden" name="hosted_button_id" value="WR3NGAATKPUWS" /> | ||
| <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" title="PayPal - The safer, easier way to pay online!" alt="Donate with PayPal button" /> | ||
| <img alt="" border="0" src="https://www.paypal.com/en_ZA/i/scr/pixel.gif" width="1" height="1" /> | ||
| </form> | ||
| */ | ||
| class donationSuccess extends Component { | ||
|
Collaborator
There was a problem hiding this comment. You have so many spaces between your elements. How does it look like? Exactly like this! Is it ok? No! Please make sure that you have few of them. |
||
|
|
||
|
|
||
| render() { | ||
| return ( | ||
|
|
||
| <div className="App"> | ||
| <div> | ||
|
|
||
|
|
||
| <h>Thank you</h><br/> | ||
|
Collaborator
There was a problem hiding this comment. Which h is this tag? |
||
|
|
||
|
|
||
|
|
||
| <button type="submit" variant="primary">Browse Books</button><br/><button type="submit" variant="primary">Share</button> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default donationSuccess; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <!DOCTYPE html> | ||
| <html xmlns="http://www.w3.org/1999/xhtml"> | ||
| <head> | ||
| <title></title> | ||
| <link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> | ||
| <link rel="stylesheet" type="text/css" href="http://cdn.rawgit.com/odra/ng-json-explorer/master/dist/angular-json-explorer.min.css"/> | ||
| <link rel="stylesheet" type="text/css" href="css/ngFormBuilder-complete.css"/> | ||
| </head> | ||
| <body> | ||
| <form id="default_form" runat="server" ng-app="paypalApp" ng-controller="paypalAppCtrl"> | ||
| <div class="row"> | ||
| <div class="col-sm-8 col-sm-offset-2"> | ||
| <div class="well" style="background-color: #fff;"> | ||
| <formio form="form"></formio> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </form> | ||
| </body> | ||
| <script src="http://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script> | ||
| <script src="https://cdn.ckeditor.com/4.5.11/standard/ckeditor.js"></script> | ||
| <script src="https://unpkg.com/signature_pad@1.5.3/signature_pad.min.js"></script> | ||
| <script src="Scripts/ngFormBuilder-full.js"></script> | ||
| <script src="https://cdn.rawgit.com/odra/ng-json-explorer/master/dist/angular-json-explorer.min.js"></script> | ||
|
|
||
| <script type="text/javascript" src="http://www.google.com/recaptcha/api.js?onload=reCAPTCHALoad&render=explicit"></script> | ||
|
|
||
| <script src="Scripts/paypalclient.js"></script> | ||
| </html> |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
GC has been preached many times.
Please remove it