Merge branch 'master' into feature/sc-69433/quickstart-guide

# Conflicts:
#	package.json
#	yarn.lock

.github/workflows/pull-request.yml

@@ -21,6 +21,9 @@ jobs:
         uses: bahmutov/npm-install@v1
         with:
           install-command: yarn --frozen-lockfile --no-progress --ignore-scripts
+
+      - name: Install sharp
+        run: yarn add sharp
 
       - name: Build
         run: yarn build

docs/plugins/bigcommerce-payments/index.mdx

@@ -5,12 +5,19 @@ sidebar_label: BigCommerce Plugin
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
-
+import Image from "@theme/IdealImage";
 import { Alert, Alerts } from "@site/src/components/shared/Alert";
 import { GithubCard } from "@site/src/components/sdks/GithubCard";
 import { SDK } from "@site/src/components/types";
+import MerchantDashboardImage from "@site/static/img/plugins/bigcommerce/merchant-dashboard.png";
+import MerchantSettingsImage from "@site/static/img/plugins/bigcommerce/merchant-settings.png";
+import MerchantApiKeysImage from "@site/static/img/plugins/bigcommerce/merchant-api-keys.png";
+import MerchantCreateApiKeyImage from "@site/static/img/plugins/bigcommerce/merchant-create-api-key.png";
+import MerchantSettingsPaymentsImage from "@site/static/img/plugins/bigcommerce/merchant-settings-payments.png";
+import MerchantPaymentSettingsImage from "@site/static/img/plugins/bigcommerce/merchant-payment-settings.png";
+import MerchantBankdepositSettingsImage from "@site/static/img/plugins/bigcommerce/merchant-bankdeposit-settings.png";
 
-# BigCommerce Payments Plugin
+# Integrating PublicSquare Payments with BigCommerce
 
 PublicSquare BigCommerce Payments Plugin is a 1-click plugin for BigCommerce that allows you to accept credit and debit card payments instantly.
 
