Merchant Fee for Payment Plan - Shopify Plus

Integration guide for Zip MFPP on Shopify Plus

This integration guide is targeted towards developers working with Shopify merchants.

Checkout:

NOTE: You must use Shopify Plus in order to integrate the MFPP notification on checkout page.

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 quadpay-checkout-mfpp.

  3. Open the following link and copy and paste the snippet of code from it into the code editor on Shopify 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 before the </body> tag and modify it:

    {% comment %}<!-- Begin Zip checkout MFPP -->{% endcomment %}
    {% assign quadpay_merchant_id = 'your-merchant-id' %}
    {% assign quadpay_selector = '#checkout_payment_gateway_39537279024' %}
    {% include 'quadpay-checkout-mfpp' %}
    {% comment %}<!-- End Zip checkout MFPP -->{% endcomment %}
    

    Use the same merchant ID that you use for Shopify. In order to determine the "quadpay_selector" you must go to the payment method step of your checkout, right click the radio button next to Zip and determine its ID. The ID should be in similar format to the one in the snippet example with the only difference being in the numbers at the end.

  7. Save the file and test the results. When you choose Zip on payment method step you should see a similar result to:

Successful checkout integrationSuccessful checkout integration

Successful checkout integration

Note that this will also show on the thank you page (order status page) of your checkout.

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

Order confirmation email:

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, find the following line:

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

    {% comment %} Zip MFPP integration snippet {% endcomment %}
    {% assign quadpay_transaction = transactions | where: "gateway", "quadpay" | first %}
    {% assign quadpay_fee = 0 %}
    {% if quadpay_transaction %}
    {% assign quadpay_fee = quadpay_transaction.amount | minus: total_price %}
    {% endif %}
    {% if quadpay_fee %}
    <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>{{ quadpay_fee | money }}</strong>
      </td>
    </tr>
    {% endif %}
    {% comment %} END Zip MFPP integration snippet {% endcomment %}
    
  4. Find the line that contains the following snippet:

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

    Replace that entire line with the following snippet:

    {% comment %} Zip MFPP integration snippet {% endcomment %}
    <strong>{{ total_price | plus: quadpay_fee | money_with_currency }}</strong>
    {% comment %} END Zip MFPP integration snippet {% endcomment %}
    
  5. Make a test order and confirm that everything works as expected. You should see a result similar to:

Successful email integration.Successful email integration.

Successful email integration.