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.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.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