@@ -22,57 +29,97 @@ If you have not yet created an account, [schedule a demo](https://payments.publi
 
 ## Installation
 
-Find the app in the BigCommerce marketplace and install it.
+This guide will walk you through setting up the PublicSquare Payments app in BigCommerce. Follow the steps below carefully to ensure a smooth installation and configuration process.
+
+## Step 1: Create an API Account in BigCommerce
+
+To enable the plugin to connect with BigCommerce, you'll need to create an API account.
+
+1. **Log In to Your BigCommerce Admin Panel**
+   - Navigate to your BigCommerce store admin panel
+
+<Image img={MerchantDashboardImage} alt="BigCommerce Merchant Dashboard" />
+
+2. From the dashboard, go to **Settings > Advanced Settings > API Accounts**
+
+<Image img={MerchantSettingsImage} alt="BigCommerce Merchant Settings" />
+
+3. **Create a New API Account**
+   - Click the **Create API Account** button
+   - Select **Token Type:** V2/V3 API Token
+
+<Image img={MerchantApiKeysImage} alt="BigCommerce Merchant API Keys" />
+
+4. **Set Account Details**
+   - **Name:** Enter a descriptive name (e.g., PublicSquare Payments)
+   - **API Path:** This is auto-generated and will look like: `https://api.bigcommerce.com/stores/{store_hash}/v3/`
+
+5. **Configure OAuth Scopes**
+
+   Assign the following scopes:
+   - **Content:** Modify
+   - **Checkout Content:** Modify
+   - **Orders:** Modify
+   - **Carts:** Modify
+   - **Checkouts:** Modify
+
+<Image img={MerchantCreateApiKeyImage} alt="BigCommerce Merchant Create API Key" />
+
+6. **Save the API Account**
+   - Click **Save** to generate the credentials. A file containing the API credentials will be downloaded and saved to your computer
+
+## Step 2: Upload the API Credentials to the Plugin
+
+1. Navigate to the [PublicSquare plugin setup page](https://bigcommerce-plugin.publicsquare.com/installation/setup)
+2. **Upload the File**
+   - Drag and drop the API credentials file
+
+## Step 3: Add Payment API Keys
 
-## Getting started
+1. Copy the **API Keys** from your [PublicSquare Portal](https://portal.publicsquare.com/developers/api-keys)
+   - Ensure the correct scope is selected (e.g., Test Mode for initial setup)
+2. Navigate back to the [plugin setup page](https://bigcommerce-plugin.publicsquare.com/installation/setup):
+3. Input the keys and save your changes
 
-### 1. Configure Payment Method in BigCommerce
+## Step 4: Configure Payment Settings in BigCommerce
 
-1. Go to **PublicSq App Settings** within your BigCommerce admin panel
-2. Locate the fields for **Public Key** and **Secret Key**
-3. Paste the **Publishable Key** into the **Public Key** field
-   1. NOTE: The key will start with `pk_`
-4. Paste the **Secret Key** or **Restricted Key** into the **Secret Key** field
-   1. NOTE: The key will start with `sk_` for secret keys and `rk_` for restricted keys
+1. **Log in to your BigCommerce Admin Panel**
+   - Use your administrator credentials to access the dashboard
 
-### 2. Set Up Bank Deposit Payment Method for PublicSquare
+<Image img={MerchantDashboardImage} alt="BigCommerce Merchant Dashboard" />
 
-1. Navigate to **Payment Settings** in BigCommerce
-2. Enable the **Bank Deposit** payment method for PublicSquare
-3. Change the **Display Name** to "Credit/Debit Card"
-4. In the **Account Information** field, erase any existing text and add a single space to meet the input validation requirement
-5. Click **Save** (blue button in the lower right corner)
+2. **Navigate to Settings > Payments**
 
-### 3. Default Settings Configuration
+<Image img={MerchantSettingsPaymentsImage} alt="BigCommerce Merchant Payment Settings" />
 
-- Ensure **Authorize and Capture** is enabled in the payment settings
+3. Enable the **Bank Deposit** field:
+   - Scroll down to find the **Offline Payment Methods** section
+   - Enable the **Bank Deposit** field
 
-### 4. Add Test Card for Transaction Testing
+<Image img={MerchantPaymentSettingsImage} alt="BigCommerce Merchant Payment Settings" />
 
-Refer to [PublicSquare Testing Card Details](/api/testing#cards) for test card numbers.
+4. Configure the following payment details:
+   - **Display Name:** Credit/Debit Card
+   - **Available Locations:** USA Only
+   - **Account Information:** Press the space bar once in this field to add a single space (do not leave it blank)
+4. Save your payment settings
 
-Recommended Test Card:
-- **Card Number:** `4242 4242 4242 4242`
-- **Expiration Date:** Any future date
-- **CVC:** Any 3 digits
+<Image img={MerchantBankdepositSettingsImage} alt="BigCommerce Merchant Bank Deposit Settings" />
 
-### 5. Testing the Checkout Process
+## Step 5: Place Test Orders
 
-1. Go to your BigCommerce storefront
-2. Add any product to the cart
-3. Begin the checkout process
-4. In the payment method selection, choose **Credit/Debit Card** (PublicSquare)
-5. Enter the provided test card details
+1. Your setup is now complete! Proceed to place **test orders** in your BigCommerce store
+2. Test the following scenarios:
+   - **Successful payments**
+   - **Failed payments** (using [test cards](https://developers.publicsquare.com/api/testing#cards))
 
-### 6. Place Order and Verify Transaction
+## Testing Cards
 
-1. Complete the order placement
-2. Go to the **BigCommerce Admin Portal** to review the order
-3. Confirm the payment method displays as **Credit Card (PublicSquare)** and check for the **Transaction ID** in the format `pmt_XXXXXXXXXXXXXXXXXX`
+For testing purposes, refer to the [PublicSquare Testing Cards Documentation](https://developers.publicsquare.com/api/testing#cards). This resource provides card details for simulating different scenarios in a test environment.
 
-### Additional Notes
+## Support
 
-- Ensure that the transaction status and order details are correct and displayed as expected
-- For further testing guidance or troubleshooting, please refer to the **PublicSquare API**
+If you have questions or run into any issues, please reach out to our support team:
 
+- **Email:** [payment-support@publicsq.com](mailto:payment-support@publicsq.com)
 

docs/plugins/magento-payments/index.mdx

@@ -10,7 +10,7 @@ import { Alert, Alerts } from "@site/src/components/shared/Alert";
 import { GithubCard } from "@site/src/components/sdks/GithubCard";
 import { SDK } from "@site/src/components/types";
 
-# Magento Payments Plugin
+# Integrating PublicSquare Payments with Magento
 
 PublicSquare Magento Payments Plugin is a 1-click plugin for Magento that allows you to accept credit and debit card payments instantly.
 

docs/plugins/woocommerce-payments/index.mdx

@@ -5,12 +5,18 @@ sidebar_label: WooCommerce Plugin
 
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import Image from '@theme/IdealImage'
 
 import { Alert, Alerts } from "@site/src/components/shared/Alert";
 import { GithubCard } from "@site/src/components/sdks/GithubCard";
 import { SDK } from "@site/src/components/types";
+import SettingsSetupImage from "@site/static/img/plugins/woocommerce/settings-setup.png";
+import PluginInstallStep2Image from "@site/static/img/plugins/woocommerce/plugin-install-step-2.png";
+import PluginInstallStep3Image from "@site/static/img/plugins/woocommerce/plugin-install-step-3.png";
+import PluginInstallStep4Image from "@site/static/img/plugins/woocommerce/plugin-install-step-4.png";
+import PluginInstallStep5Image from "@site/static/img/plugins/woocommerce/plugin-install-step-5.png";
 
-# WooCommerce Payments Plugin
+# Integrating PublicSquare Payments with WooCommerce
 
 PublicSquare WooCommerce Payments Plugin is a 1-click plugin for WooCommerce that allows you to accept credit and debit card payments instantly.
 
@@ -22,57 +28,152 @@ If you have not yet created an account, [schedule a demo](https://payments.publi
 
 ## Installation
 
-Find the app in the WooCommerce marketplace and install it.
+This guide will walk you through setting up the PublicSquare Payments app in WooCommerce. Follow the steps below carefully to ensure a smooth installation and configuration process.
 
-## Getting started
+## Step 1: Upload and Activate the Plugin
 
-### 1. Configure Payment Method in WooCommerce
+1. **Download the Plugin**
+   - You will receive a .zip file containing the PublicSquare Payments plugin
 
-1. Go to **PublicSq App Settings** within your WooCommerce admin panel
-2. Locate the fields for **Public Key** and **Secret Key**
-3. Paste the **Publishable Key** into the **Public Key** field
-   1. NOTE: The key will start with `pk_`
-4. Paste the **Secret Key** or **Restricted Key** into the **Secret Key** field
-   1. NOTE: The key will start with `sk_` for secret keys and `rk_` for restricted keys
+2. **Log in to Your WordPress Admin Dashboard**
+   - Navigate to your website's WordPress Admin dashboard
 
-### 2. Set Up Bank Deposit Payment Method for PublicSquare
+<Image img={PluginInstallStep2Image} alt="Plugin Install Step 2" />
 
-1. Navigate to **Payment Settings** in WooCommerce
-2. Enable the **Bank Deposit** payment method for PublicSquare
-3. Change the **Display Name** to "Credit/Debit Card"
-4. In the **Account Information** field, erase any existing text and add a single space to meet the input validation requirement
-5. Click **Save** (blue button in the lower right corner)
+3. **Go to Installed Plugins**
+   - Click on **Plugins** in the sidebar, then select **Add New**
 
-### 3. Default Settings Configuration
+<Image img={PluginInstallStep3Image} alt="Plugin Install Step 3" />
 
-- Ensure **Authorize and Capture** is enabled in the payment settings
+4. **Upload the Plugin**
+   - Click **Upload Plugin** at the top of the page
+   - Select the .zip file provided and click **Install Now**
 
-### 4. Add Test Card for Transaction Testing
+<Image img={PluginInstallStep4Image} alt="Plugin Install Step 4" />
 
-Refer to [PublicSquare Testing Card Details](/api/testing#cards) for test card numbers.
+5. **Activate the Plugin**
+   - Once installed, click **Activate** to enable the plugin on your site
 
-Recommended Test Card:
-- **Card Number:** `4242 4242 4242 4242`
-- **Expiration Date:** Any future date
-- **CVC:** Any 3 digits
+<Image img={PluginInstallStep5Image} alt="Plugin Install Step 5" />
 
-### 5. Testing the Checkout Process
+## Step 2: Configure Payment Settings in WooCommerce
 
-1. Go to your WooCommerce storefront
-2. Add any product to the cart
-3. Begin the checkout process
-4. In the payment method selection, choose **Credit/Debit Card** (PublicSquare)
-5. Enter the provided test card details
+1. **Navigate to Payment Settings**
+   - Go to **WooCommerce > Settings > Payments**
 
-### 6. Place Order and Verify Transaction
+2. **Enable PublicSquare Payments**
+   - Find **PublicSquare Payments** in the list of payment methods
+   - Click the toggle to enable it, then click **Manage** to configure the settings
 
-1. Complete the order placement
-2. Go to the **WooCommerce Admin Portal** to review the order
-3. Confirm the payment method displays as **Credit Card (PublicSquare)** and check for the **Transaction ID** in the format `pmt_XXXXXXXXXXXXXXXXXX`
+3. **Complete the Setup Steps**
 
-### Additional Notes
+<Image img={SettingsSetupImage} alt="Settings Setup" />
 
-- Ensure that the transaction status and order details are correct and displayed as expected
-- For further testing guidance or troubleshooting, please refer to the **PublicSquare API**
+<table>
+   <thead>
+      <tr>
+         <th>Field</th>
+         <th>Description</th>
+         <th></th>
+      </tr>
+   </thead>
+   <tbody>
+      <tr>
+         <td>**Title**</td>
+         <td><em>This text will be shown to the customer at checkout.</em></td>
+         <td>Defaults to *"Credit/Debit Card"*</td>
+      </tr>
 
+      <tr>
+         <td>**Description**</td>
+         <td><em>This text will appear below the payment title during checkout.</em></td>
+         <td>Defaults to *"Pay with your credit card via PublicSquare"*</td>
+      </tr>
 
+      <tr>
+         <td>**PublicSquare Public API Key**</td>
+         <td><em>The public API key that is used by the PublicSquare credit card form.</em></td>
+         <td>Obtain your **Public API Key** from the [PublicSquare Portal](https://portal.publicsquare.com/developers/api-keys)</td>
+      </tr>
+
+      <tr>
+         <td>**PublicSquare Secret API Key**</td>
+         <td><em>The secret API key that is used by the PublicSquare credit card form.</em></td>
+         <td>Obtain your **Secret API Key** from the [PublicSquare Portal](https://portal.publicsquare.com/developers/api-keys)</td>
+      </tr>
+
+      <tr>
+         <td>**Payment Capture Action**</td>
+         <td><em>This setting ensures that payments are authorized and captured in a single action.</em></td>
+         <td>Defaults to *"Authorize & Capture"*</td>
+      </tr>
+   </tbody>
+</table>
+
+Click the **Save Changes** button to apply the settings
+
+## Step 3: Test the Payment Gateway
+
+1. **Place a Test Order**
+   - Add a product to the cart on your site and proceed to checkout
+   - Use the PublicSquare payment method to place a test order
+
+2. **Verify Transactions**
+   - Confirm that the payment has been processed successfully and is visible in WooCommerce and in the [PublicSquare Portal](https://portal.publicsquare.com)
+
+3. **Check Email Notifications**
+   - Ensure that both customer and admin emails for the order are being sent correctly
+
+## Testing Cards
+
+For testing purposes, refer to the [PublicSquare Testing Cards Documentation](https://developers.publicsquare.com/api/testing#cards). This resource provides card details for simulating different scenarios in a test environment.
+
+## Additional Notes
+
+- If you encounter any issues during installation or setup, refer to the **FAQ section** below or contact PublicSquare support for assistance
+- Ensure that your WooCommerce site is running the latest version to avoid compatibility issues
+- Verify that your server meets the plugin's minimum requirements (PHP version 7.4+ and WordPress version 5.6+)
+
+## FAQs
+
+1. **Where do I find my PublicSquare API Keys?**
+   - Log in to the [PublicSquare Portal](https://portal.publicsquare.com), navigate to the API section, and generate your Public and Secret API keys
+
+2. **What does "Authorize & Capture" mean?**
+   - This setting ensures that funds are authorized and captured immediately upon checkout, reducing the risk of payment declines
+
+3. **What should I do if payments fail?**
+   - Check the error message displayed on the checkout page.
+   - Verify that your API keys are correct and have the necessary permissions.
+   - Contact PublicSquare support if the issue persists.
+
+4. **Can I customize the payment title or description?**
+   - Yes, you can modify these fields in the WooCommerce payment settings under **PublicSquare Payments**.
+
+5. **What testing environment is available for this plugin?**
+   - You can test payments using the PublicSquare test environment.
+   - Use the [PublicSquare Testing Cards](https://developers.publicsquare.com/api/testing#cards) to simulate various payment scenarios, such as successful transactions, declined cards, or errors.
+
+6. **What happens if I don't set the payment capture action to "Authorize & Capture"?**
+   - If you choose **Authorize Only**, payments will require manual capture in the WooCommerce dashboard or the PublicSquare Portal after authorization. This is typically used for merchants who want more control over their payment workflow.
+
+7. **How do I troubleshoot if payments don't appear in the [PublicSquare Portal](https://portal.publicsquare.com)?**
+   - Verify that the API keys in the WooCommerce settings are correct.
+   - Ensure your site has a stable internet connection during the payment process.
+   - Check your WooCommerce logs (WooCommerce > Status > Logs) for any error messages related to the payment gateway.
+
+8. **How do I update the plugin to the latest version?**
+   - Download the updated .zip file from PublicSquare.
+   - Follow the same steps to upload and activate the plugin in WordPress, ensuring you overwrite the existing plugin files.
+   - Your existing settings will not be affected.
+
+9. **Does this plugin support refunds?**
+   - Yes, refunds can be processed directly from the WooCommerce dashboard.
+   - Navigate to the order details page, and click **Refund** to initiate a partial or full refund. The refund will also reflect in the [PublicSquare Portal](https://portal.publicsquare.com/developers).
+
+10. **Is there a fee for processing payments with PublicSquare?**.
+      - Processing fees depend on the PublicSquare payment gateway terms. Refer to the fee structure in your [PublicSquare Portal](https://portal.publicsquare.com) account or contact support for details.
+
+## Support
+
+If you have questions or run into any issues, please email our support team at [payment-support@publicsq.com](mailto:payment-support@publicsq.com?subject=WooCommerce%20Payments%20Plugin%20Support).

docusaurus.config.ts

@@ -144,6 +144,12 @@ const config: Config = {
         } satisfies Plugin.PluginOptions,
       },
     ],
+    [
+      "@docusaurus/plugin-ideal-image",
+      {
+        disableInDev: false,
+      },
+    ],
   ],
 };