Merchant Fee for Payment Plan - Shopify Plus

Integration guide for Zip MFPP on Shopify Plus

All of the files required for integration are stored in the integration subdirectory of this repository.

Checkout integration:

Perform the following steps for integration:

  1. Open your store's admin area, navigate to Online Store -> Themes. Click on the Actions drop down next to the theme you'd like to integrate Zip MFPP with and select "Edit code".

  2. On the left hand side list, under the "Snippets" section, click "Add a new snippet" and name it zip-checkout-mfpp.

  3. Paste the contents of the zip-checkout-mfpp.liquid file into the code area and click "Save" once you finish.

  4. On the left hand side, navigate to the "Layout" section and determine if you have a template file called checkout.liquid. If you do, you should skip the next step.

  5. Click on "Add a new layout" and on the dropdown select "checkout", leave the "called" field empty.

  6. Paste the following snippet that calls the MFPP script before the </body> tag:

    {% comment %}<!-- Begin Zip checkout MFPP -->{% endcomment %}
    {% assign zip_merchant_id = 'your-merchant-id' -%}
    {% assign zip_selector = '#checkout_payment_gateway_123456' -%}
    {% include 'zip-checkout-mfpp' %}
    {% comment %}<!-- End Zip checkout MFPP -->{% endcomment %}
    
  7. Change the zip_merchant_id value with your merchant ID.

  8. Navigate to your online store and start the checkout process, navigate to payment methods step, open developer console and find the radio button for Zip. Copy the ID of the radio button and set the zip_selector value in checkout.liqud to it. Make sure you prepend the ID with the # symbol.

  9. Save the file and test the results.

That finishes the integration for the payment step and order confirmation pages.

Successful checkout integrationSuccessful checkout integration

Successful checkout integration

Order confirmation email integration:

Perform the following steps in order to integrate the notification on the confirmation email:

  1. Navigate to Settings -> Notifications -> Order confirmation.

  2. In the code editor, add the following snippet to the top of the code:

    {% comment %} Zip MFPP integration snippet {% endcomment %}
    {% assign zip_fee = attributes.zip-mfpp-amount | default: 0 | plus: 0 -%}
    {% comment %} END Zip MFPP integration snippet {% endcomment %}
    
  3. Locate the following line:

    <table class="row subtotal-table subtotal-table--total">
    
  4. Above that line, there should be a </table> tag. Paste the following snippet of code above it:

    {% comment %} Zip MFPP integration snippet {% endcomment %}
    {% if zip_fee > 0 %}
    <tr class="subtotal-line">
      <td class="subtotal-line__title">
        <p>
          <span>Merchant fee for payment plan</span>
        </p>
      </td>
      <td class="subtotal-line__value">
        <strong>{{ zip_fee | money }}</strong>
      </td>
    </tr>
    {% endif %}
    {% comment %} END Zip MFPP integration snippet {% endcomment %}
    
  5. Find the line that contains the following snippet:

    <strong>{{ total_price | money_with_currency }}</strong>
    

    Replace that entire line with the contents of the following snippet:

    {% comment %} Zip MFPP integration snippet {% endcomment %}
    <strong>{{ total_price | plus: zip_fee | money_with_currency }}</strong>
    {% comment %} END Zip MFPP integration snippet {% endcomment %}
    
  6. Locate all instances of {{ transaction.amount | money }} and modify them so that you add the zip_fee value to them by using Liquid's plus filter. It should look similar to {{ transaction.amount | plus: zip_fee | money }}.

🚧

NOTE

You should only perform step number 6 if you installed Zip payment gateway through the Payments app, if you are using the legacy implementation, you must not perform that step.

Successful email integration.Successful email integration.

Successful email integration.