Shopify

Klarna 分期支付申请，安装等-shopify

作者onenightrich，发布于 。

就目前的经济形式（2022年），如果你店铺的商品价格高于100刀的话，安装分期支付的收款通道是十分有必要的。

目前来说shopify支持的分期付款收款通道有很多，比如paypal，ZIP，Sezzle，官方自带的Shop pay等。但是这些申请开通都十分麻烦，需要你有美国公司，ssn等，门槛高，申请的手续麻烦。

相比较来说Klarna就简单多了（不要去官网，官网门槛也很高可以自行咨询），目前国内对接钱海，只需要去钱海咨询开通即可（钱海的收费，回款不在这讨论，自行咨询）。

申请以后，接上通道，并不会和官方申请的那样会在产品价格下面显示分期的付款金额。这里需要另外找程序员帮你解决。

我在fiverr上找了一个程序员帮我写了代码，现在分享出来供大家参考（不懂代码，所以分享全部修改的内容）。

1. 在product-template.liquid 

增加代码data-unit-price后quantity_selector前

<div class="klarnapayment">
              	<svg class="icon icon--full-color" xmlns="http://www.w3.org/2000/svg" role="img" width="38" height="24" viewBox="0 0 38 24" aria-labelledby="pi-klarna"><title id="pi-klarna">Klarna</title><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z" fill="#FFB3C7"></path><path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" fill="#FFB3C7"></path><path d="M34.117 13.184c-.487 0-.882.4-.882.892 0 .493.395.893.882.893.488 0 .883-.4.883-.893a.888.888 0 00-.883-.892zm-2.903-.69c0-.676-.57-1.223-1.274-1.223-.704 0-1.274.547-1.274 1.222 0 .675.57 1.223 1.274 1.223.704 0 1.274-.548 1.274-1.223zm.005-2.376h1.406v4.75h-1.406v-.303a2.446 2.446 0 01-1.394.435c-1.369 0-2.478-1.122-2.478-2.507 0-1.384 1.11-2.506 2.478-2.506.517 0 .996.16 1.394.435v-.304zm-11.253.619v-.619h-1.44v4.75h1.443v-2.217c0-.749.802-1.15 1.359-1.15h.016v-1.382c-.57 0-1.096.247-1.378.618zm-3.586 1.756c0-.675-.57-1.222-1.274-1.222-.703 0-1.274.547-1.274 1.222 0 .675.57 1.223 1.274 1.223.704 0 1.274-.548 1.274-1.223zm.005-2.375h1.406v4.75h-1.406v-.303A2.446 2.446 0 0114.99 15c-1.368 0-2.478-1.122-2.478-2.507 0-1.384 1.11-2.506 2.478-2.506.517 0 .997.16 1.394.435v-.304zm8.463-.128c-.561 0-1.093.177-1.448.663v-.535H22v4.75h1.417v-2.496c0-.722.479-1.076 1.055-1.076.618 0 .973.374.973 1.066v2.507h1.405v-3.021c0-1.106-.87-1.858-2.002-1.858zM10.465 14.87h1.472V8h-1.472v6.868zM4 14.87h1.558V8H4v6.87zM9.45 8a5.497 5.497 0 01-1.593 3.9l2.154 2.97H8.086l-2.341-3.228.604-.458A3.96 3.96 0 007.926 8H9.45z" fill="#0A0B09" fill-rule="nonzero"></path></g></svg>
                <p id="#klarnaid" >4 interest-free payments of <span id="mymoney">{{ current_variant.price | divided_by: 4 | money }}</span> </p>
              </div>

2.theme.js

a.修改代码

  _updatePrice: function(variant) {

        if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price) {

          return;

        }

改为

  _updatePrice: function(variant) {

        if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price) {

           console.log("test8");

          return;

        }

b.增加

 this.cache.price.innerHTML = theme.Currency.formatMoney(variant.price, theme.settings.moneyFormat);

后面增加

jQuery("#mymoney").html (theme.Currency.formatMoney(variant.price / 4, theme.settings.moneyFormat));

c.修改

      updateUnitPrice: function(evt) {
        var variant = evt.detail.variant;
        if (variant && variant.unit_price) {
          this.container.querySelector(this.selectors.unitPrice).innerHTML = theme.Currency.formatMoney(variant.unit_price, theme.settings.moneyFormat);
          this.container.querySelector(this.selectors.unitPriceBaseUnit).innerHTML = theme.Currency.getBaseUnit(variant);      this.container.querySelector(this.selectors.unitWrapper).classList.remove(classes.hidden);
        } else {
      this.container.querySelector(this.selectors.unitWrapper).classList.add(classes.hidden);
        }
      },

改为

 updateUnitPrice: function(evt) {
        var variant = evt.detail.variant;
   console.log("test4");
        if (variant && variant.unit_price) {
          this.container.querySelector(this.selectors.unitPrice).innerHTML = theme.Currency.formatMoney(variant.unit_price, theme.settings.moneyFormat);
          this.container.querySelector(this.selectors.unitPriceBaseUnit).innerHTML = theme.Currency.getBaseUnit(variant);    this.container.querySelector(this.selectors.unitWrapper).classList.remove(classes.hidden);
          $('#mymoney').HTML = theme.Currency.getBaseUnit(variant);
          console.log("test1");
        } else {         this.container.querySelector(this.selectors.unitWrapper).classList.add(classes.hidden);
           console.log("test2");
        }
      },

3.theme.css.liquid

增加代码

.klarnapayment svg, .klarnapayment p {
    display: inline-block;
    vertical-align: middle;
    padding: 0px !important;
    margin: 0px;
}

.klarnapayment svg {
    width: 57px;
    height: 28px;
}

.klarnapayment {
    border: 1px solid #e3e3e3;
    width: 400px;
    padding-top: 7px;
    padding-left: 8px;
    padding-bottom: 11px;
    margin-bottom: 1rem;
}
  
  @media only screen and (min-width:700px)
    {
      .klarnapayment {
       		width: 400px;
      }
        .klarnapayment p {
          font-size: 14px;
      }
    }
  
  @media only screen and (max-width:700px)
    {
        .klarnapayment {
          width: 100%;
          padding-left: 0px;
      }

      .klarnapayment p {
          font-size: 13px;
      }
    }

4.theme.liquid 

<head>后面+代码
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>