diff --git a/docs/1-payment/6-ecomm/3-shopify.md b/docs/1-payment/6-ecomm/3-shopify.md index ad85768..25e1b6f 100644 --- a/docs/1-payment/6-ecomm/3-shopify.md +++ b/docs/1-payment/6-ecomm/3-shopify.md @@ -2,83 +2,39 @@ title: shopify --- -The following document guides you through accepting **paymennt** payments through [Shopify](https://www.shopify.com). +This page will guides you through the process to start accepting payments on your Shopify website with Paymennt.com. -:::info -This guide assumes that you already have a paid [Shopify account](https://www.shopify.com). +:::info BEFORE YOU START +Before setting up the Paymennt.com Shopify App on your store, please make sure that your website complies with the our website **[go-live checklist](/docs/golive/checklist)** ::: -## Create a custom app +## Accpeting payments with Paymennt.com on your Shopify website -1. In your Shopify, go to `Apps` > `Develop apps for your store` (at the bottom of the page) and click `Create an app`. If custom apps are disabled, enable custom apps development. - ![](/img/docs/integrate/ecomm/shopify/shopify-1.png) +1. Click on this **[link](https://apps.shopify.com/paymennt-com)** to access our Paymennt.com page on the Shopify App Store. -2. Fill in the app name and and press on `Create app`. - ![](/img/docs/integrate/ecomm/shopify/shopify-2.png) +2. Click on **Install** to begin the process of adding the Paymennt.com payment App to your Shopify store. -3. From `Configuration` tab, grant `Read and write` permission for `Orders` and click on `Save` at the top right corner then click `Create app` in the confirmation prompt. - ![](/img/docs/integrate/ecomm/shopify/shopify-3.png) + ![](/img/docs/integrate/ecomm/shopify/shopify-setup-1.png) -4. Navigate to `API credentials` tab and press on `Install app`. - ![](/img/docs/integrate/ecomm/shopify/shopify-4.png) +3. Login to your Shopify Account. -5. Copy the `Admin API access token` from the **paymennt** application as shown below. We will use this in the next section. - ![](/img/docs/integrate/ecomm/shopify/shopify-5.png) + ![](/img/docs/integrate/ecomm/shopify/shopify-setup-2.png) -## Configure paymennt +4. Click **Install** once prompted to confirm the installation of the Paymennt.com application and approve necessary permissions. -### paymennt web console + ![](/img/docs/integrate/ecomm/shopify/shopify-setup-3.png) -To complete this integration, you must first login to the [**paymennt** web console](/guides/your-account/desktop-login) +5. Next, authenticate to your Paymennt.com account using the Paymennt Mobile App. Click [here](/guides/your-account/desktop-login) for instructions. -### Shopify Configuration +6. Select **Connect** to link your Shopify store with your Paymennt.com account. -From the side menu, Select **"Integrations"** -> **"Shopify Integration"** as shown in the image below + ![](/img/docs/integrate/ecomm/shopify/shopify-setup-4.png) -![](/img/docs/integrate/ecomm/shopify/shopify-connect-1.png) -### Connecting your Shopify account +7. Click **Activate** to complete setup. -1. Click on **"connect to Shopify"** - -![](/img/docs/integrate/ecomm/shopify/shopify-connect-2.png) - -2. Fill the form with then click on **"Connect"**: - -- **endpoint**: your shop's domain -- **token**: the `Admin API access token` copied from **Step 5** in creating the custom app - -![](/img/docs/integrate/ecomm/shopify/shopify-connect-3.png) - -3. Copy the HTML code shown on the confirmation page. We will use this in the next steps. - -![](/img/docs/integrate/ecomm/shopify/shopify-connect-4.png) - -## Shopify Additional Scripts - -1. Go back to Shopify. Select `Settings` then click on `Checkout` - -![](/img/docs/integrate/ecomm/shopify/shopify-setup-1.png) - -![](/img/docs/integrate/ecomm/shopify/shopify-setup-2.png) - -2. Scroll down to the `Additional Scripts` section and paste the code from **Step 3** above into the `Order status page` text box. Click **Save** when done. - -![](/img/docs/integrate/ecomm/shopify/shopify-setup-3.png) - -## Manual Payment method - -1. Go back to Shopify. Select `Settings` then click on `Payments` - -![](/img/docs/integrate/ecomm/shopify/shopify-setup-4.png) - -2. Scroll down to the `Manual payment methods`. Click on `Add manual payment method` and then select `Create custom payment method`. - -![](/img/docs/integrate/ecomm/shopify/shopify-setup-5.png) - -3. Fill in the required details to setup the manual payment method: - - Custom payment method name: `Card payment (via paymennt.com)` - - Additional details: `Complete your purchase using a credit or debit card` -4. Click `Activate` when done - -![](/img/docs/integrate/ecomm/shopify/shopify-setup-6.png) + ![](/img/docs/integrate/ecomm/shopify/shopify-setup-5.png) + + :::danger Live Transaction Mode + Make sure to set TEST mode to OFF once you are ready to start processing live transactions. + ::: diff --git a/guides/11-api-and-plugins/1-woocommerce.md b/guides/11-api-and-plugins/1-woocommerce.md deleted file mode 100644 index 17762ae..0000000 --- a/guides/11-api-and-plugins/1-woocommerce.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: Woocommerce Integration -sidebar_label: Woocommerce ---- - -View on [GitHub](http://www.github.com/pointcheckout/woocommerce) - -From installing the plugin to requesting your first test payment, learn how to get started with the paymennt for the WooCommerce plugin. - -:::note - -This guide assumes that you have already [set up WooCommerce on your WordPress instance](https://woocommerce.com/document/installing-uninstalling-woocommerce/). - -::: - -:::note - -To learn about the Wocommerce Plugin integration process in detail, see [GitHub](https://github.com/pointcheckout/woocommerce). - -::: - -## Before you start​ - -If you are using the Pointcheckout plugin/Paymennt.com plugin older than version 2.1.0, remove the plugin by following steps: - -1. Log in to **WordPress** as an administrator. -2. In the left menu, click **Plugins > Installed Plugins**. -3. Search for **PointCheckout** using the search box at the top. If you find one, click **Delete**, or click **Deactivate** and then **Delete**. - -## Install the plugin​ from the WordPress marketplace - -**Paymennt** plugin is an approved WordPress plugin, available in the WordPress marketplace for easy installation. - -1. Log in to **WordPress** as an administrator. -2. In the left menu, click **Plugins > Add New**. -3. On the **Add Plugins** page, search for **Paymennt** in the right search bar and the Paymennt plugin will appear. - - -4. Click **Install Now**. -5. Once the plugin installation is complete, click **Activate**. -6. On activation, the plugin will be ready to be configured. - -## Configure the plugin​ - -1. Log in to **WordPress** as an administrator. -2. In the left menu, click **WooCommerce > Settings > Payments**. -3. Find the Paymennt method and click on **Manage**. -4. Tick **Enable card payments via Paymennt**. -5. Choose the payment **Title** and **Description**. This will be displayed to customers on your checkout page. -6. Set the **Mode** to **Testing**. -7. Enter your **API Key**, **API Secret**, and **Public Key** as provided by your account manager. -8. Select the type of payment you need: - * Select **Drop-In Frames** if you want an embedded payment frame on the checkout page itself. - * Select **Hosted Checkout** if you want the user to enter payment details on a separate page. -9. Click **Save Changes**. - -That's it! You're ready to start testing. - -## Test the plugin​ - -1. Go to your shop's public URL and add a product to your cart. -2. Go to your cart then proceed to the checkout. -3. Enter the required customer and billing details. -4. Select the **Credit Card (via Paymennt)** method. -5. For embedded **Drop-In Frames** payment, enter the card details first and then click **Place Order**, the payment will get processed (with or without 3D-secure redirect depending on the transaction). For **Hosted Checkout** payment, click **Place Order** and you will now be redirected to **paymennt.com** payment page, enter the details and click **Pay**. -6. In case of successful payment, the order confirmation page shows up, else you will be asked to check out again. If you entered a real email address in the billing details, you'll also receive an order confirmation email. -7. Log in to your **WordPress** account as an administrator. -8. Click **WooCommerce** in the left menu. Your test order is displayed and has a status of **Processing**. This indicates that the payment has been successfully processed. - -:::note - -Use the following card details for the test: - -* Number: 4242 4242 4242 4242 -* Expiry date: 12/25 -* CVV: 100 -* Name: TEST USER - -::: diff --git a/guides/11-api-and-plugins/2-opencart.md b/guides/11-api-and-plugins/2-opencart.md deleted file mode 100644 index 904cac6..0000000 --- a/guides/11-api-and-plugins/2-opencart.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: OpenCart Integration -sidebar_label: OpenCart ---- - -View on [GitHub](https://github.com/paymennt/opencart) - -From downloading the plugin to requesting your first test payment, learn how to get started with the paymennt for OpenCart plugin. - -:::note - -This guide assumes that you have already [set up OpenCart](https://docs.opencart.com/en-gb/installation/). - -::: - -:::note - -To learn about the OpenCart Plugin integration process in detail, see [GitHub](https://github.com/paymennt/opencart). - -::: - -## Install/Update the plugin​ using plugin .zip file - -1. Log in to your **OpenCart** administrator panel. -2. Download the latest release **paymennt.ocmod.zip** file from the [releases section](https://github.com/paymennt/opencart/releases/tag/v1.0.1). -3. On the admin page of your store, go to **extensions->installer->upload**. -4. Choose the downloaded **paymennt.ocmod.zip** file. - -## Configure the plugin​ - -1. Log in to **OpenCart** administrator panel. -2. From the side menu, choose **Extensions** and from the Extension type select, **choose Payments**. -3. From the extension list, install the extension named **Paymennt.com**. After installation, press **edit** to configure the payment extension. -4. Toggle the **Status** to **enabled**. -5. Set the **Mode** to **Testing**. -6. Enter your **API Key** and **API Secret** as provided by your account manager. -7. Enter the **Public key** as provided. -8. Select your **Payment type**. -9. Review and update the remaining configuration required. -10. Click on the **Save** icon on the top of the settings edit page. - -That's it! You're ready to start testing. - -## Test the plugin​ - -1. Go to your shop's public URL and add a product to your cart. -2. Go to your cart then proceed to the checkout. -3. Enter the required customer and billing details. -4. Select **Paymennt** as payment method. -5. Click **Confirm Order**. You will now be redirected to the paymennt.com payment page. -6. Enter the following card details: - * Number: 4242 4242 4242 4242 - * Expiry date: 12/25 - * CVV: 100 - * Name: TEST USER -7. Accept the **Terms & Conditions** and click **Pay**. You will be redirected to the order confirmation page. If you entered a valid email address in the billing details, you'll also receive an order confirmation email. -8. Log in to your **OpenCart** administrator panel. -9. Click **Sales > Orders** in the left menu. Your test order is displayed and has configured Payment Success Status status. This indicates that the payment has been successfully processed. diff --git a/guides/11-api-and-plugins/3-shopify.md b/guides/11-api-and-plugins/3-shopify.md deleted file mode 100644 index b253675..0000000 --- a/guides/11-api-and-plugins/3-shopify.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Shopify Integration -sidebar_label: Shopify ---- - -## Create a custom app in Shopify - -1. In your Shopify Settings page, go to “Apps and sales channels” setting, click “Develop App” on the top right corner, and then click “Create App”. -2. Fill in the app name and press on Create app. -3. From the Configuration tab, grant Read and Write permission for Orders and click on Save at the top right corner then click Create app in the confirmation prompt. -4. Navigate to API credentials tab and press on the Install app. -5. Copy the Admin API access token from the paymennt application as shown below. We will use this in the next section. - -## Configure paymennt - -### Paymennt web console - -To complete this integration, you must first log in to the paymennt web console. - -### Shopify configuration - -From the side menu, Select "Integrations" -> "Shopify Integration". - -## Connecting your Shopify account - -1. Click on "Connect to Shopify". -2. Fill out the form then click on "Connect". - * Endpoint: your shop's domain. - * Token: The Admin API access token copied from Step 5 in creating the custom app. -3. Copy the HTML code shown on the confirmation page. We will use this in the next steps. - -## Shopify additional scripts - -1. Go back to Shopify. -2. Select Settings then click on Checkout. -3. Scroll down to the Additional Scripts section and paste the code from Step 3 above into the Order status page text box. -4. Click Save when done. - -## Manual payment method - -1. Go back to Shopify. Select Settings then click on Payments. -2. Scroll down to the Manual payment methods. Click on Add manual payment method and then select Create custom payment method. -3. Fill in the required details to set up the manual payment method: - * Custom payment method name: Card payment (via paymennt.com) - * Additional details: Complete your purchase using a credit or debit card -4. Click Activate when done diff --git a/guides/11-api-and-plugins/index.md b/guides/11-api-and-plugins/index.md deleted file mode 100644 index ac9c797..0000000 --- a/guides/11-api-and-plugins/index.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: API and Plugins -sidebar_label: API and Plugins ---- - -**Paymennt** offers a range of plugins for leading technology solutions to give your shoppers the best checkout experience. Our plugins are easy to integrate and come with [Paymennt.com](https://www.paymennt.com/) payment platform functionality delivered out of the box. - -In this section: - -1. [Woocommerce Integration](./api-and-plugins/woocommerce) -2. [OpenCart Integration](./api-and-plugins/opencart) -3. [Shopify Integration](./api-and-plugins/shopify) diff --git a/guides/6-online-payment/5-online-shop-and-API-integration.md b/guides/6-online-payment/5-online-shop-and-API-integration.md index b9ba955..3c34671 100644 --- a/guides/6-online-payment/5-online-shop-and-API-integration.md +++ b/guides/6-online-payment/5-online-shop-and-API-integration.md @@ -101,4 +101,4 @@ For detailed information on our API specifications, you can refer to our API spe #### Related Articles -* [eCommerce](../api-and-plugins) +* [eCommerce Platforms](/docs/payment/ecomm) diff --git a/src/pages/index.js b/src/pages/index.js index 4e5bc19..dace289 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -44,7 +44,7 @@ const features = [ { id:5, title: "APIs and Plugins", - target: "/guides/api-and-plugins", + target: "/docs/payment/ecomm", imageUrl: "img/home/api-and-plugins.svg", description: ( <> diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-1.png b/static/img/docs/integrate/ecomm/shopify/shopify-1.png deleted file mode 100644 index 367d31e..0000000 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-1.png and /dev/null differ diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-2.png b/static/img/docs/integrate/ecomm/shopify/shopify-2.png deleted file mode 100644 index 091e3bb..0000000 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-2.png and /dev/null differ diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-3.png b/static/img/docs/integrate/ecomm/shopify/shopify-3.png deleted file mode 100644 index 4eaa4fa..0000000 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-3.png and /dev/null differ diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-4.png b/static/img/docs/integrate/ecomm/shopify/shopify-4.png deleted file mode 100644 index 23f9a7f..0000000 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-4.png and /dev/null differ diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-5.png b/static/img/docs/integrate/ecomm/shopify/shopify-5.png deleted file mode 100644 index 26989ce..0000000 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-5.png and /dev/null differ diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-connect-1.png b/static/img/docs/integrate/ecomm/shopify/shopify-connect-1.png deleted file mode 100644 index facae87..0000000 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-connect-1.png and /dev/null differ diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-connect-2.png b/static/img/docs/integrate/ecomm/shopify/shopify-connect-2.png deleted file mode 100644 index 4cecc81..0000000 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-connect-2.png and /dev/null differ diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-connect-3.png b/static/img/docs/integrate/ecomm/shopify/shopify-connect-3.png deleted file mode 100644 index 94ef95c..0000000 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-connect-3.png and /dev/null differ diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-connect-4.png b/static/img/docs/integrate/ecomm/shopify/shopify-connect-4.png deleted file mode 100644 index 22ca543..0000000 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-connect-4.png and /dev/null differ diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-setup-1.png b/static/img/docs/integrate/ecomm/shopify/shopify-setup-1.png index dd64ec5..51e5dab 100644 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-setup-1.png and b/static/img/docs/integrate/ecomm/shopify/shopify-setup-1.png differ diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-setup-2.png b/static/img/docs/integrate/ecomm/shopify/shopify-setup-2.png index 3561f19..a9fd97c 100644 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-setup-2.png and b/static/img/docs/integrate/ecomm/shopify/shopify-setup-2.png differ diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-setup-3.png b/static/img/docs/integrate/ecomm/shopify/shopify-setup-3.png index 2e83c42..b4541ed 100644 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-setup-3.png and b/static/img/docs/integrate/ecomm/shopify/shopify-setup-3.png differ diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-setup-4.png b/static/img/docs/integrate/ecomm/shopify/shopify-setup-4.png index 826c059..9814312 100644 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-setup-4.png and b/static/img/docs/integrate/ecomm/shopify/shopify-setup-4.png differ diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-setup-5.png b/static/img/docs/integrate/ecomm/shopify/shopify-setup-5.png index 703ca57..ddb16e9 100644 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-setup-5.png and b/static/img/docs/integrate/ecomm/shopify/shopify-setup-5.png differ diff --git a/static/img/docs/integrate/ecomm/shopify/shopify-setup-6.png b/static/img/docs/integrate/ecomm/shopify/shopify-setup-6.png deleted file mode 100644 index 87eefdc..0000000 Binary files a/static/img/docs/integrate/ecomm/shopify/shopify-setup-6.png and /dev/null differ