diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js b/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js index 072ee4f..d339d67 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/PaymentForm.js @@ -27,6 +27,7 @@ const CARD_OPTIONS = { const PaymentForm = ({ cost }) => { const [success, setSuccess] = useState(false); + const [cardName, setCardName] = useState(""); const stripe = useStripe(); const elements = useElements(); @@ -82,6 +83,7 @@ const PaymentForm = ({ cost }) => { {!success ?
+ setCardName(e.target.value)} />
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js index 12e106a..c7c79db 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/ReviewInvoice.js @@ -178,10 +178,10 @@ const ReviewInvoice = () => { /> - + {/* - - + */} + @@ -191,7 +191,7 @@ const ReviewInvoice = () => { /> - {/* */} + ); diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css index 83721da..5ecd3f4 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css +++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css @@ -39,6 +39,20 @@ a { 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 { display: -ms-flexbox; display: flex; @@ -1032,6 +1046,7 @@ a { .morceaux-options-container { display: block; } + }