Teaser for Demystified Magento PWA Studio Checkout

Demystified Magento PWA Studio Checkout

3 min read

Edit post on GitHub
The Blogpost is based Check / Money Order feature in the development branch will be available via scaffolding early on April 6, 2021. I will update this Blogpost with every release and checkout change.

Before we get started to build a static Payment Method. Let's briefly look at how the Checkout Process works in PWA Studio. So basically, this is a foundation to describe which components exist and how we can use them.

CheckoutPage/CheckoutPage.js

This component is the main entry point for the one-step Checkout. It renders sections according to the state created by useCheckoutPage.

Steps Nummer for section state:

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

PaymentInformation/paymentInformation.js

The checkout page will display the component on the checkout step PAYMENT.

It responsible for:

  • LoadingIndicator/indicator.js on load
  • PaymentInformation/summary.js if doneEditing=true
  • PaymentInformation/paymentMethods.js if doneEditing=false

PaymentInformation/paymentMethods.js

Loads all available Payments via usePaymentMethods hook and compares them with paymentMethodCollection.js, built via Magento Target. It only renders components that both lists contain.

PaymentInformation/summary.js

Renders information for the ReviewStep

PWA Studio Checkout Payment Workflow Digramm

Checkout Payment Extension point

To extend the Checkout with a new Payment Method we can use a venia target for the paymentMethodCollection.js.

If you are not familiar with targets and how that works, Getting started with PWA Studio Extensibility describes the foundation concept.

In the Image, we can see the billing address is by design part of the payment methods to allow special implementation.

Note: In default Magento, you need to make sure that the billing address is set by before you can complete the order.

For 90% of all Payment Methods, the billing address form would be identical. In the current develop branch, you can find @magento/venia-ui/lib/components/CheckoutPage/BillingAddress. You can copy it to start already building your Payment Method.

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",
    })
  );
};

Your payment component gets the following props injected by the parent.

<YourPaymentMethodComponent
  onPaymentSuccess={onPaymentSuccess}
  onPaymentError={onPaymentError}
  resetShouldSubmit={resetShouldSubmit}
  shouldSubmit={shouldSubmit}
/>;
  • onPaymentSuccess: Callback Methode should call to proceed to review step. If the Payment method needs a token (nonce), you need to take that was generated successfully before calling this method.

  • onPaymentError: Callback to invoke when the payment component throws an errors

  • resetShouldSubmit: Callback to reset the review order button flag

  • shouldSubmit (read-only): It will change to true if the review button gets summited.

How to build a new payment methode for PWA Studio

Edit post on GitHub
Useful? Share it!
Translation Generator extension for Magento 2
Pacemaker for Magento 2 - Import and process management tool