Demystified Magento PWA Studio Checkout

Before we start building 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 should 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 Digram

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.

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