Demystified Magento PWA Studio Checkout

export const CHECKOUT_STEP = {
    SHIPPING_ADDRESS: 1,
    SHIPPING_METHOD: 2,
    PAYMENT: 3,
    REVIEW: 4
};

const radios = availablePaymentMethods
    .map(({ code, title }) => {
        // If we don't have an implementation for a method type, ignore it.
        if (!Object.keys(payments).includes(code)) {
            return;
        }
        const isSelected = currentSelectedPaymentMethod === code;
        const PaymentMethodComponent = payments[code];
        const renderedComponent = isSelected ? (
            <PaymentMethodComponent
                onPaymentSuccess={onPaymentSuccess}
                onPaymentError={onPaymentError}
                resetShouldSubmit={resetShouldSubmit}
                shouldSubmit={shouldSubmit}
            />
        ) : null;
        return (
            <div key={code} className={classes.payment_method}>
                <Radio
                    label={title}
                    value={code}
                    classes={{
                        label: classes.radio_label
                    }}
                    checked={isSelected}
                />
                {renderedComponent}
            </div>
        );
    })
    .filter(paymentMethod => !!paymentMethod);

module.exports = (targets) => {
  const { specialFeatures } = targets.of("@magento/pwa-buildpack");
    /**
     *  Wee need to activate esModules, cssModules and GQL Queries to allow build pack to load our extension
     * {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
     */
  specialFeatures.tap((flags) => {
    flags[targets.name] = {
      esModules: true,
      cssModules: true,
      graphqlQueries: true
    };
  });
 
   /** Registers our Payment **/
  const { checkoutPagePaymentTypes } = targets.of("@magento/venia-ui");
  checkoutPagePaymentTypes.tap((payments) =>
    payments.add({
      paymentCode: "payment-code",
      importPath: "@your-namespace/components/payment.js"
    })
  );
};

<YourPaymentMethodComponent
  onPaymentSuccess={onPaymentSuccess}
  onPaymentError={onPaymentError}
  resetShouldSubmit={resetShouldSubmit}
  shouldSubmit={shouldSubmit}
/>

mutation setAdyenPaymentOnCartWithAdditionalData(
	$cartId: String!
	$paymentMethod: String!
) {
	setPaymentMethodOnCart(
		input: { cart_id: $cartId, payment_method: { code: $paymentMethod } }
	) {
		cart {
			id
			selected_payment_method {
				code
				title
			}
		}
	}
}

mutation setPaymentMethodAndPlaceOrder(
    $cartId: String!
    $stateData: String!
) {
    setPaymentMethodOnCart(
        input: {
            cart_id: $cartId
            payment_method: {
                code: "adyen_cc"
                adyen_additional_data_cc: {
                    cc_type: "VI"
                    stateData: $stateData
                }
            }
        }
    ) {
        cart {
            selected_payment_method {
                code
                title
            }
        }
    }
 
    placeOrder(
        input: {
            cart_id: $cartId
        }
    ) {
        order {
            order_id
            adyen_payment_status {
                isFinal
                resultCode
                additionalData
                action
            }
        }
    }
}

import React from 'react';
import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
 
import { usePlaceOrderButton } from '../talons/usePlaceOrderButton';
import placeOrderButtonCollection from './placeOrderButtonCollection';
 
/**
 * Replace the default place order button with a custom one.
 * @see @custom/checkout/src/target/extend-intercept.js
 *
 * @param {object} props
 * @param {React.ReactElement} props.originalPlaceOrderButton
 * @param {function} props.handlePlaceOrder
 * @returns {React.ReactElement}
 */
const PlaceOrderButton = props => {
    const { originalPlaceOrderButton, handlePlaceOrder } = props;
 
    // should fetch the current payment method from cart via a query or context
    const { paymentMethod, loading } = usePlaceOrderButton();
 
 
    if (loading && !paymentMethod) {
        return (
            <LoadingIndicator/>
        );
    }
 
    const PlaceOrderButton = placeOrderButtonCollection[paymentMethod] || null;
 
    if (PlaceOrderButton) {
        // custom place order button if payment method matches with a collection
        return <PlaceOrderButton handlePlaceOrder={handlePlaceOrder} />;
    }
 
    return originalPlaceOrderButton;
};
 
export default PlaceOrderButton;

/**
* This will be populated via webpack and target from a pwa studio
*/
export default {};

/**
 * These targets are available for interception to modules which depend on `@custom/checkout`.
 *
 * Their implementations can found in `./intercept.js`.
 *
 */
module.exports = targets => {
    targets.declare({
        orderButtonTypes: new targets.types.Sync(['orderButtonTypes']),
    });
};

const { Targetables } = require('@magento/pwa-buildpack');
const OrderButtonTypes = require("./OrderButtonTypes");
 
