Flutter Hyperswitch is a package designed to facilitate payment operations within Flutter applications, providing seamless integration with payment gateways and offering a variety of customization options.
- Initiate Payment Sheet: Initialize the payment sheet with customizable parameters.
- Present Payment Sheet: Display the payment sheet within your Flutter app.
To use this package in your Flutter project, follow these steps:
Add flutter_hyperswitch to your pubspec.yaml file:
yamldependencies: flutter_hyperswitch: ^version_number
Then, run:
dartflutter pub get
Import the Package
dartimport 'package:flutter_hyperswitch/flutter_hyperswitch.dart'; final _hyper = FlutterHyperswitch();
Initialize the payment sheet with required parameters:
dart//Set up HyperConfig parameters _hyper.init(HyperConfig(publishableKey: 'your_publishable_key')); // Set up the payment parameters PaymentSheetParams params = PaymentSheetParams( clientSecret: 'your_client_secret', // Add other required parameters ); // Initialize the payment sheet Map<String, dynamic>? result = await _hyper.initPaymentSession(params);
Present the payment sheet within your app:
dartMap<String, dynamic>? result = await _hyper.presentPaymentSheet();
You'll need to configure your backend and obtain necessary keys/secrets for successful payment processing. Please refer to our documentation Node SDK Reference for detailed setup instructions.
In the example project, you can also create a simple mock server using the following commands:
bashcd server npm i npm start
For detailed usage instructions, examples, and API reference, visit the documentation.
If you encounter any issues or would like to contribute, feel free to reach out us here.
<style> pre { background-color: transparent; } button { all: unset; cursor: pointer; } button:focus { outline: revert; } .bg-black { background-color: rgba(0,0,0,1); } .rounded-md { border-radius: 0.375rem; } .flex { display: flex; } .relative { position: relative; } .justify-between { justify-content: space-between; } .items-center { align-items: center; } .text-gray-200 { color: rgba(217,217,227,1); } .text-xs { font-size: .75rem; line-height: 1rem; } .font-sans { font-family: Söhne, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } .py-2 { padding-bottom: 0.5rem; padding-top: 0.5rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .bg-gray-800 { background-color: rgba(52,53,65,1); } .rounded-t-md { border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem; } .p-4 { padding: 1rem; } .overflow-y-auto { overflow-y: auto; } </style>