This post describes how to add a custom payment method to adobe pwa-studio frontend. Will be displayed the main steps to add stripe as payment method into the in context checkout page. 

Before getting into the nitty gritty of things, we have to discuss some of the specificities of pwa-studio itself. disclaimer, we've supposed that the reader is already familiar with react, webpack and the basics of pwa-sutio.

1- Targets

Customizing pwa studio revolves around targets. Targets allow third party developers to modify the behavior of the default source code of pwa-studio though extensions and/or modules. Everything is done during the build process hence there is no performance cost to the react app. Targets are in reality API endpoints that allows the developer to plug  through interceptors to a specific part of the code in pwa-studio project. This can result in an overriding, adding or modifying the source code during the webpack build.
There are mainly three kinds of targets in pwa-studio :

• Buildpack targets, available through (@magento/pwa-buildpack) these allow the overriding of low level code such as upwards, setup of locales, environment variables, etc..

• Talons targets, available through (@magento/peregrine) these let you plug and/or bypass specific functions in specific objects/classes. Similar to what is done in the backend side of magento, through the plugin system Before,After, Around functions.)

• Ui targets, available through (@magento/venia-ui), these allow one to modify UI components and their behavior.

The last one is where our focus will go in this article.There is more to targets like for example how to add new ones,  the difference between them and targetables which can modify the source code directly. But for consistency reasons we will not delve into those details. So, without further ado, let's see what endpoints to use to add code our new stripe payment method to the checkout page.

2- intercept.js

First we need to intercept the build processor and plug your code/extension. This is done though the intercept.js file. And for that intercept.js file to be called, it needs to be declared it in the package.json of extension.
This is done by adding the following to the package.json : 

"pwa-studio": {
    "targets": {
      "intercept": "src/targets/intercept.js"
    }
  },

Eventually, ones should adjust the path of the intercept.js file accordingly to the project scaffolding. Once that's done let's get to the specifics in the intercept.js file. Because we want the builder to load files in our extension, we're going to enable certain features through:

 const { specialFeatures,  transformUpward} = targets.of('@magento/pwa-buildpack');
  specialFeatures.tap(flags => {
    /**
     *  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}.
     */
    flags[targets.name] = {
      esModules: true,
      cssModules: true,
      graphqlQueries: true,
      upward:true
    };
  });

In short, the above code tells the builder that our extension will operate some modifications during the build process, to the webpack modules, the graphql, the upward and the CSS system. Although this part is mandatory, there's nothing special there. 

What really concerns us here is to modify the payment processing. So wefirst have to identify the targets we want to strike. The list of UI target can be found here. In that file are declare the default targets of the venia-ui (the ui of pwa-studio). By reading the descriptions one can single out the ones that can/will concern us. These will be : 

• checkoutPagePaymentTypes, as they provide access to Venia's checkout page payment methods ;

• savedPaymentTypes, as they provide access to Venia's saved payment methods ;

• editablePaymentTypes, as they provides access to Venia's editable payment methods;
  

• summaryPagePaymentTypes, as they provide access to Venia's summary page for a payment method ran after a successful payment.
  

To ease the understanding and match the demo react stripe extension. We'll only be using two of these. The checkoutPagePaymentTypes and the summaryPagePaymentTypes targets. This match to the content of the intercept.js :  

  const {
    checkoutPagePaymentTypes,
    summaryPagePaymentTypes
  } = targets.of('@magento/venia-ui');
  checkoutPagePaymentTypes.tap(payments =>
    payments.add({
      paymentCode: 'stripe_payments',
      importPath:  require.resolve('@madit/pwa-studio-stripe-payments/src/components/creditCard.js')
    })
  );

  summaryPagePaymentTypes.tap(paymentSummaries =>
    paymentSummaries.add({
      paymentCode: 'stripe_payments',
      importPath: '@madit/pwa-studio-stripe-payments/src/components/summary.js'
    })
  );

So first we've singled out the targets that interest us from the @magento/venia-ui. Then we've added through the tap-ing system a new payment type (creditCard.js) which will load our stripe credit card payment method ui component. And, finally, summary.js, the source code of the component to be loaded our at the end of a successful payment processing though stripe.

And that's it really. We can make this article alot longer by going into details about the content of the these or the rest of the files in the pproject. But they're simply basic react components / code. Even though, their input and outputs must contain mandatory variables needed by pwa-studio project (basically, inherited props). You can take a look at the and cross reference the checkmo sample and our stripe extension to see how these works. But as you can see by only taping into these two targets we're able to add our custom payment method ui in no time. Check the demo repo to learn how to install the extension in your pwa project.

3- Final result

Here's some screenshots of the final result of the extension. You can also see things in action live on our demo site.
Alternatively, you can check the video tutorial of our the paid version available on adobe commerce marketplace.