Plexy
Pay APIGate APIDashboard
Pay APIGate APIDashboard
  1. Flutter
  • Overview
  • Authorization
  • Webhooks
  • API Errors
  • Test Scenarios
  • Ecommerce Plugins
  • API
    • Payments
      • Overview
      • Payment Links
        • Create Payment Link
        • List Payment Links
        • Retrieve Payment Link by Order Reference
        • Cancel Payment Link
        • Retrieve Payment Link
        • Update Payment Link Expiration
        • Retrieve Payment Links Statistics
      • Reccurent Payments
        • Create Merchant-Initiated Payment
      • Direct Payments
        • Get Keys
        • Create Host-to-Host Payment
      • Transaction Management
        • Find Transaction's History by ID
        • Find Transaction by Payment Link ID
        • Find Transaction by ID
        • Find Transaction by Order reference
      • Payment Management
        • Cancel Payment
        • Capture Payment
        • Process Refund
      • Split Requests
        • Create
        • List
        • Update
        • Get By Id
        • Delete
      • Settlement Payment Order
        • Create
        • Get by id
        • List
    • Payouts
      • Retrieve Payout Transactions
      • Process Payout
      • Save Card for Payouts
    • Customers
      • Get Customer's Card Tokens
      • List Customers
      • Create Customer
      • Get Customer by ID
      • Get Customer's Transactions
    • Merchants
      • Payment Beneficiary
        • Create
        • Update
        • Gey By Id
        • List
        • Transfer from beneficiary balance to merchant balance
        • Create manual settlement for beneficiary
      • Retrieve Merchant's Details
  • Client SDK
    • Server flow
      • Advanced server flow
      • Session server flow
    • Web
      • Web Drop-in
      • Web Components
    • Flutter
      • Flutter Drop-in
      • Flutter Components
  • Schemas
    • Schemas
      • response.TransactionList
      • entity.SplitRequest
      • entity.PaymentBeneficiary
      • request.CreatePaymentBeneficiary
      • entity.SettlementPaymentOrder
      • entity.PayoutRequest
      • entity.PayoutRequestRowData
      • command.HandleThreeDResult
      • domain.Report
      • entity.CardSaveSessionCustomer
      • entity.Permission
      • entity.UserProfile
      • entity.UserRole
      • errors.Message
      • errors.Source
      • errors.Type
      • git_plexypay_com_ecom_back_api_internal_domain_view.Page-domain_Report
      • git_plexypay_com_ecom_back_api_internal_domain_view.Page-entity_UserProfile
      • git_plexypay_com_ecom_back_api_internal_platform_errors.Code
      • models.CSVApiRequest
      • models.CreateBussinessDetails
      • models.KeyResponse
      • models.OnboardingRequest
      • models.Transaction
      • paymentcore.Address
      • paymentcore.CustomerDetails
      • request.AuthorizePayment
      • request.BrowserDetails
      • request.CardData
      • request.ChangeUserRole
      • request.ContinueThreeDS
      • request.CreateCardSaveSession
      • request.CreateInviteSession
      • request.CreatePaymentLink
      • request.CreatePaymentLinkMetadata
      • request.HandlePayout
      • request.MerchantInitiatedPayment
      • request.PasswordRequest
      • request.Recurring
      • request.RefundPayment
      • request.SaveCard
      • request.SaveOneCustomer
      • request.TwoStepAuthorizePayment
      • request.UpdateMerchantSettingsRequest
      • request.UpdatePaymentLink
      • response.AcquirerResponseThreeDSecure
      • response.AuthorizeAndCapturePayment
      • response.AuthorizePayment
      • response.CancelPaymentResponse
      • response.CapturePaymentResponse
      • response.ContinueThreeDS
      • response.Currency
      • response.Customer
      • response.CustomerTransaction
      • response.CustomerTransactions
      • response.Customers
      • response.Error
      • response.Merchant
      • response.MerchantInitiatedPayment
      • response.MerchantSettings
      • response.PaymentLink
      • response.PaymentLinkInfo
      • response.PaymentLinkMetadata
      • response.PaymentLinksInfo
      • response.PaymentLinksStatistics
      • response.PaymentLinksStatisticsItem
      • response.Payout
      • response.Permission
      • response.RefundPaymentResponse
      • response.Report
      • response.SavedCard
      • response.Session
      • response.Settlement
      • response.SettlementTransaction
      • response.Store
      • response.Stores
      • response.Transaction
      • response.TransactionDetails
      • response.TransactionEvents
      • response.TransactionHistoryEvent
      • response.TransactionHistoryEventData
      • response.TransactionResponse
      • response.TransactionWebhookDetails
      • response.Transactions
      • response.UpdateMerchantSettingsResponse
      • response.UserProfile
      • value.PaymentMethod
    • receipt
    • Error
    • DecimalAmount
    • ProductType
    • ProductCategory
    • Product
    • Order
    • AgentBalance
    • AgentDeposit
    • TopupRequest
    • CreateOrderRequest
