How to install a Fena payment app for Shopify Plus

Created by Gosia Furmanik, Modified on Wed, 17 Apr 2024 at 10:36 AM by Fena Support


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


Table of Contents

  • Before you get started
  • Send fena your store URL
  • Install the payment app


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



Step 1:
Provide the myshopify.com shop url to fena you can send the mail to support@fena.co we will create a custom installation link for your shop.


 

Step 2:
Then copy the link sent to you by fena to install the app in store. firstly login to the admin of the shop.

 

 

Then hit the copied link and you can install the app. Please check screenshot.

 

 

 

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 account (https://business.fena.co/login/) 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


 

 

After the installation we need to add the Fena payment details here.

 

 


Then we need to create a custom payment method for fena. Follow the below steps.


Click on 'Settings'

 

 

 

 Choose 'Payments' in the navigation bar on the left hand side

 

 

 

 Then, scroll down to 'Manual payment methods' and click on 'Add manual payment method'

 

 


 

 

Step 3. Steps to setup the Checkout UI Extension
this requires a technical knowldge if you can easily go through the steps its ok otherwise you can provide the colaborator access to us and we will do these steps for you.


Note: these steps are required by stores whose checkout Additional Scripts are disabled and they have Shopify Plus  and also Checkout Extensibility is enabled. 

 

Open the terminal in which folder you want to setup the code and run the below command

npm init @shopify/app@latest

 

 

 

 



Add your project name and run the below commands:

 

For example:- Fena-test

 

 

 

 

 



It will install dependencies required to set up the extension


 

 



After that run the below commands:


cd {fena-test}

{fena-test} is folder that we created above.

 


 

 



 

 

Then, run the below command

npm run shopify app generate extension



 


Select your Plus Store

For example: you have selected the {fena} store form the list.

Note: if you are doing it for the first time, you will have to connect the shopify partner account on which the store is present so when you will run 

npm run shopify app generate extension


it will ask you to login to partners account, just press any key it will redirect you to browser login to partner account and provide access to Shopify CLI. it will automatically be done once you login on browser you can close the tab and then re run

 

npm run shopify app generate extension


now your stores will start appearing in the list select the one you want to install the app.

 

 


 

 


Select the option either or will want to install extension on existing app or want to create new extension.


Note: You should select the “existing app” option as it is better to create app manually in Shopify and then select that app here.


 

 

 

 

 

Select the type of extension you want to install on it


For instance: You could select the checkout UI as per the requirement.



 

Add the name of your extension like: checkout-ui



 

 

Select the technology on which you want to make the extension
For instance: Javascript React or similar





 

Then you need to visit this repo
https://github.com/fena-co/checkout-ui-Shopify-code
and copy the codes from checout.jsx and Shopify toml
to your app the checkout.jsx and Shopify.toml file just copy and paste these codes save it.

After selected the above options run the below command to install the extension on your app.

 Npm run deploy

 

 

 


Note: This extension will run for the single app. You need to create a separate extension for a separate app.You need to follow the above steps again for each app.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article