Contrib.social

Add Support for Wallet Icons Alongside credit Card Icons

Open on Drupal.org →
Created on 7 September 2023, 10 months ago
Updated 19 September 2023, 10 months ago

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.
📌 Task
Status

Fixed

Version

1.0

Component

Payment Element

Created by

🇺🇸United States thenyouDi Asheville, North Carolina

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024