Issue #3245980 by thenchev, 3ssom, cbildstein, jsacksick: Add credit card icons on checkout.

diff --git a/commerce_stripe.install b/commerce_stripe.install

index 1271828..f86fef2 100644

--- a/commerce_stripe.install

+++ b/commerce_stripe.install

@@ -21,3 +21,21 @@ function commerce_stripe_requirements($phase) {

   return $requirements;

 }

+

+/**

+ * Disables credit card icon settings on existing payment gateways.

+ */

+function commerce_stripe_update_8101() {

+  $payment_gateways = \Drupal::entityTypeManager()

+    ->getStorage('commerce_payment_gateway')

+    ->loadMultiple();

+

+  foreach ($payment_gateways as $payment_gateway) {

+    if ($payment_gateway->getPluginId() === 'stripe') {

+      $configuration = $payment_gateway->getPluginConfiguration();

+      $configuration['enable_credit_card_icons'] = FALSE;

+      $payment_gateway->setPluginConfiguration($configuration);

+      $payment_gateway->save();

+    }

+  }

+}

diff --git a/commerce_stripe.libraries.yml b/commerce_stripe.libraries.yml

index ed628dd..8b73f61 100755

--- a/commerce_stripe.libraries.yml

+++ b/commerce_stripe.libraries.yml

@@ -40,3 +40,9 @@ checkout_review:

     - core/jquery.once

     - commerce_stripe/messages

     - commerce_stripe/stripe

+

+credit_card_icons:

+  version: VERSION

+  css:

+    theme:

+      css/commerce_stripe.credit_card_icons.css: {}

diff --git a/commerce_stripe.module b/commerce_stripe.module

new file mode 100644

index 0000000..0ada641

--- /dev/null

+++ b/commerce_stripe.module

@@ -0,0 +1,19 @@

+<?php

+

+/**

+ * @file

+ * Used for stripe integration.

+ */

+

+/**

+ * Implements hook_theme().

+ */

+function commerce_stripe_theme() {

+  return [

+    'commerce_stripe_credit_card_logos' => [

+      'variables' => [

+        'credit_cards' => [],

+      ],

+    ],

+  ];

+}

diff --git a/config/schema/commerce_stripe.schema.yml b/config/schema/commerce_stripe.schema.yml

index 630d723..b41652f 100755

--- a/config/schema/commerce_stripe.schema.yml

+++ b/config/schema/commerce_stripe.schema.yml

@@ -7,3 +7,6 @@ commerce_payment.commerce_payment_gateway.plugin.stripe:

     secret_key:

       type: string

       label: 'Secret key'

+    enable_credit_card_icons:

+      type: boolean

+      label: 'Enable credit card icons'

diff --git a/css/commerce_stripe.credit_card_icons.css b/css/commerce_stripe.credit_card_icons.css

new file mode 100644

index 0000000..64d47c0

--- /dev/null

+++ b/css/commerce_stripe.credit_card_icons.css

@@ -0,0 +1,31 @@

+/**

+ * Payment method icon list.

+ */

+.payment-method-icon-list {

+  margin: 0 0 1em;

+  padding: 0;

+  font-size: 0;

+}

+

+.payment-method-icon-list .payment-method-icon {

+  position: relative;

+  margin: 0 10px 10px 0;

+  width: 40px;

+  height: 25px;

+  background-size: 40px 25px;

+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);

+  border-radius: 4px;

+}

+

+@media all and (min-width: 851px) {

+  .payment-method-icon-list .payment-method-icon {

+    margin: 0 15px 15px 0;

+    width: 54px;

+    height: 34px;

+    background-size: 54px 34px;

+  }

+}

+

+.payment-method-icon-list .payment-method-icon:first-child {

+  margin-left: 0;

+}

diff --git a/js/commerce_stripe.form.js b/js/commerce_stripe.form.js

index e8785a6..e84b972 100755

--- a/js/commerce_stripe.form.js

+++ b/js/commerce_stripe.form.js

@@ -62,6 +62,7 @@

         };

         // Create instances of the card elements.

         self.cardNumber = elements.create('cardNumber', {

+          showIcon: drupalSettings.commerceStripe.enable_credit_card_logos,

           classes: classes,

           placeholder: ''

         });

diff --git a/src/Plugin/Commerce/PaymentGateway/Stripe.php b/src/Plugin/Commerce/PaymentGateway/Stripe.php

index ad61d67..9eed191 100755

--- a/src/Plugin/Commerce/PaymentGateway/Stripe.php

+++ b/src/Plugin/Commerce/PaymentGateway/Stripe.php

@@ -142,6 +142,7 @@ class Stripe extends OnsitePaymentGatewayBase implements StripeInterface {

     return [

       'publishable_key' => '',

       'secret_key' => '',

+      'enable_credit_card_icons' => TRUE,

     ] + parent::defaultConfiguration();

   }

@@ -157,6 +158,7 @@ class Stripe extends OnsitePaymentGatewayBase implements StripeInterface {

       '#default_value' => $this->configuration['publishable_key'],

       '#required' => TRUE,

     ];

+

     $form['secret_key'] = [

       '#type' => 'textfield',

       '#title' => $this->t('Secret Key'),

@@ -164,6 +166,13 @@ class Stripe extends OnsitePaymentGatewayBase implements StripeInterface {

       '#required' => TRUE,

     ];

+    $form['enable_credit_card_icons'] = [

+      '#type' => 'checkbox',

+      '#title' => $this->t('Enable Credit Card Icons'),

+      '#description' => $this->t('Enabling this setting will display credit card icons in the payment section during checkout.'),

+      '#default_value' => $this->configuration['enable_credit_card_icons'],

+    ];

+

     return $form;

   }

