Last updated: January 17, 2021
Which payment methods does PWA Studio support?
At the moment, PWA Studio only supports the Braintree payment method out of the box.
The short answer is here: https://magento.github.io/pwa-studio/frequently-asked-questions/#which-payment-methods-does-pwa-studio-support
Let’s check it by tracing the code a little bit.
If we inspect the payment method block on the frontend checkout page
Here we come to know that it is rendering from the PaymentMethods component
In the PaymentMethods component, it renders the list of available methods.
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 ? (<PaymentMethodComponentonPaymentSuccess={onPaymentSuccess}onPaymentError={onPaymentError}resetShouldSubmit={resetShouldSubmit}shouldSubmit={shouldSubmit}/>) : null;return (<div key={code} className={classes.payment_method}><Radiolabel={title}value={code}classes={{label: classes.radio_label}}checked={isSelected}/>{renderedComponent}</div>);}).filter(paymentMethod => !!paymentMethod);
File: packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.js
Here availablePaymentMethods
variable returns from usePaymentMethods talon that fetches and returns all enabled payment methods from the Magento backend using the following GraphQL query
query getPaymentMethods($cartId: String!) {cart(cart_id: $cartId) {idavailable_payment_methods {codetitle}}}
File: packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.gql.js
Reference screenshot of this GraphQL query output:
And if we check the highlighted lines mentioned in the above paymentMethods.js code snippet then it validates the available payment methods using the payments
object that is including from the paymentMethodCollection component.
import payments from './paymentMethodCollection';
This file contains below code
/*** This file is augmented at build time using the @magento/venia-ui build* target "payments", which allows third-party modules to add new payment component mappings.** @see [Payment definition object]{@link PaymentDefinition}*/export default {};/*** A payment definition object that describes a payment in your storefront.** @typedef {Object} PaymentDefinition* @property {string} paymentCode is use to map your payment* @property {string} importPath Resolvable path to the component the* Route component will render** @example <caption>A custom payment method</caption>* const myCustomPayment = {* paymentCode: 'cc',* importPath: '@partner/module/path_to_your_component'* }*/
File: packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethodCollection.js
- In the comment section, it is mentioned that
This file is augmented at build time using the @magento/venia-ui build target "payments", which allows third-party modules to add new payment component mappings.
So, if we look in the packages/venia-ui/lib/targets/venia-ui-intercept.js file, it defined the Braintree method out of the box.
const paymentMethodList = new PaymentMethodList(venia);paymentMethodList.add({paymentCode: 'braintree',importPath:'@magento/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard'});
This is the reason only the Braintree payment method is showing on the frontend at the moment. Here, we can add an additional payment method as per our requirement that we will discuss later.