Pay APIGate APIDashboard
Pay APIGate APIDashboard
  1. Flutter

Flutter Drop-in

Render a list of available payment methods anywhere in your app.

Supported payment methods:#

Cards, Apple pay, Google pay.

Features#

Low development time to integrate payment methods
UI styling customization for the list of payment methods
Adding payment methods to the list requires no extra development time
3D Secure 2 support built in
Drop-in is our pre-built UI solution for accepting payments in your app. Drop-in shows all payment methods as a list, in the same block.

Requirements#

Get an overview of the steps needed to accept live payments.#

Before you begin to integrate, make sure you have followed the Get started with Plexy guide to:
1.
Get your API key
2.
Get your client key
3.
Set up webhooks to know the payment outcome

Required versions#

iOS 12 or later.
Android 5.0 or later.
Kotlin 1.8 or later.
Gradle v8 or later.

Add Drop-in to your app#

Add different configurations for iOS and Android, 'Drop-in', and some payment methods.

1. Add platform-specific configurations#

iOS
Android
1.
Add the return URL handler to your AppDelegate.swift file:
2.
In your app, add a custom URL scheme that matches the returnUrl you use when creating the payment session.
3.
For voucher payment methods, add photo library usage descriptions to the Info.plist file.
4.
For Apple Pay, do the following:
Complete the steps to set up Apple Pay with your own certificate.
In your Runner target, add Apple Pay as a capability.
In your Runner target, enter your merchant ID.

2. Create a configuration object#

Create a configuration object with the following properties:
Parameter nameRequiredDescription
environmentUse test. When you are ready to accept live payments, change the value to one of our live environments.
clientKeyA public key linked to your API credential, used for client-side authentication.
countryCodeThe shopper's country/region. This is used to filter the list of available payment methods to your shopper.
shopperLocaleBy default, this is set to kk-KZ. To change the language, set this to the shopper's language and country code. If you included shopperLocale in your /sessions request, Drop-in uses that one.
amountThe currency and value of the payment, in minor units. This is used to filter the list of available payment methods to your shopper
For example:
To add configuration for specific payment methods, create an additional configuration object. For example, for Apple Pay:

3. Initialize Drop-in#

Call the create method, passing the following:
Parameter nameRequiredDescription
sessionIdsessionResponse.id: the id from the /sessions response.
sessionDatasessionData: the sessionData from the /sessions response.
configurationThe configuration object you created.

Call the create method#

4. Show Drop-in in your app#

Call startDropin to show the Drop-in, passing the following:
Parameter nameRequiredDescription
dropInConfigurationThe configuration object you created.
checkoutThe sessionCheckout you created.

Show Drop-in#

Drop-in handles the payment flow.

5. Dismiss Drop-in (optional)#

You can optionally implement the method to dismiss Drop-in, if this is required for your app. For example, if you want to stop showing the Drop-in UI when the shopper abandons your payment page for an extended period of time.
Use the global PlexyCheckout.sessions.stopDropIn(); method to dismiss Drop-in. If you do not implement this method, Drop-in is automatically dismissed when the payment flow ends.
If the shopper has been redirected to a third-party app, for example to authorize the payment on an issuer-hosted website, they can still complete the payment even after you dismiss the Drop-in UI.

6. Handle the result#

When the payment flow is completed, you get one of the following objects:
ObjectDescription
PaymentSessionFinishedThe payment was successfully submitted. Contains a resultCode with the status of the payment.
PaymentCancelledByUserThe payment was canceled by the user.
PaymentErrorThe payment encountered an error.
Handle the object and inform the shopper.

Get the payment outcome#

After Drop-in finishes the payment flow, you can show the shopper the current payment status. Plexy sends a webhook with the outcome of the payment.

Inform the shopper#

Use the resultCode to show the shopper the current payment status. This synchronous response doesn't give you the final outcome of the payment. You get the final payment status in a webhook that you use to update your order management system.
Modified at 2025-10-20 10:55:52
Previous
Flutter
Next
Flutter Components
Built with