0

With template hints ran on older Magento version, I could locate file StripeIntegration_Payments\web\template\payment\form.html that was rendering Pay By Card radio input in the payment page. I tried adding the code below in it display the logo, but it doesn't work on the latest version of Stripe module. Do I need to do it via KnockOut JS that I don't know well? We recently upgraded Stripe module and installed it in vendor instead of under app/code this time. Now templatehints isn't working on payment page in checkout to find out if the html file I'm adding this code in is the right one. Please watch this 30seconds loom video I made explaining where I want to add the logo to. https://www.loom.com/share/6d29b43a15e64a55ae2fae6227e16b7a .Please suggest possible solutions.

    <span>
      <img class="payment-icon" src="/pub/media/pmmimg/4Cards300.jpg" alt="Secure Payment" width="250">
      <!--<img class="stripe-icon" data-bind="attr:{src: path}">-->
    </span>

form.html below:

<div class="payment-method stripe-payments"
  data-bind="
    css: {
      '_active': (getCode() == isChecked())
    }">
  <div class="payment-method-title field choice">
    <input type="radio"
      name="payment[method]"
      class="radio"
      data-bind="
        attr: { 'id': getCode() },
        value: getCode(),
        checked: isChecked,
        click: selectPaymentMethod,
        visible: isRadioButtonVisible()
    "/>
    <label class="label" data-bind="attr: {'for': getCode()}">
      <span class="stripe-icon-container" data-bind="css: { right: iconsRight }, if: hasIcons">
        <span>
          <img class="payment-icon" src="/pub/media/pmmimg/4Cards300.jpg" alt="Secure Payment" width="250">
          <!--<img class="stripe-icon" data-bind="attr:{src: path}">-->
        </span>
      </span>
      <span data-bind="text: getTitle()"></span>
    </label>
  </div>

  <div class="payment-method-content" data-bind="if: stripePaymentsError()">
    <p class="message message-error error">
      <!-- ko i18n: stripePaymentsError() --><!-- /ko -->
    </p>
  </div>

  <div class="payment-method-content stripe-payments-card-form" data-bind="if: !stripePaymentsError()">
    <div class="payment-method-billing-address">
      <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
      <!-- ko template: getTemplate() --><!-- /ko -->
      <!--/ko-->
    </div>

    <p class="stripe-payments-billing-address-warning" data-bind="if: !isBillingAddressSet()">
      <!-- ko i18n: 'Please update your billing address to proceed.'--><!-- /ko -->
    </p>

    <div data-bind="if: displayAtThisLocation(), visible: isPlaceOrderEnabled(), afterRender: initPRAPI">
      <div class="stripe-payments stripe-payments-apple-pay-section" data-bind="visible: showApplePaySection(), if: displayAtThisLocation()">
        <label><!-- ko i18n: 'Pay with ' + prapiTitle() --><!-- /ko --></label>
        <div id="payment-request-button"></div>
        <label><!-- ko i18n: 'Or use a card below'--><!-- /ko --></label>
      </div>
    </div>

    <div data-bind="
        attr: {
          id: getCode() + '_saved_cards_div'
        },
        if: showSavedCardsSection,
        visible: showSavedCardsSection
      " class="stripe-payments stripe-payments-saved-cards-section">
      <div data-bind="foreach: config().savedCards">
        <div class="stripe-payments-saved-card">
          <input type="radio" name="payment[cc_saved]" class="select"
            data-bind="
              checked: $parent.stripePaymentsSelectedCard,
              attr: {
                id: id
              },
              value: (id + ':' + brand + ':' + last4)
            ">
          <label data-bind="attr: { for: id }">
            <span data-bind="attr: { class: brand + ' type' }, text: cardType"></span>
            <span data-bind="text: last4" class="last4 stripe-payments-fade"></span>
            <span class="exp stripe-payments-fade">
              <!-- ko i18n: 'exp'--><!-- /ko -->
              <span data-bind="text: exp_month"></span>/<span data-bind="text: exp_year"></span>
            </span>
          </label>
        </div>
      </div>

      <div data-bind="if: config().savedCards.length">
        <input data-bind="checked: stripePaymentsSelectedCard" type="radio" name="payment[cc_saved]" value="new_card" class="select" id="new_card">
        <label for="new_card">
            <span><!-- ko i18n: 'Use a new card'--><!-- /ko --></span>
        </label>
      </div>
      <br>
    </div>

    <div class="fieldset ccard" data-bind="visible: showNewCardSection">

      <div>
        <div class="stripe-payments-elements">
          <label for="card-number" id="card-details-label">
            <span><!-- ko i18n: 'Enter your card details:'--><!-- /ko --></span>
          </label>
        </div>
        <div class="stripe-payments-elements no-wrap">
          <div id="stripe-payments-card-number" class="stripe-elements-field">
          <!-- a Stripe Element will be inserted here. -->
          </div>
          <div class="stripe-payments-brand"><i class="pf pf-credit-card" id="stripe-payments-brand-icon"></i></div>
        </div>
        <div class="stripe-payments-elements no-wrap">
          <div id="stripe-payments-card-expiry" class="stripe-elements-field">
          <!-- a Stripe Element will be inserted here. -->
          </div>
          <div id="stripe-payments-card-cvc" class="stripe-elements-field">
          <!-- a Stripe Element will be inserted here. -->
          </div>
        </div>
        <div class="stripe-payments-elements">
          <div class="pci-dss-info-block">
            <svg xmlns="http://www.w3.org/2000/svg" width="1.3em" height="1.3em" viewBox="0 0 24 24" id="pci-svg">
              <path d="m18,8l-1,0l0,-2c0,-2.76 -2.24,-5 -5,-5s-5,2.24 -5,5l0,2l-1,0c-1.1,0 -2,0.9 -2,2l0,10c0,1.1 0.9,2 2,2l12,0c1.1,0 2,-0.9 2,-2l0,-10c0,-1.1 -0.9,-2 -2,-2zm-6,9c-1.1,0 -2,-0.9 -2,-2s0.9,-2 2,-2s2,0.9 2,2s-0.9,2 -2,2zm3.1,-9l-6.2,0l0,-2c0,-1.71 1.39,-3.1 3.1,-3.1c1.71,0 3.1,0.92125 3.1,2.84372l0,-0.78122l0,3.0375z"/>
            </svg>
            <div class="pci-dss-info-text">
              <span><!-- ko i18n: 'Your card details are protected using PCI DSS v3.2 security standards.'--><!-- /ko --></span>
            </div>
          </div>
        </div>

        <div id="stripe-payments-card-errors"></div>
      </div>

    </div>


    <div data-bind="
      attr: {
        id: getCode() + '_cc_save_div'
      },
      if: showSaveCardOption,
      visible: !config().alwaysSaveCard">
      <div class="input-box">
        <label for="stripe_payments_cc_save">
            <input type="checkbox"
              data-bind="
                attr: {
                  title: $t('Save card for future purchases'),
                  id: getCode() + '_cc_save'
                },
                checked: stripePaymentsCardSave
              "
              class="input-checkbox stripe-input" name="payment[cc_save]" checked="checked"/>
            <label data-bind="attr: {for: getCode() + '_cc_save'}" class="label">
              <span><!-- ko i18n: 'Save card for future purchases'--><!-- /ko --></span>
            </label>
        </label>
      </div>
    </div>

    <input type="hidden"
          class="input-text"
          name="payment[cc_stripejs_token]"
          value=""
          data-bind="
            attr: {
              id: getCode() + '_cc_stripejs_token'
            },
            value: stripePaymentsStripeJsToken
          "/>

    <div class="checkout-agreements-block">
        <!-- ko foreach: $parent.getRegion('before-place-order') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>

    <!-- ko foreach: getRegion('messages') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->

    <div class="actions-toolbar" id="actions-toolbar">
      <div class="primary">
        <button class="action primary checkout" type="submit"
          data-bind="
            click: placeOrder,
            enable: isPlaceOrderEnabled(),
            attr: {title: $t('Place Order')},
            afterRender: onCheckoutFormRendered
          ">
          <span data-bind="i18n: 'Place Order'"></span>
        </button>
      </div>
    </div>

  </div>

  <div class="payment-method-content stripe-payments-installments-form" style="display: none;">

    <div class="installments-header">
      <h3>
        <a class="action back-link" data-bind="click: collapseInstallments">&lt; <!-- ko i18n: 'Back'--><!-- /ko --></a>
        <!-- ko i18n: 'Installment plans are available for your card!'--><!-- /ko -->
      </h3>
    </div>

    <div class="stripe-payments-installment-plans" data-bind="if: installmentPlans">
      <label><!-- ko i18n: 'I would like to pay my balance'--><!-- /ko --></label>
      <label>
        <input type="radio" name="use_installment" id="stripe_installment_now" value="now" checked>
        <span><!-- ko i18n: 'Immediately'--><!-- /ko --></span>
      </label>
      <label>
        <input type="radio" name="use_installment" id="stripe_installment_over_time" value="over_time">
        <span><!-- ko i18n: 'Over a period of'--><!-- /ko --></span>
        <select data-bind="click: focusInstallments,
                       options: installmentPlans,
                       optionsText: 'label',
                       optionsValue: 'value',
                       value: selectedInstallmentPlan" name="selected_plan">
         </select>
      </label>
    </div>

    <!-- ko foreach: getRegion('messages') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->

    <div class="actions-toolbar" id="actions-toolbar" data-bind="if: installmentPlans">
      <div class="primary">
        <button class="action primary checkout" type="submit"
          data-bind="
            click: placeOrderWithToken,
            attr: {title: $t('Finalize Order')}
          ">
          <span data-bind="i18n: 'Finalize Order'"></span>
        </button>
      </div>
    </div>

  </div>

</div>

2 Answers 2

1

You can use below code:

<img data-bind="attr: { src: require.toUrl('images/4Cards300.jpg') }" />

Image path will be:

app/design/frontend/{Package}/{theme}/web/images

2
  • Thank you, will implement this and let you know what happens. Nov 18, 2022 at 16:47
  • Hi Pawan, I think I didn't the template file where I should add this code in the latest version of Stripe module. Kindly watch this short video I made to help you understand the problem. loom.com/share/6d29b43a15e64a55ae2fae6227e16b7a Nov 20, 2022 at 6:19
0

Run this command from the Magento directory: grep -r "Pay by" vendor, you will see the result that indicates which file should edit.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.