--- title: "MobilePay Flutter Component" description: "Add MobilePay to your Components integration." url: "https://docs.adyen.com/payment-methods/mobilepay/flutter-component" source_url: "https://docs.adyen.com/payment-methods/mobilepay/flutter-component.md" canonical: "https://docs.adyen.com/payment-methods/mobilepay/flutter-component" last_modified: "2026-05-23T12:56:20+02:00" language: "en" --- # MobilePay Flutter Component Add MobilePay to your Components integration. [View source](/payment-methods/mobilepay/flutter-component.md) You can add MobilePay to your existing integration. The following instructions show only what you must add to your integration specifically for MobilePay. If an instruction on this page corresponds with a step in the main integration guide, it includes a link to corresponding step of the main integration guide. The additions you must make depends on the [server-side flow](/online-payments/build-your-integration) that your integration uses: ## Sessions flow Component ## Requirements | Requirement | Description | | | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | | **Integration type** | Make sure that you have an existing Sessions flow [Flutter Components integration](/online-payments/build-your-integration/advanced-flow?platform=Flutter\&integration=Drop-in). | | | **Checkout API** | Make sure that you use Checkout API v68 or later. | | | **Redirect handling** | Make sure that your existing integration is set up to [handle the redirect](/online-payments/build-your-integration/sessions-flow?platform=Flutter\&integration=Components#handle-the-redirect). `action.type`: **redirect** | | | **Setup steps** | Before you begin, [add MobilePay in your Customer Area](/payment-methods/add-payment-methods). | | ### Additional Parameters Sessions Request ## Add additional parameters to your /sessions request You do not need to add any parameters when you [create a payment session](/online-payments/build-your-integration/sessions-flow?platform=Flutter\&integration=Components#create-a-payment-session). ### Additional Configuration ## Add additional configuration for MobilePay You do not need to add any configuration parameters for MobilePay. ## Test and go live MobilePay cannot be tested in the test environment. You must make penny test (low-amount) payments in the live environment. 1. Submit a request for MobilePay in your [live Customer Area](https://ca-live.adyen.com/). 2. After MobilePay is added to your live Customer Area, do the following for each test payment: 1. Make a MobilePay payment for a low amount. 2. Get the [**AUTHORISATION** webhook](/development-resources/webhooks/webhook-types/#default-event-codes) on your server. It includes the status of the payment. 3. In your live Customer Area, go to **Transactions** > **Payments** to see the status of the payment. ### Test payouts to MobilePay wallets The MobilePay payout feature is experimental, and supported only with the `/payments` endpoint. Do the following to test MobilePay payouts: 1. Get a test app following the instructions in the [VippsMobilePay documentation](https://developer.vippsmobilepay.com/docs/knowledge-base/test-environment/#app-installation). When prompted for a phone number and NIN (national identity number), use one of the following sets: * NIN 0407640091\ Phone +45 22105837 * NIN 0702860109\ Phone +45 34817154 * NIN 0111500196\ Phone +45 73920021 2. Test your integration end-to-end: * Make a test payment that generates a payout token, using the Vipps MobilePay test app to simulate the customer side. * Check that you receive and process the recurring lifecycle webhook. * Make a [Transfers API](https://docs.adyen.com/api-explorer/transfers/latest/overview) request using the token that you receive in the webhook. ## Advanced flow Component ### Before-You-Begin ## Requirements | Requirement | Description | | | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | | **Integration type** | Make sure that you have an existing Advanced flow [Flutter Components integration](/online-payments/build-your-integration/advanced-flow?platform=Flutter\&integration=Drop-in). | | | **Redirect handling** | Make sure that your existing integration is set up to [handle the redirect](/online-payments/build-your-integration/advanced-flow/?platform=Flutter\&integration=Components#handle-the-redirect). `action.type`: **redirect** | | | **Setup steps** | Before you begin, [add MobilePay in your Customer Area](/payment-methods/add-payment-methods). | | ### Add-Configuration ## Add additional configuration for MobilePay You do not need to add any configuration parameters for MobilePay. ### Add-Parameters-Payments-Request ## Add additional parameters to your /payments request You do not need to add any parameters to the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request when you [make a payment](/online-payments/build-your-integration/advanced-flow/?platform=Flutter\&integration=Components#make-a-payment), unless you make a payment to generate a token for future payouts to MobilePay wallets. #### curl ```bash curl https://checkout-test.adyen.com/v68/payments \ -H 'x-api-key: ADYEN_API_KEY' \ -H 'content-type: application/json' \ -d '{ "merchantAccount":"YOUR_MERCHANT_ACCOUNT", "reference":"YOUR_ORDER_NUMBER", "amount":{ "currency":"", "value":1000 }, "paymentMethod":{ "type":"" }, "returnUrl":"", "{hint:Required when creating a payout token. Optional for normal payment - include for a better shopper experience.}telephoneNumber{/hint}": "+4512345678", "{hint:Required when creating a payout token.}shopperReference{/hint}": "YOUR_SHOPPER_REFERENCE", "{hint:Required when creating a payout token.}enablePayOut{/hint}": "true" }' ``` #### Java ```java // Set ADYEN_API_KEY with the API key from the Customer Area. // Change to Environment.LIVE and add the Live URL prefix when you are ready to accept live payments. Client client = new Client("ADYEN_API_KEY", Environment.TEST); Checkout checkout = new Checkout(client); PaymentsRequest paymentsRequest = new PaymentsRequest(); String merchantAccount = "YOUR_MERCHANT_ACCOUNT"; paymentsRequest.setMerchantAccount(merchantAccount); Amount amount = new Amount(); amount.setCurrency(""); amount.setValue(1000L); paymentsRequest.setAmount(amount); DefaultPaymentMethodDetails paymentMethodDetails = new DefaultPaymentMethodDetails(); paymentMethodDetails.setType(""); paymentsRequest.setPaymentMethod(paymentMethodDetails); paymentsRequest.setTelephoneNumber("+4512345678"); paymentsRequest.setReference("YOUR_ORDER_NUMBER"); paymentsRequest.setReturnUrl(""); PaymentsResponse paymentsResponse = checkout.payments(paymentsRequest); ``` #### PHP ```php // Set your X-API-KEY with the API key from the Customer Area. $client = new \Adyen\Client(); $client->setXApiKey("ADYEN_API_KEY"); $service = new \Adyen\Service\Checkout($client); $params = array( "amount" => array( "currency" => "", "value" => 1000 ), "reference" => "YOUR_ORDER_NUMBER", "paymentMethod" => array( "type" => "" ), "telephoneNumber" => "+4512345678", "returnUrl" => "", "merchantAccount" => "YOUR_MERCHANT_ACCOUNT" ); $result = $service->payments($params); ``` #### C\# ```cs // Set your X-API-KEY with the API key from the Customer Area. var client = new Client ("ADYEN_API_KEY", Environment.Test); var checkout = new Checkout(client); var amount = new Adyen.Model.Checkout.Amount("", 1000); var details = new Adyen.Model.Checkout.DefaultPaymentMethodDetails{ Type = "" }; var paymentsRequest = new Adyen.Model.Checkout.PaymentRequest { Reference = "YOUR_ORDER_NUMBER", Amount = amount, TelephoneNumber = "+4512345678", ReturnUrl = @"", MerchantAccount = "YOUR_MERCHANT_ACCOUNT", PaymentMethod = details }; var paymentResponse = checkout.Payments(paymentsRequest); ``` #### NodeJS (JavaScript) ```js // Adyen Node API Library v16.1.0 // Require the parts of the module you want to use const { Client, CheckoutAPI } = require('@adyen/api-library'); // Initialize the client object const client = new Client({apiKey: "YOUR_X_API_KEY", environment: "TEST"}); // Create the request object const paymentRequest = { merchantAccount: "YOUR_MERCHANT_ACCOUNT", reference: "YOUR_ORDER_NUMBER", amount: { currency: "", value: 1000 }, paymentMethod: { type: "" }, telephoneNumber: "+4512345678", returnUrl: "" } // Make the request const checkoutAPI = new CheckoutAPI(client); const response = checkoutAPI.PaymentsApi.payments(paymentRequest, { idempotencyKey: "UUID" }); ``` #### Python ```py # Adyen Python API Library v12.0.0 import Adyen adyen = Adyen.Adyen() adyen.client.xapikey = "YOUR_X_API_KEY" adyen.client.platform = "test" # The environment to use library in. json_request = { "merchantAccount": "YOUR_MERCHANT_ACCOUNT", "reference": "YOUR_ORDER_NUMBER", "amount": { "currency": "", "value": 1000 }, "paymentMethod": { "type": "" }, "telephoneNumber": "+4512345678", "returnUrl": "" } result = adyen.checkout.payments_api.payments(request=json_request, idempotency_key="UUID") ``` #### Ruby ```rb # Adyen Ruby API Library v9.1.0 require "adyen-ruby-api-library" adyen = Adyen::Client.new adyen.api_key = 'YOUR_X_API_KEY' adyen.env = :test # Set to "live" for live environment request_body = { :merchantAccount => 'YOUR_MERCHANT_ACCOUNT', :reference => 'YOUR_ORDER_NUMBER', :amount => { :currency => '', :value => 1000 }, :paymentMethod => { :type => '' }, :telephoneNumber => '+4512345678', :returnUrl => '' } result = adyen.checkout.payments_api.payments(request_body, headers: { 'Idempotency-Key' => 'UUID' }) ``` ### Payment with payout token creation To make a MobilePay payment and generate a token for future [payouts to MobilePay wallets](/payment-methods/mobilepay/#payouts): 1. Make sure that you have [set up the recurring lifecycle webhook](/payment-methods/mobilepay#payouts). 2. Make a [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request as usual, but include the parameters to create a token: * `telephoneNumber` * `shopperReference` * `enablePayout` set to **true** 3. When you receive the recurring lifecycle webhook for the payment, save the `storedPaymentMethodId` (the token) for your customer, identified by the `shopperReference`. **Webhook containing the payout token** ```bash { "createdAt" : "2025-01-29T20:50:37+01:00", "environment" : "test", "type" : "recurring.token.created", "data" : { "merchantAccount" : "YOUR_MERCHANT_ACCOUNT", "operation" : "created", "shopperReference" : "YOUR_SHOPPER_REFERENCE", "storedPaymentMethodId" : "NFX5L4DL4J2ZTL65", "type" : "visa_mobilepay" }, "eventId" : "JF89C8JSHVTFWR82" } ``` 4. When you want to [make a payout](/payouts/payout-service/pay-out-to-cards/card-payout-request/?tab=one-off-request-token_2) to the shopper's MobilePay wallet, send a POST [/transfers](https://docs.adyen.com/api-explorer/transfers/latest/post/transfers) request specifying the payout token in the [counterparty.card.cardIdentification](https://docs.adyen.com/api-explorer/transfers/latest/post/transfers#request-counterparty-card-cardIdentification) field. ## Test and go live MobilePay cannot be tested in the test environment. You must make penny test (low-amount) payments in the live environment. 1. Submit a request for MobilePay in your [live Customer Area](https://ca-live.adyen.com/). 2. After MobilePay is added to your live Customer Area, do the following for each test payment: 1. Make a MobilePay payment for a low amount. 2. Get the [**AUTHORISATION** webhook](/development-resources/webhooks/webhook-types/#default-event-codes) on your server. It includes the status of the payment. 3. In your live Customer Area, go to **Transactions** > **Payments** to see the status of the payment. ### Test payouts to MobilePay wallets The MobilePay payout feature is experimental, and supported only with the `/payments` endpoint. Do the following to test MobilePay payouts: 1. Get a test app following the instructions in the [VippsMobilePay documentation](https://developer.vippsmobilepay.com/docs/knowledge-base/test-environment/#app-installation). When prompted for a phone number and NIN (national identity number), use one of the following sets: * NIN 0407640091\ Phone +45 22105837 * NIN 0702860109\ Phone +45 34817154 * NIN 0111500196\ Phone +45 73920021 2. Test your integration end-to-end: * Make a test payment that generates a payout token, using the Vipps MobilePay test app to simulate the customer side. * Check that you receive and process the recurring lifecycle webhook. * Make a [Transfers API](https://docs.adyen.com/api-explorer/transfers/latest/overview) request using the token that you receive in the webhook.