Merge branch 'react-version' of https://github.com/MarcEricMartel/420-5DW-HY-TP into react-version
This commit is contained in:
commit
08e81224c7
@ -27,6 +27,7 @@ const CARD_OPTIONS = {
|
|||||||
const PaymentForm = ({ cost }) => {
|
const PaymentForm = ({ cost }) => {
|
||||||
|
|
||||||
const [success, setSuccess] = useState(false);
|
const [success, setSuccess] = useState(false);
|
||||||
|
const [cardName, setCardName] = useState("");
|
||||||
const stripe = useStripe();
|
const stripe = useStripe();
|
||||||
const elements = useElements();
|
const elements = useElements();
|
||||||
|
|
||||||
@ -82,6 +83,7 @@ const PaymentForm = ({ cost }) => {
|
|||||||
{!success ?
|
{!success ?
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<fieldset className="FormGroup">
|
<fieldset className="FormGroup">
|
||||||
|
<input className="FormRow" placeholder="Cardholder Name" id="cardholder-name" type="text" value={cardName} onChange={e => setCardName(e.target.value)} />
|
||||||
<div className="FormRow">
|
<div className="FormRow">
|
||||||
<CardElement options={CARD_OPTIONS} />
|
<CardElement options={CARD_OPTIONS} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -178,10 +178,10 @@ const ReviewInvoice = () => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Row className="invoice-buttons">
|
<Row className="invoice-buttons">
|
||||||
<Col xs={6}>
|
{/* <Col xs={6}>
|
||||||
<Button className="invoice-button confirmer" onClick={handleConfirmer}>Confirmer</Button>
|
<Button className="invoice-button confirmer" onClick={handleConfirmer}>Confirmer</Button>
|
||||||
</Col>
|
</Col> */}
|
||||||
<Col xs={6}>
|
<Col xs={12}>
|
||||||
<Button className="invoice-button modifier" onClick={handleModify}>Modifier</Button>
|
<Button className="invoice-button modifier" onClick={handleModify}>Modifier</Button>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
@ -191,7 +191,7 @@ const ReviewInvoice = () => {
|
|||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
{/* <StripeContainer cost={total} />*/}
|
<StripeContainer cost={total} />
|
||||||
</>
|
</>
|
||||||
|
|
||||||
);
|
);
|
||||||
|
@ -39,6 +39,20 @@ a {
|
|||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#cardholder-name {
|
||||||
|
background-color: transparent;
|
||||||
|
border:none;
|
||||||
|
color:white;
|
||||||
|
margin: auto;
|
||||||
|
width: 90%;
|
||||||
|
margin-left: 15px;
|
||||||
|
margin-top:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cardholder-name::placeholder{
|
||||||
|
color: lightgray;
|
||||||
|
}
|
||||||
|
|
||||||
.FormRow {
|
.FormRow {
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1032,6 +1046,7 @@ a {
|
|||||||
.morceaux-options-container {
|
.morceaux-options-container {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user