When installing, if you get issue, please go to Common Questions or Common Issues to find the solutions. It’s only use for the Fluxstore Pro product.

payment

Native Payment

Current release supports to work with new Native Payment Paypal and COD. This gateway is compatible for all WooCommerce, Magento and Opencart.

Please review this video for more details on how to config the Payment & Razorpay payments:

1. Paypal

This const helps to config the Native Payment Paypal:

const PaypalConfig = {
  "clientId":
      "ASlpjFreiGp3gggRKo6YzXMyGM6-NwndBAQ707k6z3-WkSSMTPDfEFmNmky6dBX00lik8wKdToWiJj5w",
  "secret":
      "ECbFREri7NFj64FI_9WzS6A0Az2DqNLrVokBo0ZBu4enHZKMKOvX45v9Y1NBPKFr6QJv2KaSp5vk5A1G",
  "production": false,
  "paymentMethodId": "paypal",
  "enabled": true,
  "returnUrl": "http://return.example.com", 
  "cancelUrl": "http://cancel.example.com",
};

2. Razor Payment

This const helps to config the RazorpayConfig: Please note that from version 1.6.6, the Razorpay integration for iOS has been disabled due to block issue: https://github.com/razorpay/razorpay-flutter/issues/57. However, if you want to enable Razor Payment for Android version, please follow those instructions:

  • Update RazorpayConfig in /lib/common/config/payments.dart/
const RazorpayConfig = {
  "keyId": "enter-your-razor-key-id-here",
  "paymentMethodId": "razorpay",
  "enabled": true
};
  • Go to file lib/screens/checkout/payment_razopay.dart, copy the whole content of this file and replace it into lib/screens/checkout/payment.dart
  • Double check if razorpay_flutter plugin has been installed in your project or not. If not, please add razorpay_flutter: ^1.2.2 into your pubspec.yaml file and run flutter pub get. (razorpay_flutter version might be changed in the future, please try to install latest version.)
  • Go to /lib/common/config/generanal.dart, inside const kAdvanceConfig add "EnableShipping": true,
  • Now try to checkout by Razor Payment, it should be working by now.

3. Stripe Payment

Open lib/common/config/payments.dart.

This const helps to config the Native Stripe payment:

const kStripeConfig = {
  "serverEndpoint": "https://your-stripe-server.vercel.app",
  "publishableKey": "pk_test_....",
  "enabled": true,
  "paymentMethodId": "stripe",
};
  • serverEndpoint: This is the URL to your Stripe Node Server. Please follow the below tutorial to set up Stripe Node Server.
  • publishableKey: Publishable key which taken from your Stripe dashboard.
  • enabled: Set to "true" to enable Stripe payment. Default is "false".

Setup Stripe Node Server:

  1. Download our provided Stripe server project.
  2. Open index.js in the Stripe server project folder, then:

    • Set your Stripe Secret key to stripeSecretKey.
    • Set your website url to websiteUrl. stripe secret key After handling 3D Secure, Stripe will redirect back to the app using websiteUrl. IMPORTANT: This requires deep link to be configured. websiteUrl can be like https://inspireui.com (Universal Links) or fluxstore://inspireui.com (App Links/Custom URL Schemes) depends on how you configured deep link.
  3. Upload your server project to a new PRIVATE GitHub/GitLab repository.
  4. Deploy your server using Vercel.

    Follow their guide to setup Vercel for GitHub or Vercel for GitLab

  5. From Vercel, copy the URL of server domain. vercel copy link
  6. Go back to FluxStore project, open lib/common/config/payments.dart.
  7. In kStripeConfig constant, replace https://your-stripe-server.vercel.app with the copied URL.

Test:

  • Test API keys (publishable key & secret key) can be taken at here.
  • You can use card number 4242 4242 4242 4242 with any CVV & any future expiry date to test Stripe payment (only works with test keys).
  • To test 3D Secure, you can use this card 4000 0027 6000 3184 or get more at Stripe's documentation.

Multi-Payment Webview

The current release supports for Webview multi payment on WooCommerce and Opencart website.

1. EnableOnePageCheckout

Open lib/common/config/payments.dart and update the following values:

/// Enable Payment option
"EnableOnePageCheckout": true,
"NativeOnePageCheckout": false

This OnePage Checkout feature to allow open WebView when process the order, if you are using some extra plugin Shipping, Checkout plugins, this is the great feature support out of the box the checkout function right your Webview (work same as on your website)

2. NativeOnePageCheckout

Fluxstore also supports the Payment that combines both Native and WebView, enable the OnePageCheckout:

/// Enable Payment option
"EnableOnePageCheckout": false,
"NativeOnePageCheckout": true

The default option of NativeOnePageCheckout is set to true to support the Payment that combines both Native and WebView. If you would like to disable this option and enable the OnePageCheckout, update EnableOnePageCheckout: true.

Please note that the multi payment gateway only availables for the WooCommerce and Opencart integration, other frameworks are not supported yet.

Some Extra Settings

1. Downloadable product app

To enable the Downloadable product which is used for some business like Download the Digital Assets, Download E-Book…

As the download will not require the checkout and shipping address, so you need to disable this screens from the common/config.dart file: (For Fluxstore app from version 1.6.5 onwards, refer lib/common/config/payments.dart)

"EnableShipping": false,
"EnableAddress": false,

The screen of downloadable product will be displayed as normal, but once the user has purchased your products successful, the download link will display on the Order Detail screen:

fluxstore_currencies_inspireui_flutter

2. Payment options

Open lib/common/config/payments.dart and change the value.

/// config for payment features
const kPaymentConfig = {
  "DefaultCountryISOCode": "VN",
  "EnableShipping": true,
  "EnableAddress": true,
  "EnableCustomerNote": true,
  "EnableReview": true,
  'allowSearchingAddress': true,
  "GuestCheckout": false,
  "MinFreeShippingCost": 200
};
  • DefaultCountryISOCode: default country IOS Code.
  • EnableShipping: to skip the shipping info.
  • EnableAddress: enable the address shipping, set false if use for the app like Download Digial Asset which is not required the shipping feature.
  • EnableCustomerNote: enable customers to add note when order.
  • EnableReview: enable the review on the product.
  • allowSearchingAddress: enable the Google Map Picker address from Shipping screen.
  • GuestCheckout: enable the guest checkout. Without logging in, users can still buy products.
  • MinFreeShippingCost: set the minimum free shipping cost.

3. Minimum purchase Amount and Maximum Quantity

Open lib/common/config/products.dart and change the value:

const kCartDetail = {
  "minAllowTotalCartValue": 100,
  "maxAllowQuantity": 10,
};
  • minAllowTotalCartValue: set the minimum purchase amount. If you do not like the message "Total order's value must be at least $ 100.00" appears, set it to 0.
  • maxAllowQuantity: set the maximum quantity of product for each purchase.

4. Update Payment Image

To customize this list Payment Image, go to the lib/common/config/payments.dart add new payment key value and the image URL to enable it:

const Payments = {
  "paypal": "assets/icons/payment/paypal.png",
  "stripe": "assets/icons/payment/stripe.png",
  "razorpay": "assets/icons/payment/razorpay.png",
};