deposits
v1 - User Endpoints Only
Search…
⌃K

Flutter

The Deposits One-Click Checkout SDK allows merchants to quickly onboard, and checkout customers. We provide powerful and customizable UI screens that can be used instantly to collect payments from your users, whether they have a Deposits account or not.

Use Cases

Simplified Security: By transferring the sensitive data straight to Deposits rather than your server, we make it easy for you to collect sensitive data such as credit card and ACH details while being PCI compliant.
Payment methods: Accepting card and ACH payments helps your business to expand its global reach and improve checkout conversion.
Native UI: On Android and iOS, we provide native screens and components for securely collecting payment information.
Fast Checkout: In the future, transactions will require less input and can be completed with a single click.

Getting Started

To get started with this SDK, follow the instructions to get it up and running locally for development and testing purposes.

Requirements

It’s important to note that this SDK supports development for Android and iOS apps. Although, for web development, you can make use of our JavaScript SDK.
  • Android
    For successful integration, ensure your app;
    1. 1.
      Uses Android 5.0 (API level 21) and later,
    2. 2.
      When updates are made, rebuild the app rather than update with hot reload.
    If you have any problems integrating this package into your Android app, please reach out to us for support.
  • iOS
    This SDK supports apps that are compatible with iOS 10 and later.

How to Use

There are two major steps involved in using this SDK;
  • Import the SDK,
  • Set up environment variables,
  • Initiate checkout.

Importing the SDK

You can import the SDK using the pubspec.yaml file in your root directory (recommended) or using your terminal.
  1. 1.
    To import the SDK, embed the following code into your pubspec.yaml file.
    dependencies:
    flutter:
    sdk: flutter
    deposits_oneclick_checkout: <Latest version>
  2. 2.
    Using the terminal, you can run the following command:
    flutter pub add deposits_one_click_checkout

Setting up environment variables

It’s important to set up and secure your environment variables in a .env file at the root of your project directory. Log in to the deposits console in staging or production to retrieve your API key, and define them as seen below. You will gain access to the SDK by using these keys.
API_KEY="your-api-key"
API_KEY_TEST="your-test-api-key"
In the example below, we make use of API_KEY_TEST in the staging environment, and API_KEY in the production environment. However, you can make use of only the API_KEY with either production or staging values.

Initiating checkout

After importing the SDK and setting up your .env variables, you can initiate the checkout widget in your form.
depositsCheckout(
context,
ButtonConfig(
buttonColor:'0DB9E9',
textColor:'FFFFFF',
loaderColor:'FFFFFF',
amount: double.parse(amountController.text
.toString().replaceAll('\\$', '').toString()),),
userEmail: userEmailController.text.trim(),
apiKey: apiKey.toString(),
envMode: envMode,
chargeFundsResponse: (response) {
response.data!.toString());
},
);
To initiate the checkout process successfully, context, userEmail, apiKey, envMode and ButtonConfig are required parameters for the SDK.
You can use the buttonColor , loaderColor and textColor parameters to customize the checkout experience with your brand colors, as seen above.
If ButtonConfig parameters such as height, minwidth, buttonColor, textColor, etc are not stated, the default Deposits settings will be used. However, it must contain the amount parameter.

Example

A typical implementation of the SDK in a form would be as shown below.
import 'package:currency_text_input_formatter/currency_text_input_formatter.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:flutter/material.dart';
import 'package:flutter_switch/flutter_switch.dart';
import 'package:deposits_oneclick_checkout/app/modules/deposits_oneclick_checkout_button.dart';
//declare these variable inside your stateful widget
final scaffoldKey = GlobalKey<ScaffoldState>();
final formKey = GlobalKey<FormState>();
final bool _autoValidate = false;
final userEmailController = TextEditingController();
final amountController = TextEditingController();
static bool isEmailExist = false;
bool isSwitched = false;
var apiKey = dotenv.env['API_KEY'];
var envMode = 'false';
//in the body of the stateful widget =>Scafold->body
Form(
key: formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const SizedBox(height: 20,),
const Text('Fill the form below.',
style: TextStyle(fontSize: 20),),
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'\\[email protected]\\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(
margin: const EdgeInsets.only(top: (10.0)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text('Use in DEVELOPMENT',
style: TextStyle(color: Colors.black, fontSize: 16),
),
FlutterSwitch(
value: isSwitched,
activeColor: Colors.green,
showOnOff: true,
onToggle: (value) {
setState(() {
isSwitched = value;
});
if (isSwitched) {
setState(() {
apiKey = dotenv.env['API_KEY_TEST'];
envMode = 'true';
});
} else {
setState(() {
apiKey = dotenv.env['API_KEY'];
envMode = 'false';
});
}
},
),
],
),
),
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()) {
depositsCheckout(
context,
ButtonConfig(
amount: double.parse(
amountController.text
.toString()
.replaceAll('\\$', '')
.toString()),
),
userEmail:userEmailController.text.trim(),
apiKey: apiKey.toString(),
envMode: envMode,
chargeFundsResponse: (response) {
response.toString());
},
);
}
},
),
margin: const EdgeInsets.only(top: (30.0)))
],
),
),
When the user submits the form, the checkout process begins using the email and amount data provided by the user.

Response and Outcomes

After the checkout process has been initialized, there are a couple of possible outcomes from the Deposits SDK.

Successful Payments

If the payment is successful, a response similar to this will be gotten:
{
“data”: {
“amount”:540.00,
“merchant_name”: “money”,
“transaction_id”: “DPST_OCC_9ce705decede887e7e2534a07”
},
“message”: “Card charged successfully”,
“status”: “success”
}

Failed Payments

If a customer's payment fails for whatever reason, the modal remains open for the consumer to try again. When this happens, we'll send you an email to let you know.

Canceled Payments

If the customer closes the payment modal before making a payment or clicks "Cancel Payment", we will cancel the payment session, and hide the modal.

References

Support

Have trouble integrating? For assistance, please contact [email protected].

Contributing

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