module.exports = targets => {
    targets.of('@magento/pwa-buildpack').specialFeatures.tap(flags => {
        /**
         *  Wee need to activated esModules and cssModules to allow build pack to load our extension
         * {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
         */
        flags[targets.name] = {
            esModules: true,
            graphqlQueries: true,
        };
    });
 
    // Make payment button collection extendable
    const venia = Targetables.using(targets);
    new OrderButtonTypes(venia);
 
    const CheckoutPageComponent = venia.reactComponent(
        '@magento/venia-ui/lib/components/checkoutPage'
    );
 
    /**
     * Replace the place order button to the checkout page
     */
    const placeOrderButton = '{placeOrderButton}';
    CheckoutPageComponent.insertBeforeSource(
        placeOrderButton,
        '{customPlaceOrderButton}',
        {
            remove: placeOrderButton.length
        }
    );
 
    const CustomPlaceOrder = CheckoutPageComponent.addImport(
        "CustomPlaceOrder from '@custom/checkout/src/components/placeOrderButton'"
    );
 
    /**
     * Define the custom place order button
     */
    CheckoutPageComponent.insertBeforeSource(
        'const orderSummary',
        `const customPlaceOrderButton = checkoutStep === CHECKOUT_STEP.REVIEW ? (<${CustomPlaceOrder} originalPlaceOrderButton={placeOrderButton} handlePlaceOrder={handlePlaceOrder}></${CustomPlaceOrder}>): null;\n`
    );
}

{
  "name": "@custom/checkout",
  "version": "0.1.0",
  "main": "src/targets/intercept.js",
 
  "pwa-studio": {
    "targets": {
      "intercept": "src/targets/intercept.js"
    }
  }
}

module.exports = targets => {
    targets.of('@magento/pwa-buildpack').specialFeatures.tap(flags => {
        /**
         *  Wee need to activated esModules and cssModules to allow build pack to load our extension
         * {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
         */
        flags[targets.name] = {
            esModules: true,
            cssModules: true,
            graphqlQueries: true,
            i18n: true
        };
    });
    const { orderButtonTypes } = targets.of('@custom/checkout');
    orderButtonTypes.tap(buttons =>
        buttons.add({
            paymentCode: 'payment_method_code',
            importPath: '@my-payment/src/components/placeOrderButtonExpress.js'
        })
    );
}

module.exports = targets => {
    targets.of('@magento/pwa-buildpack').specialFeatures.tap(flags => {
        /**
         *  Wee need to activated esModules and cssModules to allow build pack to load our extension
         * {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
         */
        flags[targets.name] = {
            esModules: true,
            cssModules: true,
            graphqlQueries: true,
            i18n: true
        };
    });
    const { orderButtonTypes } = targets.of('@custom/checkout');
    orderButtonTypes.tap(buttons =>
        buttons.add({
            paymentCode: 'payment_method_code',
            importPath: '@my-payment/src/components/placeOrderButtonExpress.js'
        })
    );
 
 targets.of('@magento/peregrine').talons.tap(talons => {
        talons.CheckoutPage.useCheckoutPage.wrapWith(
            `@my-payment/src/wrapers/uwCheckout`
        );
    });
}

import { useCheckoutFlow } from "../talons/useCheckoutFlow";
 
 
/**
 * Allow extending useCheckout to overwrite function of the hook
 *
 * @param origUseCheckout
 * @returns {function(*): *&{orderNumber: *, placeOrderLoading: boolean, clearCart: ((function(): Promise<void>)|*), orderDetailsLoading: boolean, handlePlaceOrder: ((function(): void)|*), adyenCheckoutAction: *, orderDetailsData: *}}
 */
export default function wrapUseCheckout(origUseCheckout) {
    return function(props) {
        // we cloud also overwrite some props before we execute the useCheckout function.
        const originalReturn = origUseCheckout(props);
        // we partly overwrite the result and extend it
        return { ...originalReturn,...useCheckoutFlow(originalReturn) };
    };
}

export const useCheckoutFlow = (props) => {
  const handleAdyenPlaceOrder = useCallback(() => {
    async function placeOrderAndCleanup() {
      await getOrderDetails({
        variables: {
          cartId,
        },
      });
    }
 
    placeOrderAndCleanup();
  }, [cartId, getOrderDetails]);
 
  /**
   * @param methodeCode string
   * @returns {*}
   */
  const isMyPaymentFlow = (methodeCode) => {
    return methodeCode.startsWith('my_payment');
  };
 
  if (isMyPaymentFlow(checkoutState.method) === false) {
    return {
      ...props,
      adyenCheckoutAction,
      orderDetailsLoading,
      clearCart
    };
  }
 
  return {
    orderNumber,
    orderDetailsData,
    orderDetailsLoading,
    handlePlaceOrder: handleAdyenPlaceOrder,
    placeOrderLoading,
    adyenCheckoutAction,
    clearCart
  };
};