Label StoreMax

Introduction

Welcome to WooSignal! Get familiar with how WooSignal works and explore the features available.
If you have any questions please feel free to contact us

Requirements

To quickly get setup, you'll need to ensure that you have the below requirements.

• WordPress 4.4+
• Woocommerce Store 3.0+
• Android Studio (Download here)
• Flutter (Download here)

Folder Structure

Download and extract the zip. You will find the structure as follows:

Installing

To build this app, you should have the above requirements completed. Please ensure that you have run the below commands at the project root using Flutter:

flutter clean
flutter channel stable
flutter upgrade
flutter doctor -v
flutter pub get

Next, try to build and run the project. In Android Studio, you can open a simulator for IOS or Android and click the play button to start a fresh build.

Please note that the above steps aren't required for each build. You should only need to run them once.

If you are having trouble building the app, ensure that your Flutter version is up to date and check for errors with the below command

flutter doctor -v

Connecting WooCommerce

Follow the below steps to connect your WooCommerce store:

• Login into your WooSignal account (or create an account if you are new).
• On the Dashboard, if you have not connected your store, it will display "Offline". This means you will need to connect your WooCommerce store, select "connect" and add the url to your WooCommerce store e.g. https://www.outdoorshoes.com once added, select "Connect store".
• It will ask for an admin user to login so WooSignal can be authorized to connect with your WooCommerce store. If all has gone successful, your dashboard should show "Online" which means your store is now connected!

Connect Label App

If you have followed the above steps, you should now be able to connect your app.
Using Android Studio, open the project and edit the "lib/labelconfig.dart" file in the package.

Linking your WooCommerce store

On the WooSignal dashboard you should have "Manage Apps" on the left sidebar, select it and generate a appKey by clicking "Generate new key". This will create a key for the app to use, copy it and go back to the app.

Inside the "labelconfig.dart" file in Android Studio, look for app_key and update the value like so

const app_key = "paste the app key here"

Once added you should be able to run the app in Android Studio by clicking the run icon at the top

Woocommerce Payment Currency

To change the currency for Woocommerce orders find the following variable inside LabelCore in Android Studio

const app_currency_iso = "gbp" // must be lowercase

Find your currency code - View Currency Codes

App Icon

Create an app icon with the dimensions of 1024x1024px (for the best results).

Add the app icon to "/assets/icon/" directory and delete "appicon.png". Next, rename your file "appicon.png" and run the below command of the terminal.

flutter pub run flutter_launcher_icons:main

This will make all the app icons for you using a generator.
If you want more control over the icons check out this link.

Stripe

To connect Stripe to Label you will need to first login to WooSignal, on the dashboard, you will need to connect your Stripe account here

Follow the guide on Stripe, this will authorize WooSignal to connect with your Stripe account.

Once the account is connected it should show "Online" in green on WooSignal which means it was successfully connected. The next step is to copy your StripeAccount and add the value to the app. Next open Android Studio and edit the following variable.

const app_stripe_account = "paste stripe account here"

Note: To change the environment to live you will need to turn off "test mode" in WooSignal and update app_stripe_live_mode = true

Cash On Delivery (COD)

To enable Cash On Delivery, go to the "labelconfig.dart" file and then look for the below variable.

const app_payment_methods = ["Stripe"];

Update it to use Cash On Delivery with the following changes:

const app_payment_methods = ["CashOnDelivery"];

Now, if a customer selects the Cash On Delivery method from with the app it will use the "/providers/cash_on_delivery.dart" file to trigger a Cash On Delivery payment.

RazorPay

To enable RazorPay, go to the "labelconfig.dart" file and then look for the below variable.

const app_payment_methods = ["Stripe"];

Update it to use RazorPay with the following changes:

const app_payment_methods = ["RazorPay"];

Now, if a customer selects the RazorPay method from with the app it will use the "providers/razorpay.dart" file to trigger a RazorPay payment.

Custom Payment Gateways

If you want to add a custom payment gateway to the app, hopefully this section will help you understand how to implement one.

First open "app_payment_methods.dart" this file contains all the payment methods for the app.

///
List<PaymentType> arrPaymentMethods = [
  addPayment(
    PaymentType(
      id: 1,
      name: "Stripe",
      desc: "Debit or Credit Card",
      assetImage: "dark_powered_by_stripe.png",
      pay: stripePay,
    ),
  ),
...

A PaymentType consists of the following:

At the bottom of the file is an example payment gateway

///
//  addPayment(
//    PaymentType(
//      id: 4,
//      name: "MyNewPaymentMethod",
//      desc: "Debit or Credit Card",
//      assetImage: "add icon image to assets/images/myimage.png",
//      pay: myCustomPaymentFunction
//    ),
//  ),
...

You can uncomment this out to use as a template for your custom payment gateway. You can add multiple payment gatways in this array to build your app how you want it.

Handling payments

To handle payments, create a new file in "/providers" and name it as the payment method e.g. paypal.dart

Copy the code in "/providers/example_pay.dart" and rename the "examplePay" function name to whatever you like e.g. payPalPay

This file will be used to handle the integration for your new payment method.

///
examplePay(context,
    {required CheckoutConfirmationPageState state, TaxRate taxRate}) async {
  // HANDLE YOUR PAYMENT INTEGRATION HERE
  // ...
  // ...
  // ...
  // THEN ON SUCCESS OF A PAYMENT YOU CAN DO SOMETHING SIMILAR BELOW

  // CREATES ORDER MODEL
  OrderWC orderWC = await buildOrderWC(taxRate: taxRate, markPaid: true);

  // CREATES ORDER IN WOOCOMMERCE
  Order order = await appWooSignal((api) => api.createOrder(orderWC));

  // CHECK IF ORDER IS NULL
  if (order != null) {
    Navigator.pushNamed(context, "/checkout-status", arguments: order);
  } else {
    showEdgeAlertWith(
      context,
      title: trans(context, "Error"),
      desc: trans(context,
          trans(context, "Something went wrong, please contact our store")),
    );
    state.reloadState(showLoader: false);
  }
}
...

We pass in parameters to help with make things easier, the below table explains there uses.

When the transaction is complete, we then create the order in WooCommerce with the "api.createOrder" method and then redirect the customer to the order status with a summary of their order.

Uploading to the App Stores

When you are happy with the app, you can check out the below links to help you complie and submit the app to the app stores.
IOS Deployment
Android Deployment

Credits

• Icon's made by Freepik from www.flaticon.com