Customise Payment form in checkout

Hi guys
I have trawled the documentation and can’t find anywhere the information i need to customise the text on our paypal express payment method

I have other customisations set-up that all work well including one for deferred.payment but I’m unsure how to target the paypal express payment button in checkout. I want it to read something like “Pay with [paypal svg] or paypal credit”

 <script>
      document.addEventListener('snipcart.ready', function() {
          Snipcart.ready.then(function() {
              Snipcart.api.session.setLanguage('en', {
                  address_form: {
                      province: "County"
                  },
                  errors: {
                      payment_failed :{
                        description: "Try again later, or contact us for support. Sometimes your bank will decline Secure3D payments based on their own set of rules. In these cases we are happy to take your order over the phone on 02825 880773"
                      }
                  },
                  payment: {
                    form: {
                        deferred_payment_title: "Pay Later Via BACS or With Finance",
                        deferred_payment_instructions: "By placing this order, you agree to pay later through the payment method identified by us. We will email you our bank details so you can use online banking to pay for the order via electronic transfer. You need to make this payment before the order is dispatched. Alternatively if you wish to apply for finance call us on 028 2588 0773 or 07702 727 559 and we will have our broker contact you today.",
                        card_label: "Credit/Debit Card"
                        },
                    methods: {
                        deferred_payment: "Pay Later Via BACS or Arrange Finance",
                        paypal_express: "Pay with Paypal or Paypal Credit" {here i've tried paypal_payment, paypal, paypal_express etc...}
                        }
                  }
              });              
          });
      });
  </script>

Hi @daveharrisonnet, thanks for reaching out!

The default checkout button does not have any string after the PayPal icon, so something you could do is replace the button with your own layout if it is PayPal.
I made a quick test here that looks like this:
image

 <payment-methods-list-item>
        <li class="snipcart-payment-methods-list-item">
          <button
            v-if="paymentMethod.id === 'paypal'"
            type="button"
            class="snipcart-payment-methods-list-item__button"
            @click="onClick"
            :title="this.$localize('payment.checkout_with_method', { method: methodLabel })"
          >
              Checkout with 
              <svg viewBox="0 0 350 161" fill="none" xmlns="http://www.w3.org/2000/svg" alt="PayPal" title="PayPal" class="snipcart-payment-methods-list-item__icon snipcart__icon"><path d="M78.676 47.805c-3.476-3.963-9.76-5.662-17.8-5.662H37.544a3.342 3.342 0 00-3.302 2.819l-9.71 61.619a2 2 0 001.14 2.13c.263.121.549.184.838.183h14.405l3.617-22.946-.112.719a3.332 3.332 0 013.288-2.818h6.845c13.447 0 23.976-5.462 27.051-21.262.092-.467.17-.922.24-1.367.913-5.84-.007-9.814-3.166-13.413" fill="#003087"></path><path d="M255.017 77.126c-.88 5.782-5.296 5.782-9.565 5.782h-2.43l1.705-10.795a1.341 1.341 0 011.325-1.132h1.115c2.907 0 5.653 0 7.069 1.655.846.99 1.101 2.461.781 4.49zm-1.859-15.085h-16.107a2.243 2.243 0 00-2.214 1.89l-6.508 41.3a1.345 1.345 0 001.325 1.551h8.265c.771 0 1.427-.56 1.547-1.321l1.849-11.712a2.238 2.238 0 012.209-1.89h5.097c10.612 0 16.734-5.132 18.333-15.31.721-4.449.029-7.946-2.054-10.394-2.29-2.692-6.35-4.116-11.739-4.116" fill="#009CDE"></path><path d="M140.131 77.126c-.88 5.782-5.295 5.782-9.567 5.782h-2.43l1.705-10.795a1.342 1.342 0 011.325-1.132h1.115c2.908 0 5.653 0 7.069 1.655.848.99 1.103 2.461.783 4.49zm-1.858-15.085h-16.108a2.24 2.24 0 00-2.211 1.89l-6.511 41.3a1.342 1.342 0 001.325 1.551h7.692a2.238 2.238 0 002.21-1.89l1.759-11.141a2.237 2.237 0 012.21-1.89h5.096c10.612 0 16.734-5.134 18.333-15.312.721-4.449.03-7.946-2.053-10.394-2.291-2.692-6.351-4.116-11.74-4.116l-.002.002zm37.396 29.913c-.748 4.407-4.243 7.367-8.706 7.367-2.237 0-4.029-.721-5.179-2.084-1.143-1.35-1.57-3.274-1.209-5.416.693-4.37 4.249-7.422 8.643-7.422 2.191 0 3.967.727 5.142 2.102 1.182 1.385 1.647 3.32 1.309 5.453zm10.749-15.015h-7.713a1.345 1.345 0 00-1.329 1.136l-.337 2.156-.54-.78c-1.669-2.424-5.393-3.236-9.11-3.236-8.521 0-15.8 6.458-17.217 15.513-.737 4.521.31 8.839 2.873 11.852 2.353 2.768 5.711 3.921 9.713 3.921 6.869 0 10.678-4.411 10.678-4.411l-.345 2.143a1.353 1.353 0 00.765 1.429c.177.081.368.123.562.122h6.945a2.239 2.239 0 002.212-1.89l4.17-26.401a1.344 1.344 0 00-1.329-1.552" fill="#003087"></path><path d="M290.554 91.954c-.747 4.407-4.242 7.367-8.705 7.367-2.237 0-4.029-.721-5.18-2.084-1.142-1.35-1.57-3.274-1.208-5.416.693-4.37 4.247-7.422 8.643-7.422 2.191 0 3.967.727 5.142 2.102 1.182 1.385 1.647 3.32 1.308 5.453zm10.75-15.015h-7.713a1.345 1.345 0 00-1.329 1.136l-.337 2.156-.54-.78c-1.67-2.424-5.393-3.236-9.111-3.236-8.518 0-15.797 6.458-17.216 15.513-.737 4.521.312 8.839 2.874 11.852 2.353 2.768 5.712 3.921 9.713 3.921 6.872 0 10.681-4.411 10.681-4.411l-.345 2.143a1.335 1.335 0 001.323 1.551h6.943a2.242 2.242 0 002.214-1.89l4.17-26.401a1.344 1.344 0 00-1.329-1.552" fill="#009CDE"></path><path d="M227.498 76.941h-7.754a2.23 2.23 0 00-1.849.983L207.2 93.674l-4.534-15.136a2.237 2.237 0 00-2.145-1.599h-7.619a1.346 1.346 0 00-1.329 1.149c-.031.211-.011.427.058.63l8.535 25.057-8.029 11.329a1.341 1.341 0 001.097 2.118h7.746c.731 0 1.419-.359 1.838-.961l25.781-37.212a1.346 1.346 0 00.088-1.387 1.343 1.343 0 00-1.189-.72z" fill="#003087"></path><path d="M310.394 63.177l-6.613 42.056a1.34 1.34 0 00.766 1.428c.176.081.367.123.561.123h6.648a2.24 2.24 0 002.212-1.89l6.519-41.302a1.347 1.347 0 00-1.327-1.551h-7.439a1.34 1.34 0 00-1.327 1.134" fill="#009CDE"></path><path d="M78.676 47.805c-3.476-3.963-9.76-5.662-17.8-5.662H37.544a3.342 3.342 0 00-3.302 2.819l-9.71 61.619a2 2 0 001.14 2.13c.263.121.549.184.838.183h14.405l3.617-22.946-.112.719a3.332 3.332 0 013.288-2.818h6.845c13.447 0 23.976-5.462 27.051-21.262.092-.467.17-.922.24-1.367.913-5.84-.007-9.814-3.166-13.413" fill="#003087"></path><path d="M48.418 61.297a2.924 2.924 0 012.885-2.465h18.291c2.167 0 4.187.141 6.034.436a25.35 25.35 0 012.99.669 16.58 16.58 0 013.221 1.283c.918-5.841-.004-9.814-3.163-13.415-3.478-3.96-9.76-5.66-17.8-5.66H37.542a3.342 3.342 0 00-3.298 2.819l-9.715 61.613a2 2 0 001.977 2.315h14.407l3.617-22.948 3.888-24.647z" fill="#003087"></path><path d="M81.841 61.218c-.071.457-.15.913-.239 1.367-3.075 15.798-13.605 21.262-27.052 21.262h-6.846a3.327 3.327 0 00-3.286 2.818l-3.505 22.225-.997 6.305a1.752 1.752 0 001.732 2.027H53.79a2.923 2.923 0 002.885-2.465l.118-.619 2.289-14.504.145-.802a2.922 2.922 0 012.887-2.465h1.817c11.763 0 20.973-4.776 23.665-18.599 1.121-5.773.54-10.598-2.43-13.985a11.596 11.596 0 00-3.325-2.565z" fill="#009CDE"></path><path d="M78.62 59.937c-.47-.14-.953-.264-1.452-.374a25.674 25.674 0 00-1.54-.29c-1.849-.302-3.867-.443-6.035-.443h-18.29a2.915 2.915 0 00-2.885 2.467L44.53 85.948l-.112.717a3.327 3.327 0 013.285-2.818h6.848c13.447 0 23.976-5.462 27.051-21.262.092-.467.168-.92.24-1.367a16.607 16.607 0 00-2.53-1.067 26.858 26.858 0 00-.692-.216" fill="#012169"></path></svg>
              or PayPal credit.
            </span>
            <span class="snipcart-payment-methods-list-item__arrow">
              <icon name="continue-arrow" />
            </span>
          </button>

          <button
            v-else 
            type="button"
            class="snipcart-payment-methods-list-item__button"
            @click="onClick"
            :title="this.$localize('payment.checkout_with_method', { method: methodLabel })"
          >
            <span
              v-if="!isDeferredPayment"
              class="snipcart-payment-methods-list-item__label"
            >
              {{ `${$localize('payment.checkout_with')}`}} 
              <img
                v-if="paymentMethod.iconUrl"
                :src="paymentMethod.iconUrl"
                :alt="methodLabel"
                class="snipcart-payment-methods-list-item__icon"
              />
              <icon
                v-else-if="hasIcon"
                :name="`method-${paymentMethod.id}`"
                :alt="methodLabel"
                class="snipcart-payment-methods-list-item__icon"
              ></icon>
              <template v-else>{{ methodLabel }}</template>
            </span>
            <span v-else class="snipcart-payment-methods-list-item__label">
              {{ methodLabel }}
            </span>
            <span class="snipcart-payment-methods-list-item__arrow">
              <icon name="continue-arrow" />
            </span>
          </button>
          </li
      ></payment-methods-list-item>

You would need to tweak it to your needs (and fix the wide space in the svg), but it could be a starting point to get this working.

Reference:

I hope this helps.

Thanks!

1 Like

@nelitow

That looks just the ticket!

Can I just customise the paypal button or do I need to include all payment methods in the customisation?

Dave

Hi @daveharrisonnet

You need to customize all of them, as we don’t have a specific component for the PayPal button.

Thanks!