Create a PaymentCheckoutAction component

[nnnnat]

PaymentCheckoutAction

Overview / Summary

Summary description of UI component

The PaymentCheckoutAciton component needs to display a "primary" payment method UI as well as an "other methods" section that will allow us to display PayPal, ApplePay, etc payment methods alongside the shops primary one.

• The "primary" payment component could be the StripeForm or any other type of credit card form UI
• The "other methods" would just be a SelectableList with all the services as options.

Rationale for why this component is necessary

Currently, the component library has only one payment checkout component and it's tightly coupled to the stripe payment service. We need a more flexible way to display payment options/forms from an array of payment services.

Images / Designs of UI component in context

Render Criteria

I see this component being very similar to the current StripePaymentCheckoutAction component and might just need to be a refactor/renaming of that component.

[machikoyasuda]

CheckoutActions object needs to take more than 1 mutation:

  {
    id: "3",
    activeLabel: "Enter payment information",
    completeLabel: "Payment information",
    incompleteLabel: "Payment information",
    status: "incomplete",
    component: PaymentCheckoutAction,
-    onSubmit: setPayment,
+    onSubmit: {
+      primaryMethod: setPaymentStripe, 
+      optionalMethods: [setPaymentPayPal, setPaymentApplePay]
+    },
    props: {
      payment: cart.checkout.payments[0]
    }
  },

[rc-publisher]

🎉 This issue has been resolved in version 0.61.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