paypal_native_checkout

Description:

paypal native checkout

Native Paypal integration with Flutter #

Introducing a Flutter plugin for seamless PayPal payments with native support for both Android and iOS. This package eliminates the need for WebView, offering a streamlined and efficient checkout experience.
(No WebView required)
Improvements #

Fixed endless loading issue.
Added support for passing shipping address from Flutter.
Shipping Preference Feature to add address or not

Requirements #



Platform
Supported Versions




Android
API level 21 and above


iOS
Version 13.0 and above



For detailed setup instructions, visit the PayPal Mobile Checkout documentation.
GitHub Repositories #

Android SDK
iOS SDK

Demo #


Usage #
Add paypal_native_checkout as a dependency in your pubspec.yaml file. For Android setup, ensure you have the necessary permissions and configurations in your AndroidManifest.xml and build.gradle.
Android Platform Views #
Paypal requires that you make changes to your AndroidManifest.xml
Prepare your app
Define the android.permission.INTERNET permission in the AndroidManifest.xml file of your application as follows:
<manifest xmlns:android="http://schemas.android.com/apk/res/android">

<uses-permission android:name="android.permission.INTERNET" />
...

</manifest>
copied to clipboard
add this to your android/app/build.config
android {
...

defaultConfig {

minSdkVersion 23
...
}
}

copied to clipboard
Enable the SDK
To enable the PayPal Mobile Checkout SDK:

Navigate to your app on the My Apps & Credentials page of the Developer Dashboard.
Go to Features > Other features and select the Log in with PayPal checkbox.
Click on Advanced Settings, where you'll find the Return URL field.

You have two options for setting the Return URL:

Use an Android App Link registered within the Developer Console to handle SDK redirects.
Alternatively, use your application ID (typically referenced via BuildConfig.APPLICATION_ID) and append ://paypalpay as the suffix to register your return URL. For example, if your application ID is com.paypal.app, enter com.paypal.app://paypalpay.

Ensure that the return URL in the Developer Dashboard exactly matches the one used in your SDK setup.
Additional notes:

The application ID and return URL must use lowercase letters.
If you change the return URL in the Developer Dashboard, PayPal will require a review of your app.
Select the Full Name and Email checkboxes under Advanced Settings; these are scopes of the Identity API.

The SDK is now enabled for use in your application.
How to use the library #

Check out the example in /example/lib/main.dart


import 'dart:math';

import 'package:flutter/material.dart';
import 'package:paypal_native_checkout/paypal_native_checkout.dart';
import 'package:paypal_native_checkout/models/custom/currency_code.dart';
import 'package:paypal_native_checkout/models/custom/environment.dart';
import 'package:paypal_native_checkout/models/custom/order_callback.dart';
import 'package:paypal_native_checkout/models/custom/purchase_unit.dart';
import 'package:paypal_native_checkout/models/custom/user_action.dart';
import 'package:paypal_native_checkout/str_helper.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
final _paypalNativeCheckoutPlugin = PaypalNativeCheckout.instance;
// log queue
List<String> logQueue = [];

@override
void initState() {
super.initState();
initPayPal();
}

void initPayPal() async {
//set debugMode for error logging
PaypalNativeCheckout.isDebugMode = true;

//initiate payPal plugin
await _paypalNativeCheckoutPlugin.init(
//your app id !!! No Underscore!!! see readme.md for help
returnUrl: "com.example.example://paypalpay",
//client id from developer dashboard
clientID: "ATeY...",
//sandbox, staging, live etc
payPalEnvironment: FPayPalEnvironment.sandbox,
//what currency do you plan to use? default is US dollars
currencyCode: FPayPalCurrencyCode.usd,
//action paynow?
action: FPayPalUserAction.payNow,
);

//call backs for payment
_paypalNativeCheckoutPlugin.setPayPalOrderCallback(
callback: FPayPalOrderCallback(
onCancel: () {
//user canceled the payment
showResult("cancel");
},
onSuccess: (data) {
debugPrint("Paypal Success: $data");
//successfully paid
//remove all items from queue
_paypalNativeCheckoutPlugin.removeAllPurchaseItems();
String visitor = data.cart?.shippingAddress?.firstName ?? 'Visitor';
String address =
data.cart?.shippingAddress?.line1 ?? 'Unknown Address';
showResult(
"Order successful ${data.payerId ?? ""} - ${data.orderId ?? ""} - $visitor -$address",
);
},
onError: (data) {
debugPrint("Paypal Error: ${data.reason}");
//an error occured
showResult("error: ${data.reason}");
},
onShippingChange: (data) {
//the user updated the shipping address
showResult(
"shipping change: ${data.shippingChangeAddress?.adminArea1 ?? ""}",
);
},
),
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text("Paypal Native Checkout"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
for (String t in logQueue) Text(t),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Color.fromARGB(255, 16, 30, 227),
foregroundColor: Colors.white),
child: const Text("Pay Now"),
onPressed: () {
//add 1 item to cart. Max is 4!
if (_paypalNativeCheckoutPlugin.canAddMorePurchaseUnit) {
_paypalNativeCheckoutPlugin.addPurchaseUnit(
FPayPalPurchaseUnit(
// random prices
amount: Random().nextDouble() * 100,

///please use your own algorithm for referenceId. Maybe ProductID?
referenceId: FPayPalStrHelper.getRandomString(16),
),
);
}
Map<String, dynamic>? getAddress = {
'line1': '456 Main Dt',
'line2': 'Apt 4B',
'city': 'San Jose',
'state': 'CA',
'postalCode': '95131',
'countryCode': 'US',
};

_paypalNativeCheckoutPlugin.makeOrder(
action: FPayPalUserAction.payNow, address: getAddress);
},
),
],
),
),
);
}

// all to log queue
showResult(String text) {
logQueue.add(text);
setState(() {});
}
}

copied to clipboard
Troubleshooting Tips
if you have trouble using this library, read these:

if you have a problem with the android:label after using the package, add these to the application tag of your Androidmanifest.xml


<application
tools:replace="android:label"
xmlns:tools="http://schemas.android.com/tools"
copied to clipboard

The following should be activated in the developer console of Paypal for your account


Login with paypal
native checkout sdk
Email and Fullname
Vault
Fullname & email




Updates by Sammrafi #
This package is based on flutter_paypal_native by harrowmykel.

Original package credits and link to the original GitHub repository can be found here.