deposits_ecommerce 0.0.1 copy "deposits_ecommerce: ^0.0.1" to clipboard
deposits_ecommerce: ^0.0.1 copied to clipboard

outdated

A package to enables users to purchase products through deposits.

Deposits Commerce SDK #

pub package

The Deposits commerce SDk is an easy to embed commerce system for allowing creators to setup and operate an online store without owning an e-commerce website. Empowering vendors to launch commerce feature without the engineering time at less the cost of building commerce capabilities internally. Shoppers can view products and checkout one item at a time from each vendor's store without leaving the application .

deposits-one-click-checkout-flutter_cover

Getting Started #

Add the package to your pubspec.yaml and import.

import 'package:deposits/deposits_commerce.dart';

Create an instance of Deposits Commerce for your project.

Example:

shopNowButton(
	context,
	const  ButtonConfig(
		buttonText: 'Shop',
		textStyle: TextStyle(color: Colors.black),
	),
	merchantID: '1',
	customerID: '1',
	initialScreen: const  MerchantFlow(
		title: 'E-commerce SDK Test (Merchant Flow)'
	)
);

Parameter, [buttonText] is the name you want on the button

Parameter [merchantID] is the id of the merchant(whom you want to display their products) provided by Deposits API when the merchant was created, e.g. 43cba34n65l.

Parameter [customerID] is the id of the customer which is the user about to buy/purchase something provided by the Deposits API when the customer was created, e.g. 98iei74uij.

Parameter [envMode], tells the library if it should use the staging or the live environment. /// Useful if you are debuging or in development.

The goal of Deposits Commerce SDK is to make building amazing Ecommerce apps with flutter and Deposits as easy as can be and help improve your workflow.

Features. #

  • Create Store.
  • Customer Management
  • Cart Management.
  • Order Management.
  • Products management.
  • Categories.
  • Shipping Address Management.
  • Merchant management.
  • Etc and more.

Requirements #

Android

This plugin requires several changes to be able to work on Android devices. Please make sure you follow all these steps:

  1. Use Android 5.0 (API level 21) and above

  2. Rebuild the app, as the above changes don't update with hot reload

iOS

Compatible with apps targeting iOS 10 or above.

Web

We do not support the web via this plugin for now

Usage #

The library provides a UI component for creating and managing stores and managing customers.

Example #


// main.dart(import this)

import  'package:deposits_oneclick_checkout/app/modules/deposits_oneclick_checkout_button.dart';

  
  

void  main() async {

WidgetsFlutterBinding.ensureInitialized();

runApp(PaymentScreen());

}

  

// payment_screen.dart

class  PaymentScreen  extends  StatelessWidget {

  

@override

Widget  build(BuildContext context) {

return  Scaffold(

appBar: AppBar(),

body: Column(

crossAxisAlignment: CrossAxisAlignment.start,

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

const  Text(

'Fill the form below.',

),

Container(

child: TextFormField(

readOnly: isEmailExist,

controller: userEmailController,

validator: (val) {

if (val == null || val.trim().isEmpty) {

return  'Please enter your email address';

}

// Check if the entered email has the right format

if (!RegExp(r'\S+@\S+\.\S+').hasMatch(val)) {

return  'Please enter a valid email address';

}

// Return null if the entered email is valid

return  null;

},

keyboardType: TextInputType.emailAddress,

textInputAction: TextInputAction.next,

decoration: const  InputDecoration(

hintText: "Enter Email",

border: OutlineInputBorder(),

enabledBorder: OutlineInputBorder(

borderSide: BorderSide(color: Color(0xFFC0C4C9)),

),

disabledBorder: OutlineInputBorder(

borderSide: BorderSide(color: Color(0xFFC0C4C9)),

),

focusedBorder: OutlineInputBorder(

borderSide: BorderSide(color: Color(0xFFC0C4C9)),

),

),

),

margin: const  EdgeInsets.only(

top: (30.0)

)

),

Container(

child: TextFormField(

validator: (val) => val!.isEmpty ? 'Amount is required!' : null,

keyboardType: const  TextInputType.numberWithOptions(decimal: true),

inputFormatters: [

CurrencyTextInputFormatter(

decimalDigits: 2,

symbol: '\$ ',

)

],

textInputAction: TextInputAction.done,

controller: amountController,

decoration: const  InputDecoration(

hintText: "Enter Amount",

border: OutlineInputBorder(),

enabledBorder: OutlineInputBorder(

borderSide: BorderSide(color: Color(0xFFC0C4C9)),

),

disabledBorder: OutlineInputBorder(

borderSide: BorderSide(color: Color(0xFFC0C4C9)),

),

focusedBorder: OutlineInputBorder(

borderSide: BorderSide(color: Color(0xFFC0C4C9)),

),

),

),

margin: const  EdgeInsets.only(top: (10.0))

),

Container(

child: FlatButton(

minWidth: MediaQuery.of(context).size.width,

height: 56,

color: Colors.blue, //Color(0xFF0DB9E9),

child: const  Text(

'Checkout',

style: TextStyle(color: Colors.white, fontSize: 16)

),

onPressed: () async {

if (formKey.currentState!.validate()) {

pay(

context,

ButtonConfig(

amount: double.parse(amountController.text.toString()

.replaceAll('\$', '')

.toString()),

),

initialScreen: MyHomePage(

title: 'One Click-Checkout Demo',

),

userEmail: userEmailController.text.toString(),

apiKey: 'my-api-key',

envMode: 'true',

chargeFundsResponse: (response) {

// manage process after the transaction is completed

},

);

}

},

),

margin: const  EdgeInsets.only(top: (30.0))

)

],

)

);

}

}

Deposit Commerce SDK initialization #

To initialize Deposit One Click Checkout SDK in your Flutter app, use the shopNowButton base class.

shopNowButton offers context, buttonConfig, initialScreen, envMode, merchantID and customerID, apiKey. Only userEmail, apiKey, envMode, chargeFundsResponse and buttonConfig (which has the following params : amount required, textStyle, height, minwidth , etc as customizable widgets ) is required. envMode is either 'true' or 'false' as a string and chargeFundsResponse is a callback function to manage or run other processes after payment has been made abd you can check if it was successful or not. You have to change your apiKey as the envMode changes and you can get the Key from the test or live console and the URL to the console is listed in the next section

Dart API #

deposits

The library offers several methods to handle stripe related actions:


void  pay();

class  ButtonConfig()

The example app offers examples on how to use these methods.

Run the example app #

  • Navigate to the example folder cd example

  • Install the dependencies

  • flutter pub get

  • Set up env vars for the flutter app and a local backend.

  • Get your test API keys

  • Get your live API keys

  • Start the example

  • Terminal 1: flutter run

Contributing #

Only members of the deposits team can contribute to this. You can create an issue if you find a bug or have any challenge using this SDK.