HippoPay Payments with Creem for WooCommerce

Welcome to the official documentation for the HippoPay Payments with Creem plugin. This guide will walk you through everything you need to know to start accepting payments on your WooCommerce store using Creem's global payment infrastructure.

Table of Contents

1. Requirements
2. Installation
3. Creem Account Setup
4. Configuring WooCommerce
5. Configuring the Webhook
6. Testing the Integration
7. Going Live

Requirements

Before you begin, ensure your WordPress environment meets the following minimum requirements:

• WordPress 6.0 or higher
• WooCommerce 8.0 or higher
• PHP 8.0 or higher
• SSL Certificate installed and active (Required for secure payments and webhooks)

Installation

Method 1: Uploading the Plugin Zip

1. Download the plugin zip file.
2. Log in to your WordPress Admin Dashboard.
3. Navigate to Plugins > Add New.
4. Click the Upload Plugin button at the top of the page.
5. Select the downloaded zip file and click Install Now.
6. Once installed, click Activate Plugin.

Method 2: Manual Upload via FTP/SFTP

1. Extract the downloaded plugin zip file.
2. Connect to your server using an FTP/SFTP client.
3. Upload the extracted payment-gateway-creem-for-woocommerce folder to your /wp-content/plugins/ directory.
4. Log in to your WordPress Admin Dashboard.
5. Navigate to Plugins.
6. Find "HippoPay Payments with Creem for WooCommerce" and click Activate.

Creem Account Setup

To process payments, you need an active Creem account to retrieve your API Keys and Webhook Secret.

1. Go to Creem.io and create an account or log in.
2. Complete your merchant verification process if you are setting up a live account.
3. In your Creem Dashboard, navigate to Developers > API and webhooks.
4. Click on the API Keys tab.
5. Click create api key to generate your API keys. Keep this page open, as you will need to copy these into WooCommerce shortly.

Configuring WooCommerce

Now that the plugin is activated and you have your keys, it's time to connect WooCommerce to Creem.

1. In your WordPress Dashboard, go to WooCommerce > Settings.
2. Click on the Payments tab.
3. Scroll down to find Creem in the list of payment methods.
4. Toggle the switch to Enabled, and click the Set up (or Manage) button.
5. Configure the following settings:
   • Enable/Disable: Check the box to enable the Creem Payment Gateway.
   • Title: The title the user sees during checkout (Default: Pay with Creem).
   • Description: The description the user sees during checkout.
   • Enable Test Mode: Check this box while you are testing the integration. Uncheck it when you are ready to accept real payments.
   • Test API Key: Paste your Test API Key from the Creem dashboard.
   • Live API Key: Paste your Live API Key from the Creem dashboard.
   • Webhook Secret: You will generate this in the next step.
6. Click Save changes.

Configuring the Webhook

Webhooks are crucial. They allow Creem to notify your WooCommerce store the exact moment a payment is successful so your order status can automatically change from "Pending payment" to "Processing" or "Completed".

1. Go to your Creem Dashboard and navigate to Developers > API and webhooks.
2. Click on the Webhooks tab.
3. Click the Add Webhook button.
4. Set the Endpoint URL to your store's REST API route:

   https://your-domain.com/wp-json/creem/v1/webhook
   (Replace your-domain.com with your actual website URL)

5. Select the event you want to listen to. For standard payments, you must select:
   • checkout.completed
6. Save the webhook. Creem will generate a Webhook Secret (often called a Signing Secret).
7. Copy this Webhook Secret.
8. Go back to your WordPress Dashboard (WooCommerce > Settings > Payments > Creem).
9. Paste the secret into the Webhook Secret field.
10. Click Save changes.

Testing the Integration

It is highly recommended to test the payment flow before launching.

1. Ensure Enable Test Mode is checked in your WooCommerce Creem settings.
2. Ensure you have entered your Test API Key.
3. Go to the front-end of your store and add a product to your cart.
4. Proceed to Checkout. You should see "Pay with Creem" as a payment option.
5. Select Creem and place the order. You will be redirected to the Creem hosted checkout page.
6. Use Creem's official test card numbers to simulate a successful payment.
7. Once completed, you will be redirected back to your store's order confirmation page.
8. Go to WooCommerce > Orders in your dashboard. The order status should automatically update to "Processing" (this confirms your webhook is working correctly!).

Going Live

When you are ready to accept real money from real customers:

1. Go to WooCommerce > Settings > Payments > Creem.
2. Uncheck the "Enable Test Mode" box.
3. Ensure your Live API Key is entered correctly.
4. Ensure your Live Webhook is set up in the Creem dashboard and the Live Webhook Secret is saved in WooCommerce.
5. Click Save changes.