The Card Element integration includes the option to “Enable credit card icons,” but it only renders them in the payment method add form, meaning you actually have to click on the option in the payment method selection to see the available payment methods. Additionally, the credit card icons are shown solely based on the credit_card_types annotation on the payment gateway plugin itself, which would not support identifying enabled wallet services or including other logos.

One additional problem with the way these payment method options are built is that they default to the payment method type associated with the gateway plugin (in our case “Credit card”) even if the gateway will support more types than just that one. There’s no simple way to override the functionality, so I’m going to propose for now that we simply alter the checkout pane form element based on some new configuration options in the gateway plugin.

For Payment Element, I believe we should approach this like so:

  1. Add a fieldset beneath the API key fields labeled “Checkout form display label”.
  2. Add a “Custom display label” textfield to it that is empty by default with a description that reads, “Defaults to Credit card.”
  3. Add a select list element labeled “Show payment method logos?” with the options being, no | "No", after | "After the label", and before | "Before the label".
    1. Default this to no.
  4. Add a checkboxes element labeled “Logos to include” that includes checkboxes for all the credit card type and the wallet services. (We can address other payment methods later.)
    1. Default this to enable logo for Visa, Mastercard, American Express, and Discover credit cards.
    2. Use form states to hide this element when “No” is selected in “Show payment method logos?”
  5. Alter the payment information checkout pane wherever it appears to replace the default option label with a custom display label if the textfield is not empty and then to either append or prepend the credit card logos.
    1. This will require getting SVGs for the wallet services. I see them in the Stripe dashboard at https://dashboard.stripe.com/settings/payment_methods but don’t know exactly how to download them.
    2. We should be able to use the existing theme template and CSS, but instead of just fetching the credit card types from the annotation like the Card Element payment method add form plugin, we’d prepare the #credit_cards array from the selected enabled logos.
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

thenyouDi created an issue. See original summary.

rszrama’s picture

Issue summary: View changes
rszrama’s picture

Component: Card Element » Payment Element

vmarchuk made their first commit to this issue’s fork.

vmarchuk’s picture

Status: Active » Needs review

Opened MR with the fixes.

rszrama’s picture

The settings updates look good, but I'm not seeing the Wallet logos (Apple Pay / Google Pay). Am I missing them or do we just need a quick follow-up commit for that?

vmarchuk’s picture

Added support for Apple/Google Pay Wallet logos.

  • rszrama committed c28cf85b on 8.x-1.x authored by vmarchuk
    Issue #3385962: Add Support for Wallet Icons Alongside credit Card Icons
    
rszrama’s picture

Status: Needs review » Fixed

Tested great locally. Committed.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.