Difference between revisions of "Barion for Shopify"

From Barion Documentation
Jump to navigation Jump to search
(8 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
=Barion for Shopify=
 
=Barion for Shopify=
  
===New to Shopify? Upgrade your business with a fully functional webshop in no time===
+
==New to Shopify? Upgrade your business with a fully functional webshop in no time==
  
  
Line 13: Line 13:
  
  
===Have a Shopify shop? Downgrade your payment costs with Barion===
+
==Have a Shopify shop? Downgrade your payment costs with Barion==
  
 
- Join Barion and integrate our safe, secure and cost-effective solution with your shop in a few steps and start paying less fees.
 
- Join Barion and integrate our safe, secure and cost-effective solution with your shop in a few steps and start paying less fees.
  
  
==Onboarding steps==
+
=Onboarding steps=
  
==== Register » Create a Shop » Get verified » Integrate Barion for Shopify ====
+
=== Register » Create a Shop ===
  
 
# [https://secure.barion.com/Registration/Organization?isEmailLocked=False Register a Barion account for your Business]
 
# [https://secure.barion.com/Registration/Organization?isEmailLocked=False Register a Barion account for your Business]
 
# [https://www.barion.com/en/support/how-can-i-create-a-barion-shop-does-this-require-an-approval/ Create a Shop]
 
# [https://www.barion.com/en/support/how-can-i-create-a-barion-shop-does-this-require-an-approval/ Create a Shop]
# [https://www.barion.com/en/support/what-is-the-process-of-video-identification/ Get verified], [https://www.barion.com/en/support/documents-required-for-video-identification/ The documents you need] 
 
  
=== Connect your Shopify shop with Barion ===
 
  
==== How to create Shopify keys ====
+
==== Add Barion logo to your Shop's footer ====
 +
 
 +
# [https://download.barion.com/barion/barion-smart-payment-banners.zip Get the Barion logo in multiple formats]
 +
# [https://community.shopify.com/c/Shopify-Design/Adding-image-in-Supply-theme-Footer/td-p/352036 Insert them as image into your Shopify footer]
 +
 
 +
==== Add Barion Pixel to your Shop's header ====
 +
 
 +
# [https://docs.barion.com/Getting_started_with_the_Barion_Pixel Getting started with the Pixel]
 +
# [https://support.pixelunion.net/hc/en-us/articles/360047807193-Adding-app-code-to-the-head-tag-in-your-theme-liquid Adding code into your Shopify shop's theme]
 +
 
 +
 
 +
 
 +
=== Get verified » Integrate Barion for Shopify ===
 +
 
 +
# [https://www.barion.com/en/support/what-is-the-process-of-video-identification/ Get verified],
 +
# [https://www.barion.com/en/support/documents-required-for-video-identification/ The documents you need] 
 +
 
 +
 
 +
== Connect your Shopify shop with Barion ==
 +
 
 +
=== How to create Shopify keys ===
 +
[[File:Create_private_app_001.png|1000px]]
 +
 
 
In the Shopify admin interface please go to "Apps" and click to "Manage private apps" option: (https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/apps/private)
 
In the Shopify admin interface please go to "Apps" and click to "Manage private apps" option: (https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/apps/private)
 +
 +
[[File:Create_private_app_002.png|1000px]]
  
 
Click to "Create a new private app" button and give a name and an e-mail address you wish to use. Choose "Show inactive Admin Api permission" and set the option "Read and write", then click to "Save" button.
 
Click to "Create a new private app" button and give a name and an e-mail address you wish to use. Choose "Show inactive Admin Api permission" and set the option "Read and write", then click to "Save" button.
 +
 +
[[File:Create_private_app_003.png|1000px]]
  
 
When the private app has been created successfully, API key and Password (from Admin API) have to be provided on the interface of Barion. To have the password presented, please click to "Show".
 
When the private app has been created successfully, API key and Password (from Admin API) have to be provided on the interface of Barion. To have the password presented, please click to "Show".
  
==== Filling Barion details out ====
+
[[File:Create_private_app_004.png|1000px]]
 +
 
 +
=== Filling Barion details out ===
 +
[[File:Barion_shop_poskey.png]]
  
 
To get your Barion Shop's Secret key (POSKey), go to [https://secure.barion.com/Shop your Barion shops] click on the "Actions" and Details to find your key. Copy it to the Shopify plugins Settings page, set there the primary currency and the shops language and hit '''Save'''
 
To get your Barion Shop's Secret key (POSKey), go to [https://secure.barion.com/Shop your Barion shops] click on the "Actions" and Details to find your key. Copy it to the Shopify plugins Settings page, set there the primary currency and the shops language and hit '''Save'''
  
==== Adding the integration code to Shopify Admin interface ====
+
=== Adding the integration code to Shopify Admin interface ===
 +
 
 +
[[File:Add_js_code_001.png|1000px]]
  
On the Shopify Admin interface please go to "Settings" --> "Checkout" menu and add the followingcode to the section "Additional scripts":
+
On the Shopify Admin interface please go to "Settings" --> "Checkout" menu and add the following code to the section "Additional scripts":
  
 
'''IMPORTANT''': The steps until now is the same for test shops, and for production shops, but this code snippet is different.
 
'''IMPORTANT''': The steps until now is the same for test shops, and for production shops, but this code snippet is different.
  
 
'''TEST''' script:
 
'''TEST''' script:
<code><script src="https://shopify.test.barion.com/js/barion/barion.js"></script>
+
<pre><script src="https://shopify.test.barion.com/js/barion/barion.js"></script>
 
<script>Barion.init({
 
<script>Barion.init({
 
orderId: {{ order.id }},
 
orderId: {{ order.id }},
Line 53: Line 82:
 
orderStatus: '{{order.financial_status}}',
 
orderStatus: '{{order.financial_status}}',
 
sandboxMode: true
 
sandboxMode: true
})</script></code>
+
})</script></pre>
  
  
 
'''PRODUCTION''' script:
 
'''PRODUCTION''' script:
<code><script src="https://shopify.barion.com/js/barion/barion.js"></script>
+
<pre><script src="https://shopify.barion.com/js/barion/barion.js"></script>
 
<script>Barion.init({
 
<script>Barion.init({
 
orderId: {{ order.id }},
 
orderId: {{ order.id }},
Line 63: Line 92:
 
gateway: '{{order.gateway}}',
 
gateway: '{{order.gateway}}',
 
orderStatus: '{{order.financial_status}}'
 
orderStatus: '{{order.financial_status}}'
})</script></code>
+
})</script></pre>
 +
 
 +
=== Adding a payment method on Shopify Admin interface ===
 +
 
 +
[[File:Create_manual_payment_001.png|1000px]]
 +
 
 +
On Shopify Admin interface go to "Settings" -> "Payments" and "Manual payment methods". Click to "Manual payment methods" then choose "Create custom payment methods".
 +
 
 +
Provide the following details:
 +
 
 +
- Custom payment method name: '''Barion Payments'''
 +
 
 +
- Additional details: after making an order you will be directed to the billing interface of Barion.
 +
 
 +
After you have provided everything, click to "Active" button.
 +
 
 +
[[File:Create_manual_payment_002.png|1000px]]
 +
 
 +
= TROUBLESHOOTING =
 +
 
 +
== Error messages and actions ==
 +
 
 +
'''The store is closed in the Barion system, payment is not allowed.'''
 +
In this case your Barion Shop is not '''approved''' yet. If the POSKey you used is for the right shop, you have to wait until it is approved.
  
==== Adding a payment method on Shopify Admin interface ====
+
'''Application not installed'''
 +
The javascript code you pasted from here to the Shopify Checkout settings / Additional scripts field is most likely wrong. Keep in mind that the script is a bit different for the test/sandbox and for production.

Revision as of 14:24, 20 January 2021

Barion for Shopify

New to Shopify? Upgrade your business with a fully functional webshop in no time

- Bring your business online: Create an e-commerce website backed by powerful tools that help you find customers, drive sales, and manage your day-to-day

- Make the most out of your online business: Powerful tools already integrated into Shopify shops like insights, order management, and many integrated payment solutions

- Online payment with Barion: Make the most out of your online business by providing online payment for customers. Barion Smart Gateway has you covered

- Payments made international: Enjoy the benefits of Barion's many features. For example multiple languages and currencies, card payments, wire transfer payment, and mobile payments


Have a Shopify shop? Downgrade your payment costs with Barion

- Join Barion and integrate our safe, secure and cost-effective solution with your shop in a few steps and start paying less fees.


Onboarding steps

Register » Create a Shop

  1. Register a Barion account for your Business
  2. Create a Shop


Add Barion logo to your Shop's footer

  1. Get the Barion logo in multiple formats
  2. Insert them as image into your Shopify footer

Add Barion Pixel to your Shop's header

  1. Getting started with the Pixel
  2. Adding code into your Shopify shop's theme


Get verified » Integrate Barion for Shopify

  1. Get verified,
  2. The documents you need 


Connect your Shopify shop with Barion

How to create Shopify keys

Create private app 001.png

In the Shopify admin interface please go to "Apps" and click to "Manage private apps" option: (https://YOUR_SHOPIFY_SUBDOMAIN.myshopify.com/admin/apps/private)

Create private app 002.png

Click to "Create a new private app" button and give a name and an e-mail address you wish to use. Choose "Show inactive Admin Api permission" and set the option "Read and write", then click to "Save" button.

Create private app 003.png

When the private app has been created successfully, API key and Password (from Admin API) have to be provided on the interface of Barion. To have the password presented, please click to "Show".

Create private app 004.png

Filling Barion details out

Barion shop poskey.png

To get your Barion Shop's Secret key (POSKey), go to your Barion shops click on the "Actions" and Details to find your key. Copy it to the Shopify plugins Settings page, set there the primary currency and the shops language and hit Save

Adding the integration code to Shopify Admin interface

Add js code 001.png

On the Shopify Admin interface please go to "Settings" --> "Checkout" menu and add the following code to the section "Additional scripts":

IMPORTANT: The steps until now is the same for test shops, and for production shops, but this code snippet is different.

TEST script:

<script src="https://shopify.test.barion.com/js/barion/barion.js"></script>
<script>Barion.init({
orderId: {{ order.id }},
domain: '{{shop.permanent_domain}}',
gateway: '{{order.gateway}}',
orderStatus: '{{order.financial_status}}',
sandboxMode: true
})</script>


PRODUCTION script:

<script src="https://shopify.barion.com/js/barion/barion.js"></script>
<script>Barion.init({
orderId: {{ order.id }},
domain: '{{shop.permanent_domain}}',
gateway: '{{order.gateway}}',
orderStatus: '{{order.financial_status}}'
})</script>

Adding a payment method on Shopify Admin interface

Create manual payment 001.png

On Shopify Admin interface go to "Settings" -> "Payments" and "Manual payment methods". Click to "Manual payment methods" then choose "Create custom payment methods".

Provide the following details:

- Custom payment method name: Barion Payments

- Additional details: after making an order you will be directed to the billing interface of Barion.

After you have provided everything, click to "Active" button.

Create manual payment 002.png

TROUBLESHOOTING

Error messages and actions

The store is closed in the Barion system, payment is not allowed. In this case your Barion Shop is not approved yet. If the POSKey you used is for the right shop, you have to wait until it is approved.

Application not installed The javascript code you pasted from here to the Shopify Checkout settings / Additional scripts field is most likely wrong. Keep in mind that the script is a bit different for the test/sandbox and for production.