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

Installation

Install via npm:

npm install learmond-pay-element

Framework-specific Usage

import { LearmondPaySheet } from 'learmond-pay-element';

const result = await LearmondPaySheet.show({
  publishableKey: 'pk_test_...',
  clientSecret: 'pi_..._secret_...',
  method: 'card', // or 'us_bank', 'eu_bank', 'apple_pay', 'google_pay'
  title: 'Pay $10.00',
});
if (result.success) {
  // Payment succeeded
}

React

import { LearmondPaySheet } from 'learmond-pay-element';

async function handlePay() {
  const result = await LearmondPaySheet.show({
    publishableKey: 'pk_test_...',
    clientSecret: 'pi_..._secret_...',
    method: 'card',
    title: 'Pay $10.00',
  });
  if (result.success) {
    // Payment succeeded
  }
}

Vue

import { LearmondPaySheet } from 'learmond-pay-element';

export default {
  methods: {
    async handlePay() {
      const result = await LearmondPaySheet.show({
        publishableKey: 'pk_test_...',
        clientSecret: 'pi_..._secret_...',
        method: 'card',
        title: 'Pay $10.00',
      });
      if (result.success) {
        // Payment succeeded
      }
    }
  }
}

Vanilla JS

<script src="/path/to/LearmondPaySheet.js"></script>
<script>
  async function handlePay() {
    const result = await window.LearmondPaySheet.show({
      publishableKey: 'pk_test_...',
      clientSecret: 'pi_..._secret_...',
      method: 'card',
      title: 'Pay $10.00',
    });
    if (result.success) {
      // Payment succeeded
    }
  }
</script>

API

• LearmondPaySheet.show({...}) — Shows the payment sheet and returns a result object: { success, status, paymentIntentId, error, rawResult }.
• Supports custom titles, amounts, and button labels.

Native device Apple / Google Pay options

If you want to use web-native Apple Pay (ApplePaySession) or Google Pay (Google Pay JS SDK) without Stripe, provide the following optional values via LearmondPaySheet.show() or attachLearmondPayButtons(...):

• merchantId — your Apple Merchant ID (required for Apple Pay).
• appleMerchantValidateUrl or validateMerchantUrl — endpoint on your server to exchange Apple merchant validation URLs for the merchant session (must perform server-side validation with Apple).
• appleProcessPaymentUrl or processPaymentUrl — endpoint on your server to accept/process Apple Pay tokens (gateway/tokenization on your backend).
• googleProcessPaymentUrl — endpoint on your server to accept/process Google Pay tokens.
• googleGateway — gateway parameter to pass into Google tokenization (if using a gateway such as Stripe you may set gateway: 'stripe').
• googleGatewayMerchantId — gateway merchant id used by your gateway.
• googleMerchantId — your Google Merchant ID (sometimes used instead of gateway fields in advanced setups).

These values are forwarded to the underlying web-native flows (ApplePaySession/Google Pay SDK) so your server can perform the required merchant validation and processing. See the example test_apps/JS_test_app/landing.js for how to pass demo endpoints for local testing.

Example

See example/ for a full integration example.

License

MIT

Author

The Learmond Corporation