Last active
May 3, 2016 06:47
-
-
Save sarkistlt/237118dfbfc94b05cb6d0babe0fbedf3 to your computer and use it in GitHub Desktop.
Used technologies: MeteorJs, ReactJs, NodeJs, Bootstrap, react-Bootstrap. How you can see, the whole Web application created with separate modules. Each modules include his own dependencies and can easily be used in other projects. I don't use RequireJs, because I work with MeteorJs which allow me to work with NodeJs using ES6 syntaxes.
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
/* Import variables ***************************************************************************************************/ | |
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import {composeWithTracker} from 'react-komposer'; | |
import {Modal, Button} from 'react-bootstrap'; | |
import './deposit.css'; | |
/* React components ***************************************************************************************************/ | |
const Deposit = (props) => { | |
inputAmount = () => { | |
let amount = (Math.round(((+document.getElementById('form-input').value + 0.3) / 0.961) * 100) / 100).toFixed(2); | |
let customAmount = document.getElementById('form-input').value; | |
document.getElementById('customAmount').value = customAmount; | |
document.getElementById('PayPal-input').value = amount; | |
document.getElementById('totalCost').innerHTML = amount; | |
}; | |
return ( | |
<div className="Modal"> | |
<Modal show={props.show} onHide={props.deposit} className="Modal-content"> | |
<Modal.Header> | |
<Modal.Title className="container-fluid bg-primary"> | |
пополнение баланса | |
</Modal.Title> | |
</Modal.Header> | |
<form | |
className="modal-form" | |
action="https://www.paypal.com/cgi-bin/webscr" | |
method="post" | |
target="_top"> | |
<Modal.Body> | |
<div> | |
<h5>Комиссия PayPal 4% + 0.30$ в не зависимости от суммы пополнения.</h5> | |
<div className="input-group"> | |
<div className="input-group"> | |
<span className="input-group-addon">$</span> | |
<input onInput={this.inputAmount} | |
id="form-input" | |
name="form-amount" type="number" step={0} min={2} | |
className="form-control" | |
placeholder="минимум 2$"/> | |
<input type="hidden" id="PayPal-input" name="amount" step={0} min={2}/> | |
</div> | |
<h5 style={{textAlign: 'right'}}>к оплате: <span id="totalCost">0.00</span>$</h5> | |
<input type="hidden" name="cmd" value="_xclick"/> | |
<input type="hidden" name="business" value="[email protected]"/> | |
<input type="hidden" name="item_name" value="lottato balance refill"/> | |
<input type="hidden" name="charset" value="utf-8"/> | |
<input type="hidden" name="currency_code" value="USD"/> | |
<input type="hidden" name="notify_url" value="http://lottato.com/ipn"/> | |
<input type="hidden" name="return" value="http://lottato.com/success"/> | |
<input type="hidden" name="cancel_return" value="http://lottato.com/cancel"/> | |
<input type="hidden" name="custom" value={props.userId}/> | |
<input type="hidden" name="item_number" id="customAmount"/> | |
<input type="hidden" name="lc" value="ru_RU"/> | |
<input type="hidden" name="no_note" value={1}/> | |
<input type="hidden" name="no_shipping" value={1}/> | |
</div> | |
</div> | |
</Modal.Body> | |
<Modal.Footer> | |
<a onClick={props.deposit} | |
type="button" className="btn col-xs-4 btn-danger modalClose" data-dismiss="modal">закрыть</a> | |
<a type="button" className="col-xs-4"/> | |
<input type="submit" className="btn col-xs-4 btn-primary" value="пополнить" name="submit"/> | |
</Modal.Footer> | |
</form> | |
</Modal> | |
</div> | |
); | |
}; | |
/* Composer ***********************************************************************************************************/ | |
const composer = (props, onData) => { | |
const userId = Meteor.users.findOne({_id: Meteor.userId()})._id; | |
onData(null, {userId}); | |
}; | |
/* Export variables ***************************************************************************************************/ | |
export default composeWithTracker(composer)(Deposit); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment