Add the apple pay button

Author: Artem

demo/peacock/src/pages/checkout/checkout.css

@@ -13,6 +13,19 @@
   }
 }
 
+.apple-pay {
+  background-color: black;
+  background-image: -webkit-named-image(apple-pay-logo-white);
+  background-size: cover;
+  background-origin: content-box;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 44px;
+  border-radius: 0;
+  margin-top: 20px;
+  padding: 10px 0;
+}
+
 .wrapper {
   display: flex;
   height: 100vh;
@@ -143,14 +156,18 @@
 
   .place-order-block {
     margin: 20px 0;
-    height: 58px;
   }
 
   .place-order-button {
     border-radius: 4px;
     height: 58px;
   }
 
+  .apple-pay {
+    border-radius: 4px;
+    height: 58px;
+  }
+
   .order-summary {
     margin-top: 40px;
   }

demo/peacock/src/pages/checkout/checkout.jsx

@@ -31,7 +31,8 @@ import type { CheckoutActions } from './types';
 import type { AsyncStatus } from 'types/async-actions';
 
 // actions
-import * as actions from 'modules/checkout';
+import  * as actions from 'modules/checkout';
+import { checkApplePay } from 'modules/checkout';
 import { EditStages } from 'modules/checkout';
 import { fetch as fetchCart, hideCart } from 'modules/cart';
 import { fetchUser } from 'modules/auth';
@@ -181,6 +182,16 @@ class Checkout extends Component {
     return emailIsSet(user);
   }
 
+  get applePayButton() {
+    if (!checkApplePay()) return null;
+
+    return (
+      <Button
+        styleName="apple-pay"
+      />
+    );
+  }
+
   get orderTotals() {
     const { cart } = this.props;
     const { billingDone, shippingDone, deliveryDone } = this.state;
@@ -204,6 +215,7 @@ class Checkout extends Component {
           >
             Place order
           </Button>
+          {this.applePayButton}
         </div>
       </div>
     );