How to install the Fena's Shopify Payments App

To start add fena account-account payments to your Shopify store, just follow the instructions below.

Before you get started

The app is installed as a manual payment method. This means that the order is confirmed prior to the payment being made. However, the payment status against the order will still update automatically once payment is made so doesn’t require manual updates. 

When the order is placed, you and your customer will receive the standard order confirmation emails. We have included instructions to edit the customer’s email so for fena payments, the email copy reflects the fact the order will be processed only once payment is complete.

In the email you receive, if it’s a Fena payment the payment method will show as “Pay By Bank” (unless you update the name, in which case it will display with the name you’ve set). For these orders, as the order is confirmed prior to payment completing, you should double check the payment status in your admin panel before processing the order.

Send fena your store URL

To get started, you need to provide fena with your store URL. You can email this to support@fena.co. Once we have this, we will generate an installation link for you.

Install the payment app

Once you have the link from fena, you need to open it and login with the account you have affiliated with that store. It will open the below page for you. Hit install app

Once you have installed the app you will be asked for a terminal ID and secret. This is where you will configure your integration. Follow the steps below:

• Firstly visit your fena account (business.fena.co) and go to settings > integrations

• Create an integration with the desired name. As you go through the steps, you’ll be asked for a Webhook URI and Redirect URI

• You can find these on the shopify page that is requesting the terminal ID and terminal secret. So just copy the Webhook and Redirect links (see screenshot below) and paste it to the fena integration you just added.

• On the Fena side, select the bank account you want to receive funds into (or choose the sandbox account if you want to test first without transferring real money), and decide if you want to receive update emails for payments made via fena, and if you want to set-up a sandbox integration for testing (Please note, you will need to set-up a new, live integration when you are ready to go live. The process is the same, just make sure the sandbox payment options is unchecked)

• Save the fena integration, then click back into the one you just created

• You should now see the Terminal ID and Terminal secret - copy these and paste into the corresponding fields in Shopify

• Once it's done save the changes and you are ready to use fena payments method on shopify. 

Once this is complete, we need to set-up and configure the payment method.

Create Payment Method

So firstly in the shop admin page we need to go to Settings > Payments and then scroll down to “Add manual payment method” 

Now select “Create custom payment method”:

Set-up the payment method by adding the name, details and instructions. You can name it whatever you like, but we tend to suggest “Pay By Bank” (but you can also try “Bank”, “Bank Payment” or “Directly from Bank”). Whatever you choose, you need to copy this name and save it, as it will be required later as we edit the code to install fena payments. 

Please note: The name is case sensitive, so if you are not changing it it needs to be written as Pay By Bank with no spaces at the start or end, and capital for first letter of each word

Now save these settings and go to the Settings > Checkout and scroll down to Additional Script there.

Scroll down to an additional script. 

Here paste this script:

<script src="https://shopify-app.fena.co/public/js/jquery.min.js"></script> 

<script>

jQuery(document).ready(function() {

var orderIdNew = Shopify.checkout.order_id;

var shopName = window.location.hostname;

 jQuery('body').css('visibility', 'hidden');

  var payment = jQuery('.payment-method-list__item__info').text()

 //Here you can add the name of your choice for this payment method. Just make sure it matches that which you entered while creating the manual payment method on the payment page - by default it is “Pay By Bank”. 

 if(payment.trim()=='Pay By Bank'){

  var amount = jQuery('.payment-method-list__item__amount').text()

  var redirect = window.location.href.split('?')[0];

  redirect.replace(redirect.split('/')[6], 'ff');

  var urls = new URL(redirect);

  var host = urls.hostname;

  var postUrl = localStorage.getItem("method");  

  var url = localStorage.getItem("url"); 

  var urlggg = localStorage.getItem("url"); 

  var orderNo = localStorage.getItem("orderNo"); 

   if(urlggg != null){

     localStorage.setItem("url", redirect);

    url = localStorage.getItem("url"); 

   }

var visit = localStorage.getItem("view"); 

 if(url !== redirect && visit!='' && orderNo != orderIdNew){

   localStorage.setItem("method", "Post");  

   localStorage.setItem("url", redirect);    

   localStorage.setItem("orderNo", orderIdNew);     

   window.location.href = 'https://shopify-app.fena.co/public/fena-checkout?redirect=' + redirect + '&host=' + host + '&orederRef=' + orderIdNew;

 }else{

   jQuery('body').css('visibility', 'visible'); 

 }

 }else{

 jQuery('body').css('visibility', 'visible'); 

 }

});

