Add the ability to start the payment process + refactor

Author: Artem

demo/peacock/src/modules/checkout.js

@@ -32,8 +32,6 @@ export type CheckoutState = {
   billingAddress: ShippingAddress,
 };
 
-export const checkApplePay = () => foxApi.applePay.available();
-
 export const selectCreditCard = createAction('CHECKOUT_SET_CREDIT_CARD');
 export const setEditStage = createAction('CHECKOUT_SET_EDIT_STAGE');
 export const setBillingData = createAction('CHECKOUT_SET_BILLING_DATA', (key, value) => [key, value]);
@@ -43,6 +41,7 @@ export const setBillingAddress = createAction('CHECKOUT_SET_BILLING_ADDRESS');
 export const toggleShippingModal = createAction('TOGGLE_SHIPPING_MODAL');
 export const toggleDeliveryModal = createAction('TOGGLE_DELIVERY_MODAL');
 export const togglePaymentModal = createAction('TOGGLE_PAYMENT_MODAL');
+const applePayAvailable = createAction('APPLE_PAY_AVAILABLE');
 const markAddressAsDeleted = createAction('CHECKOUT_MARK_ADDRESS_AS_DELETED');
 const markAddressAsRestored = createAction(
   'CHECKOUT_MARK_ADDRESS_AS_RESTORED',
@@ -107,6 +106,36 @@ function addressToPayload(address) {
   return payload;
 }
 
+const _checkApplePay = createAsyncActions(
+  'checkApplePay',
+  function() {
+    const { dispatch } = this;
+
+    return foxApi.applePay.available()
+      .then((resp) => {
+        dispatch(applePayAvailable(resp));
+      });
+  }
+);
+
+export const checkApplePay = _checkApplePay.perform;
+
+const _beginApplePay = createAsyncActions(
+  'beginApplePay',
+  function(payment) {
+    return foxApi.applePay.beginApplePay(payment)
+      .then(() => {
+        console.log('payment is successfull, from checkout.js');
+      })
+      .catch((err) => {
+        console.log('error occurred in checkout.js, _beginApplePay');
+        throw new Error(err);
+      });
+  }
+);
+
+export const beginApplePay = _beginApplePay.perform;
+
 const _removeShippingMethod = createAsyncActions(
   'removeShippingMethod',
   function() {
@@ -465,6 +494,7 @@ const initialState: CheckoutState = {
   shippingModalVisible: false,
   deliveryModalVisible: false,
   paymentModalVisible: false,
+  applePayAvailable: false,
 };
 
 function sortAddresses(addresses: Array<Address>): Array<Address> {
@@ -505,6 +535,12 @@ const reducer = createReducer({
       billingData,
     };
   },
+  [applePayAvailable]: (state, available) => {
+    return {
+      ...state,
+      applePayAvailable: available,
+    };
+  },
   [shippingMethodsActions.succeeded]: (state, list) => {
     return {
       ...state,

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

@@ -32,7 +32,6 @@ import type { AsyncStatus } from 'types/async-actions';
 
 // actions
 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';
@@ -74,6 +73,8 @@ class Checkout extends Component {
       tracking.checkoutStart(cart.lineItems);
     });
 
+    this.props.checkApplePay();
+
     if (!this.isEmailSetForCheckout()) {
       this.props.fetchUser();
     }
@@ -182,12 +183,31 @@ class Checkout extends Component {
     return emailIsSet(user);
   }
 
+  @autobind beginApplePay() {
+    console.log('starting the apple pay inside the checkout.jsx');
+    const total = this.props.cart.totals.total;
+    console.log('the total from the cart -> ', total);
+    const amount = (parseFloat(total)/100).toFixed(2);
+    console.log('amount -> ', amount);
+    const paymentRequest = {
+      countryCode: 'US',
+      currencyCode: 'USD',
+      total: {
+        label: 'Stripe.com',
+        amount: amount.toString(),
+      },
+    };
+    console.log('payment request obj -> ', paymentRequest);
+    this.props.beginApplePay(paymentRequest);
+  }
+
   get applePayButton() {
-    if (!checkApplePay()) return null;
+    if (!this.props.applePayAvailable) return null;
 
     return (
       <Button
         styleName="apple-pay"
+        onClick={this.beginApplePay}
       />
     );
   }