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

Table of Contents

• Before you get started
• Send fena your store URL
• Install the payment app
• Create Payment Method
• Email Code Customisation
  • Method 1: Copy And Paste the Entire Code
  • Method 2: Manually edit the email code

Before you get started

Please note: This app requires some technical knowledge to install as there are some code changes required. Please also ensure to test end-to-end after installation.

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 - this should be in the myshopify.com format. 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 login to (or register for) your Fena Toolkit account (https://toolkit.fena.co/sign-in) and go to Settings > APIs

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

• Please set a role as 'Payment integration' 

• 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

• Also, decide 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 (However, on Shopify you should always leave Sandbox Mode as "No")

• 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

Th additional details, will show at checkout next to the payment method. Again, you can set this to whatever you like, but our suggestion is "Pay instantly via online bank transfer - Supports most UK banks" e.g.

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; // Get order Id by shopify cart

 // Get shop domain

var host = Shopify.shop;

 jQuery('body').css('visibility', 'hidden'); // Hide the thank you page for redirecting to fena portal

var payment = jQuery('.payment-method-list__item__info').text(); // Get payment method (Pay By Bank)

// Check the payment method
//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') {

      // ajax for check the status of order

      $.ajax({

        url:

          'https://shopify-app.fena.co/public/getStatus?orderId=' +

          orderIdNew +

          '&host=' +

          host,

        success: function (orderStatus) {

          if (orderStatus == 'paid') {

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

          } else {

            var redirect = window.location.href.split('?')[0]; // Get thank you url for redirecting it after the payment

            window.location.href =

              'https://shopify-app.fena.co/public/fena-checkout?redirect=' +

              redirect +

              '&host=' +

              host +

              '&orederRef=' +

              orderIdNew;

          }

        },

      });

    } else {

      // Show the thank you page if payment success

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

    }

  });

</script>

Save the changes and leave this page.

Email Code Customisation

Please note: If you have previously made edits to your emails, then this step requires some technical knowledge to make the changes

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 code accordingly, with one potential minor change if you chose a different app name than "Pay By Bank", but if you have customised the emails in the past 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

Top tip: We recommend creating a copy of the email code before you make any edits, so you can easily revert the changes should you wish to.

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

After pasting the code, there is one line which might require a change if you have named the bank payment anything other than Pay By Bank. If you chose a different name, then on line 4 you should replace Pay By Bank with your chosen name. Please remember this is case sensitive, so make sure it is copied over exactly.

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

After pasting the code, there is one line which might require a change if you have named the bank payment anything other than Pay By Bank. If you chose a different name, then on line 4 you should replace Pay By Bank with your chosen name. Please remember this is case sensitive, so make sure it is copied over exactly.

Method 2: Manually edit the email code

1. Go to 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) Define the Variables: 

 We need to define a variable which will be false - it will be a Boolean value 

{% assign _is_my_payment_method = false %}

This needs to be defined at the beginning of the code.

2) Then we will check if the payment method is Pay By Bank in the transactions (or the name you assigned to the payment method on the checkout page). By Default it is Pay By Bank. If you replaced it, please note it's case sensitive code so needs to be the exact same name otherwise it won't work. 

The Name mentioned in black below needs to be replaced in case of custom name assigned.

{% for transaction in transactions %}

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

{% assign _is_my_payment_method = true%}

{% endif%}

{% endfor %}

3) Now we need to implement some checks inside the body of the email. Implement the check inside the capture email title as:

{% if _is_my_payment_method == true %}

Thank you for your order!

{% else %}

4) Don't forget to close the if statement tag before this email title body with the closing if statement. It can vary from code to code and needs to be placed and tested before finalization. 

    {% endif %}

5) After this we need to edit the email body and include a custom message there as well. For that we need to again add a conditional statement which will be inside the email body. You can search for it inside the code by ctrl+F  and search for email_body.
And inside the email body write a conditional statement as: 
{% 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 %}

This means if the payment method = fena then display this message instead of any other custom text present there. This will happen only if the payment method is Pay By Bank (or the name you assigned).  

Now closing this if statement depends on the number of conditions implemented and that depends on the structure of the theme code and the extent of customization in the email body. 

Close the conditional statement accordingly with this endif as: 

    {% endif %}

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 we need to implement a conditional statement there and you can follow these steps

1. Ctrl+f and search for “button main-action-cell”. In this main action cell where this view order button lies implement the if case that if the payment method is Pay By Bank (or the name you assigned to it) 

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

3. Shown below:

4. Now above this line {% if shop.url %} close the if statement as {% endif %}
This close tag can be at different lines and places - you need to figure out where to add it depending on your theme. 

5. Now further down, 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 the payment method is Pay By Bank (or the name you assigned) then hide the “or”  and also close the if after it. 

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

As

Save your changes and your done! 

Please note: We always recommend you run an end-to-end test after installation to check everything is working as expected.