diff --git a/client/src/components/Donation/DonateForm.js b/client/src/components/Donation/DonateForm.js index b4fde2ef91..d5004f0259 100644 --- a/client/src/components/Donation/DonateForm.js +++ b/client/src/components/Donation/DonateForm.js @@ -12,7 +12,9 @@ import { ToggleButtonGroup } from '@freecodecamp/react-bootstrap'; // import { StripeProvider, Elements } from 'react-stripe-elements'; - +import ApplePay from './assets/ApplePay'; +import GooglePay from './assets/GooglePay'; +import acceptedCards from './assets/accepted-cards.png'; import { amountsConfig, durationsConfig, @@ -274,7 +276,9 @@ class DonateForm extends Component { id='confirm-donation-btn' onClick={this.handleStripeCheckoutRedirect} > - Pay with Apple Pay + Pay with Apple Pay + + {isOneTime ? ( diff --git a/client/src/components/Donation/Donation.css b/client/src/components/Donation/Donation.css index 6e2561eb25..34d0fbc4d5 100644 --- a/client/src/components/Donation/Donation.css +++ b/client/src/components/Donation/Donation.css @@ -331,3 +331,23 @@ li.disabled > a { background-size: 84px; filter: brightness(0.95); } + +.apple-pay-logo, +.google-pay-logo, +.accepted-cards { + height: 30px; + width: auto; + padding: 0 10px; +} + +.accepted-cards { + height: 20px; + align-self: center; +} + +#confirm-donation-btn { + display: flex; + flex-direction: row; + justify-content: center; + align-content: center; +} diff --git a/client/src/components/Donation/assets/ApplePay.js b/client/src/components/Donation/assets/ApplePay.js new file mode 100644 index 0000000000..ae321fca4a --- /dev/null +++ b/client/src/components/Donation/assets/ApplePay.js @@ -0,0 +1,42 @@ +/* eslint-disable max-len */ +import React, { Fragment } from 'react'; + +const propTypes = {}; + +function ApplePay(props) { + return ( + + Apple Pay Logo + + ApplePay-mark + + + + + + + + + + + + ); +} + +ApplePay.displayName = 'ApplePay'; +ApplePay.propTypes = propTypes; + +export default ApplePay; diff --git a/client/src/components/Donation/assets/GooglePay.js b/client/src/components/Donation/assets/GooglePay.js new file mode 100644 index 0000000000..d285043c8b --- /dev/null +++ b/client/src/components/Donation/assets/GooglePay.js @@ -0,0 +1,73 @@ +/* eslint-disable max-len */ +import React, { Fragment } from 'react'; + +const propTypes = {}; + +function GooglePay(props) { + return ( + + Google Pay Logo + + GooglePay_mark + + + + + + + + + + + + + + + + + + ); +} + +GooglePay.displayName = 'GooglePay'; +GooglePay.propTypes = propTypes; + +export default GooglePay; diff --git a/client/src/components/Donation/assets/accepted-cards.png b/client/src/components/Donation/assets/accepted-cards.png new file mode 100644 index 0000000000..27d474d319 Binary files /dev/null and b/client/src/components/Donation/assets/accepted-cards.png differ