LPE (Learmond Pay Element) #

A reusable Flutter package for Stripe payment sheets, providing a simple modal interface for card, bank, Apple Pay, and Google Pay payments.

Features #

• Modal bottom sheet UI
• Card, US bank, EU bank, Apple Pay, Google Pay support
• Built on stripe.
• Easy API for payment confirmation and result handling context: context,

Quick usage #

You can either present the paysheet programmatically via LearmondPaySheet.show(...) or embed the single-line widget LearmondPayButtons into your UI. The widget renders Card / Bank buttons on the first row and Apple/Google Pay on the second row and centrally handles the pay flows.

If you prefer to render individual buttons separately, the package exposes per-button widgets: LearmondCardButton, LearmondUSBankButton, LearmondEUBankButton, LearmondApplePayButton, and LearmondGooglePayButton.

You can pass merchant information and an array of summary line items that will be rendered above the element inside the paysheet. Use SummaryLineItem to define lines (label + cents):

import 'package:lpe/lpe.dart';

LearmondPayButtons(
  publishableKey: 'pk_test_...'
  clientSecret: 'pi_test_client_secret',
  merchantId: 'merchant.com.yourdomain',
  merchantName: 'My Shop',
  merchantInfo: 'Order #1234',
  summaryItems: [
    SummaryLineItem(label: 'Subtotal', amountCents: 1000),
    SummaryLineItem(label: 'Tax', amountCents: 80),
    SummaryLineItem(label: 'Total', amountCents: 1080),
  ],
  amount: '10.80',
  onResult: (r) { /* handle */ },
),

Example (recommended):

import 'package:lpe/lpe.dart';

LearmondPayButtons(
  publishableKey: 'pk_test_...'
  clientSecret: 'pi_test_client_secret',
  merchantId: 'merchant.com.yourdomain',
  amount: '10.00',
  onResult: (r) { /* handle */ },
),

Where to put the widget #

Place LearmondPayButtons in your checkout screen or checkout form where your user can see common payment options—typically beneath the order-total and above the confirm button. Example:

Column(
  children: [
    // ... cart/summary widgets ...
    LearmondPayButtons(...),
    ElevatedButton(onPressed: _placeOrder, child: Text('Place Order')),
  ],
)

The widget wires the pay buttons to both the Stripe paysheet and the native Apple/Google pay flows and returns the result via onResult for unified handling.

Programmatic / custom buttons #

If you want to use custom-styled buttons instead of LearmondPayButtons, call the paysheet or native bridge directly. Typical steps:

1. For card/bank flows, create a PaymentIntent on your server and get the client_secret.
2. Call LearmondPaySheet.show(...) with the clientSecret.
3. For Apple/Google Pay, call LearmondNativePay.showNativePay(...) and send the returned token to your server for finalization.

See lpe/INSTRUCTIONS.md for complete examples and server integration guidance.

## Configuration & Native Pay

Global merchant defaults

If you prefer to set application-wide defaults for Apple/Google merchant ids (so you don't need to pass
them to every widget call), call `LpeConfig.init(...)` at app startup before `runApp(...)`:

```dart
void main() {
  // IMPORTANT: Do NOT commit real merchant IDs in your repo if it's public.
  LpeConfig.init(
    appleMerchantId: 'merchant.com.example',
    googleGatewayMerchantId: 'yourGatewayMerchantId',
  );
  runApp(const MyApp());
}

GPay asset

The package includes the official Google Pay acceptance mark at static/assets/GPay_Acceptance_Mark_800.png. The widget loads it from the plugin package (Image.asset(..., package: 'lpe')) so you do not need to add the image to your app's assets.

Apple Pay Asset The package includes the official Apple Pay mark.

Native dependency guidance

The plugin depends on Google Play Services Wallet on Android. In most cases you do not need to add com.google.android.gms:play-services-wallet to your app-level Gradle file because the plugin declares it. If you do add it, make sure the version matches the plugin's dependency to avoid manifest/resource merge conflicts.

## API
- `LearmondPaySheet.show(...)` — Shows the payment sheet and returns a `PaymentResult`.
- Supports custom titles, amounts, and button labels.

## Example
See `example/` for a full integration example.

## Troubleshooting

If you run into analyzer or build issues while developing the plugin or example, these commands are helpful:

```bash
# From the lpe package folder
dart format .
flutter analyze --no-pub

Common issues:

• If the analyzer reports The name 'LpeConfig' is defined in the libraries ... ambiguous_export, ensure lib/lpe.dart exports LpeConfig explicitly (we export lpe_config.dart with show LpeConfig).
• If you see manifest/resource merge errors related to play-services-wallet, check for duplicate declarations (plugin vs app) and align versions or remove the app-level declaration if the plugin already provides it.

Installation #

Add to your pubspec.yaml:

dependencies:
  lpe:
    path: ../LPE
  flutter_inappwebview: ^6.0.0

License #

MIT

Author #

The Learmond Corporation