Contributors: Mobipaid Tags: credit card, Mobipaid, google pay, apple pay, payment method, payment gateway Requires at least: 1.7 Stable tag: 1.0.0 License: GPLv3 License URI: https://www.gnu.org/licenses/gpl-3.0.html
Mobipaid Custom Payment App for Shopify allows payment through SEPA, Paypal, Credit/Debit Card, google pay, apple pay, and more using Mobipaid payment gateway. You can use the Mobipaid Custom Payment App as a payment method for customer checkout and processing for your Shopify store. Depending on your store's location. The Mobipaid Custom Payment App is a custom application for Shopify, and it will not publish on the Shopify app store
- Accept payments via Mobipaid.
- Full refund.
- English (default) - always included.
- Arabic (ar)
- Danish (da_DK)
- German (de_DE)
- English(US) (en_US)
- Spanish(Spain) (es_ES)
- Finnish (fi)
- French (fr_FR)
- Indonesian (id_ID)
- Italian (it_IT)
- Japanese (ja)
- Korean (ko_KR)
- Dutch (nl_NL)
- Polish (pl_PL)
- Portuguese(Portugal) (pt_PT)
- Russian (ru_RU)
- Swedish (sv_SE)
- Turkish (tr_TR)
- Chinese(China) (zh_CN)
Before you can use the Mobipaid custom app the first thing you need to do is register on https://developers.shopify.com/ , after that login to Your account. You need to do several steps to install Mobipaid Custom App. Bellow are the steps to install Mobipaid Custom Payment Apps:
- After login click "Apps" menu in the sidebar then click button "Create App".
- Choose Custom App when the option App type is displayed.
- In General settings section fill "App name" with Mobipaid and "App URL" with https://shop-plugin.mobipaid.com/
- in Redirection URLs section fill "Allowed redirection URL(s)" with :
- https://shop-plugin.mobipaid.com/generateToken
- https://shop-plugin.mobipaid.com/saveMobipaidConfigs
- https://shop-plugin.mobipaid.com/paymentOverview
- https://shop-plugin.mobipaid.com/checkout
- Click button Create app at the top of page.
After you have successfully created the custom app, you will need redirect to Shopify custom app configuration. On this page you need to request access to read in order, by following these steps :
- Click app setup menu that is placed at the top.
- In the orders section click Request access.
- In pop up menu just fill "Describe your app and how it helps merchants." with "Enable Mobipaid as a payment method"
- Fill "Why does your app need access to orders older than 60 days?" with "Allow Mobipaid to refund transactions that is already older than 60 days"
After this step, you will receive an email from Shopify partners and notify you that your request to read all orders has been approved. In this step, all that is required from Mobipaid custom application is already done.
Bellow are the installation steps for the Mobipaid custom app :
- Login to https://developers.shopify.com/.
- After login click "Apps" menu in sidebar then click Mobipaid in the App listing.
- In "Get ready for production" section click generate link and enter Your Shopify store domain.
- Click Generate link button.
- After this step you will see "Merchant install link", just Copy the link to your browser and the installation process will start.
- In first page You will need to enter Your Shopify API key and API secret key (just following step 1-2 you will see Your API Key )
- Afte saving your API key You will redirect back to Shopify to authorize the installation by clicking the install button.
After successfull installation of the Mobipaid custom app, you need to enter Your Mobipaid access key before you can use Mobipaid payment gateway. To configure it just login to Your Shopify store admin then click Apps in the sidebar and Chose Mobipaid. Just enter Your Mobipaid access key on the Access Key field and set Active to yes then Click Save Changes.
Allow the customer to redirect to the Mobipaid checkout page follow the following steps :
- In Admin page of your Shopify store click Online Store.
- In "Current theme" section change action to "Edit Code".
- find cart-template.liquid in "Sections" then add bellow script in line 279
<input id="checkoutgen" type="button" name="checkout"class="btn btn--small-wide cart__submit cart__submit-control" value="Pay Now">
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
<script type="text/javascript">
{% for locale in shop.published_locales %}
var locale = "{{locale.iso_code}}";
{% endfor %}
$("#checkoutgen").click(function(){
$.ajax({
type: 'GET',
url: 'https://{{shop.domain}}/cart.js',
dataType: 'json',
success: function(data) {
window.location.href = "https://shop-plugin.mobipaid.com/checkout/?locale="+locale.substring(0, 2)+"&shop={{shop.domain}}&cart="+JSON.stringify(data);
}
});
});
</script>bellow this script
<input type="submit" name="checkout"class="cart__submit btn btn--small-wide" value="{{ 'cart.general.checkout' | t }}">or if you want to use Mobipaid only as a Payment method just replace the script.
By default after the customer redirects back to the Shopify store, the previous cart form order still exists in the shop, because of that we need to create a custom page by following these steps :
- In Shopify admin, click on Online Store in the left bar
- Click pages then, click the button "Add Page"
- In the Title section fill it with "clear Shopify cart
- Set visibility as visible
- Set template suffix as page
- Click button save
After that edit the page code by following these steps :
- In Admin page of your Shopify store click Online Store.
- In "Current theme" section change action to "Edit Code".
- Find page.liquid in "Templates" then add bellow script the top of the code
{% if page.title == "clear Shopify cart" %}
<style>
body {
display:none;
background: white !important;
}
</style>
{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: 'POST',
url: 'https://{{shop.domain}}/cart/clear.js',
dataType: 'json',
success: function(data) {
console.log(JSON.stringify(data));
window.location.href = "https://{{shop.domain}}";
}
});
});
</script>
{% endif %}