</script>

Save the changes and leave this page.

Theme Configuration 

Once the checkout is configured we need to configure the theme file. So close the settings and go to Online Store > Themes, and then click on the three dots dropdown and press “Edit code” 

After pressing edit the code, we need to navigate to theme liquid as shown below

You need to Press ctrl+F and search for “window.shopurl” - in most cases it will be on line 264. Now you need to add the below two lines before it as shown in the screenshot above (or after <script> which is usually found on line 263)

Insert : 

localStorage.removeItem("url"); 

localStorage.setItem("view", 'visit');

Before 
window.shopurl={{request.origin}};

Email Code Customisation
As Fena is a custom App, an order confirmation will be sent before the order is paid, so we recommend updating the email settings and code so the email reflects this.

If you have never customised your emails before you can do it by copy and pasting the below codes accordingly, but if you have customised the emails then you need to edit the code line by line. In this case, skip Method 1 and Jump to the Method for Manual Code Customisation

Method 1: Copy And Paste the Entire Code

1. Goto store admin page > Settings > Notifications > Order confirmation.

2. Click on the Edit code button in the top right corner.

3. If the code is not editable on this page verify your email address. 

4. Verify the email from the link you will get via email. 

5. Now you have two choices 

     1. Display email without the View Order Button. 

     2. Display Email with the View Order Button (Clicking the button will take your

     customer to the Thank you page regardless of if the order is paid or not).

Below are the templates for both scenarios:

Without the View Order Button: 

If you want to use this template press ctrl+A and remove the previous code and paste the code from the gist URL below on the Edit code page 

//copy from below: 

https://gist.github.com/qasim0786/cc1eb2f2c2fc8793d549097a4ad7e4c2

With the View Order Button: 

For this template copy and paste the code in the code block on edit order confirmation notification page: 

//copy from below 

https://gist.github.com/qasim0786/d32573b41a3bc03c98aa530ddd6b1a4a

Method 2: Manually edit the email code

1. Goto store admin page > settings > Notifications > Order confirmation. 

2. Click on the Edit code button at the top right corner. 

3. If the code is not editable on this page verify your email address. 

4. Once you verify the email from the link you will get via email, then:

1.  Add this code at the top  
   {% assign _is_my_payment_method = false %}

{% for transaction in transactions %}

   {% if transaction.gateway == 'Pay By Bank' %}

      {% assign _is_my_payment_method = true%}

   {% endif%}

{% endfor %}

2. After line where it is capture email_title paste this code : 

{% if _is_my_payment_method == true %}

  Thank you for your order!

{% else %}

Now we need to close this if else condition:

Paste this after Thank You For your Purchase > and  add another endif condition. 

{% endif %}

Like this

Now we need to  Add a custom message so press ctrl+F and search for capture email_body and inside email body write this 

{% if _is_my_payment_method == true %}

  Once Payment has been completed, we will start processing your order. We will notify you when it has been sent.

{% else %}

As shown below

Now you need to ctrl+F and search for this line “You’ll receive separate emails for any gift cards”  and after there will be an endif closing you need to add another

Paste this there
  {% endif %}

Like this

Now we have two separations 

1. If you want the View your Order Button included in the email. (Clicking the button will take customers to the thank you page regardless of whether the order is paid or not). 

2. If you don't want the View your Order button in the email

If you want the View Order Button 

If you want the customer to receive the email with the “View Order Button" then you don't have to do anything - it’s present there by default.

Leave the code as it is. But there is a limitation that if the customer clicks on the button they will be shown the thank you page if the order is still not paid yet. To avoid this we can remove this button from the mail, as shown below.

If you don't want the View Order Button 

If you don't want the View Order Button you can follow these steps

1. Ctrl+f and search for “button main-action-cell”

2. Now above the line <table class="button main-action-cell"> add this code :
   {% if _is_my_payment_method != true %}

Shown below:

3. Now above this line {% if shop.url %} close the if statement as
    {% endif %}

4. Now just after some lines there will be the start of the other button (Visit our store)
   You can search for the visit our store line and after the td tag you have to add this
   
   

{% if _is_my_payment_method != true %} or {% endif %}

As

Make sure to save the changes and exit - you are all set to use fena.