Shopify Payment Plugin

Stage 1: Installing App on store

Installing the AtaraPay Shopify App on the Shopify store is very simple, 2-staged process. For the first stage, please follow the steps below:

  1. Register your seller account on the AtaraPay test environment at http://staging.atarapay.com/#/register/seller/. Make sure you are able to successfully login to access your account.
  2. Go to https://shopify.atarapay.com/
  3. Enter your shop name. For Example, if your shop name is abc.myshopify.com, you enter "abc" only
  4. Press "Submit" to start the Shopify installation Process.

Stage 2: Setting up the App

Step 1 : Retrieve API keys

  1. Log into your seller account at http://staging.atarapay.com/
  2. Copy API keys from "API Keys" tab Image of 1

Step 2 : Select Transaction Mode

Go to App page and paste the api keys copied and choose the transaction mode. Image of 2

Step 3 : Setup your store

Go to Store settings. Image of 3

Step 4 : Select Payment Provider

Click on the Payment Provider link. Image of 4

Step 5 : Setup Custom Payment

Go to Manual payment and select create custom payment. Image of 5

Step 6 : Add Payment Title and Description

  1. Add Title of the payment gateway as "AtaraPay".
  2. Add Additioanl description this would be displayed to the user. Image of 6

Step 7 : Checkout from the Store Settings

Go back to store settings and click checkout. Image of 7

Step 8 : Add Script

Scroll down to additional script block, add the script provided below and hit the Save button

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> var url = window.location.href; function getParameterByName(name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, " ")); } var payment_status = getParameterByName('payment_status', url); var payment_methode = '{{ order.gateway }}'; if(payment_methode.toLowerCase() =='atarapay' && payment_status==null){ jQuery(".os-header__heading").append("<p>Your order is pending till the payment is complete.</p>"); $(".main__content").append('<div class="loader" style="margin: 0 auto; width:100px;"><img style="width:100px; " src="https://shopify.atarapay.com/frontend/web/images/loader.gif"/></div>'); window.location ="https://shopify.atarapay.com/frontend/web/index.php/site/authpayment?order_id={{ order_id }}&shop={{ shop.permanent_domain }}&payment_status=pending&thankyou_url="+url; } </script>

Image of 8

Step 9 : Setup pages

Click on Online Store, navigate to Pages . Image of 9

Step 10 : Setup Success Page

Add page with title "Transaction Successful", assign "transaction_success" template to it and hit the Save button. Image of 10

Step 11 : Setup Failure Page

Add page with title "Transaction Failure", assign "transaction_failure" template to it and hit the Save button. Image of 11

Step 12 : Conduct Test on Page

Click Online Store, to carry out a test product purchase on your website. Image of 12

Step 13: Go Live!

Once product purchase test is successful, you can go live by login into your seller account on app.atarapay.com. Navigate to the API tab, click the "Generate Live API Keys" button to generate new keys, replace the ones submitted earlier in Step 1 and update the transaction mode to live

← Magento Payment ExtensionService Provider API →