@@ -202,6 +211,7 @@ class Stripe extends OnsitePaymentGatewayBase implements StripeInterface {

       $values = $form_state->getValue($form['#parents']);

       $this->configuration['publishable_key'] = $values['publishable_key'];

       $this->configuration['secret_key'] = $values['secret_key'];

+      $this->configuration['enable_credit_card_icons'] = $values['enable_credit_card_icons'];

     }

   }

diff --git a/src/PluginForm/Stripe/PaymentMethodAddForm.php b/src/PluginForm/Stripe/PaymentMethodAddForm.php

index 730f0fb..a2d22b9 100755

--- a/src/PluginForm/Stripe/PaymentMethodAddForm.php

+++ b/src/PluginForm/Stripe/PaymentMethodAddForm.php

@@ -50,6 +50,7 @@ class PaymentMethodAddForm extends BasePaymentMethodAddForm implements TrustedCa

     $element['#attached']['drupalSettings']['commerceStripe'] = [

       'publishableKey' => $plugin->getPublishableKey(),

       'clientSecret' => $client_secret,

+      'enable_credit_card_logos' => FALSE,

     ];

     // Populated by the JS library.

@@ -60,6 +61,23 @@ class PaymentMethodAddForm extends BasePaymentMethodAddForm implements TrustedCa

       ],

     ];

+    // Display credit card logos in checkout form.

+    if ($plugin->getConfiguration()['enable_credit_card_icons']) {

+      $element['#attached']['library'][] = 'commerce_stripe/credit_card_icons';

+      $element['#attached']['library'][] = 'commerce_payment/payment_method_icons';

+      $element['#attached']['drupalSettings']['commerceStripe']['enable_credit_card_logos'] = TRUE;

+

+      $supported_credit_cards = [];

+      foreach ($plugin->getCreditCardTypes() as $credit_card) {

+        $supported_credit_cards[] = $credit_card->getId();

+      }

+

+      $element['credit_card_logos'] = [

+        '#theme' => 'commerce_stripe_credit_card_logos',

+        '#credit_cards' => $supported_credit_cards,

+      ];

+    }

+

     $element['card_number'] = [

       '#type' => 'item',

       '#title' => t('Card number'),

diff --git a/templates/commerce-stripe-credit-card-logos.html.twig b/templates/commerce-stripe-credit-card-logos.html.twig

new file mode 100644

index 0000000..300cfa3

--- /dev/null

+++ b/templates/commerce-stripe-credit-card-logos.html.twig

@@ -0,0 +1,17 @@

+{#

+/**

+ * @file

+ *

+ * Default template for displaying credit card logos on payment method add form.

+ *

+ * Available variables:

+ * - credit_cards: List of supported credit cards.

+ *

+ * @ingroup themeable

+ */

+#}

+<div class="payment-method-icon-list">

+  {% for credit_card in credit_cards %}

+    <span class="payment-method-icon payment-method-icon--{{ credit_card }}"></span>

+  {% endfor %}

+</div>

diff --git a/tests/src/FunctionalJavascript/CheckoutTest.php b/tests/src/FunctionalJavascript/CheckoutTest.php

index 791c7e4..2b13d57 100644

--- a/tests/src/FunctionalJavascript/CheckoutTest.php

+++ b/tests/src/FunctionalJavascript/CheckoutTest.php

@@ -109,6 +109,8 @@ class CheckoutTest extends CommerceWebDriverTestBase {

     $this->fillCreditCardData('4242424242424242', '0322', '123');

+    $this->assertSession()->elementExists('css', 'span.payment-method-icon.payment-method-icon--visa');

+

     $this->submitForm([

       'payment_information[add_payment_method][billing_information][address][0][address][given_name]' => 'Johnny',

       'payment_information[add_payment_method][billing_information][address][0][address][family_name]' => 'Appleseed',

  return $requirements;

}

/**

 * Disables credit card icon settings on existing payment gateways.

 */

function commerce_stripe_update_8101() {

  $payment_gateways = \Drupal::entityTypeManager()

    ->getStorage('commerce_payment_gateway')

    ->loadMultiple();

  foreach ($payment_gateways as $payment_gateway) {

    if ($payment_gateway->getPluginId() !== 'stripe') {

      continue;

    }

    $configuration = $payment_gateway->getPluginConfiguration();

    $configuration['enable_credit_card_icons'] = FALSE;

    $payment_gateway->setPluginConfiguration($configuration);

    $payment_gateway->save();

  }

}

    - core/jquery.once

    - commerce_stripe/messages

    - commerce_stripe/stripe

credit_card_icons:

  version: VERSION

  css:

    theme:

      css/commerce_stripe.credit_card_icons.css: {}

<?php

/**

 * @file

 * Provides Commerce integration for Stripe Payments.

 */

/**

 * Implements hook_theme().

 */

function commerce_stripe_theme() {

  return [

    'commerce_stripe_credit_card_logos' => [

      'variables' => [

        'credit_cards' => [],

      ],

    ],

  ];

}

    secret_key:

      type: string

      label: 'Secret key'

    enable_credit_card_icons:

      type: boolean

      label: 'Enable credit card icons'