--- title: "KakaoPay React Component" description: "Add KakaoPay to your Components integration." url: "https://docs.adyen.com/payment-methods/kakaopay/react-native-component" source_url: "https://docs.adyen.com/payment-methods/kakaopay/react-native-component.md" canonical: "https://docs.adyen.com/payment-methods/kakaopay/react-native-component" last_modified: "2026-05-08T17:09:18+02:00" language: "en" --- # KakaoPay React Component Add KakaoPay to your Components integration. You can add KakaoPay to your existing integration. The following instructions show only what you must add to your integration specifically for KakaoPay. 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 ### Not Available React Native Components do not support Sessions flow. ## Advanced flow Component ### Before-You-Begin ## Requirements | Requirement | Description | | | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | - | | **Integration type** | Make sure that you have an existing Advanced flow [React Native Components integration](/online-payments/build-your-integration/advanced-flow?platform=React%2BNative\&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=React%2BNative\&integration=Components#handle-the-redirect). `action.type`: **redirect** | | | **Setup steps** | Before you begin, [add KakaoPay in your Customer Area](/payment-methods/add-payment-methods). | | ### Add-Configuration ## Add additional configuration for KakaoPay You do not need to add any configuration parameters for KakaoPay. ### 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=React%2BNative\&integration=Components#make-a-payment). ### Recurring ## Recurring payments KakaoPay supports recurring transactions. To make recurring transactions, you need to: 1. [Create a shopper token](#create-a-token). 2. [Use the token to make future payments for the shopper](#make-payment-with-token). ### Create a token To create a token, include in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: * `storePaymentMethod`: **true** * [shopperReference](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-shopperReference): Your unique identifier for the shopper. This triggers the [recurring flow](/payment-methods/kakaopay?tab=recurring_2), where the shopper logs in to their Kakao account, then confirms the recurring transaction. When the payment has been settled, you receive a [recurring.token.created](https://docs.adyen.com/api-explorer/Tokenization-webhooks/latest/post/recurring.token.created) [webhook](/development-resources/webhooks) containing: * `type`: **recurring.token.created** * `shopperReference`: your unique identifier for the shopper. * `eventId`: the `pspReference` of the initial payment. * `storedPaymentMethodId`: the token that you need to make recurring payments for this shopper. Make sure that your server is able to receive the [Recurring tokens life cycle events](/development-resources/webhooks/webhook-types/#other-webhooks) webhook. You can [set up this webhook in your Customer Area](/development-resources/webhooks/#set-up-webhooks-in-your-customer-area). ### Make a payment with a token To make a payment with the token, include in your [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: * `paymentMethod.storedPaymentMethodId`: The `storedPaymentMethodId` from the [recurring.token.created](https://docs.adyen.com/api-explorer/Tokenization-webhooks/latest/post/recurring.token.created) webhook. You can also get this value using the [/listRecurringDetails](https://docs.adyen.com/api-explorer/Recurring/latest/post/listRecurringDetails) endpoint. * `shopperReference`: The unique shopper identifier that you specified when creating the token. * `shopperInteraction`: **ContAuth** * `recurringProcessingModel`: Use **Subscription** for a series of transactions following a fixed time interval or **UnscheduledCardOnFile** for contracts with non-fixed time interval. #### curl ```bash curl https://checkout-test.adyen.com/checkout/v68/payments \ -H 'x-api-key: ADYEN_API_KEY' \ -H 'content-type: application/json' \ -d '{ "amount":{ "value":1000, "currency":"KRW" }, "paymentMethod":{ "type":"kakaopay", "storedPaymentMethodId":"7219687191761347" }, "reference":"YOUR_ORDER_NUMBER", "merchantAccount":"YOUR_MERCHANT_ACCOUNT", "shopperReference":"YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j", "shopperInteraction":"ContAuth", "recurringProcessingModel": "Subscription" }' ``` #### 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("KRW"); amount.setValue(15000L); paymentsRequest.setAmount(amount); DefaultPaymentMethodDetails paymentMethodDetails = new DefaultPaymentMethodDetails(); paymentMethodDetails.setStoredPaymentMethodId("7219687191761347"); paymentMethodDetails.setType("kakaopay"); paymentsRequest.setPaymentMethod(paymentMethodDetails); paymentsRequest.setReference("YOUR_ORDER_NUMBER"); paymentsRequest.setReturnUrl("https://your-company.com/checkout?shopperOrder=12xy.."); paymentsRequest.setShopperReference("YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j"); paymentsRequest.setShopperInteraction("ContAuth"); paymentsRequest.setRecurringProcessingModel("Subscription"); 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" => "KRW", "value" => 1000 ), "reference" => "YOUR_ORDER_NUMBER", "paymentMethod" => array( "type" => "kakaopay", "storedPaymentMethodId" => "7219687191761347" ), "returnUrl" => "https://your-company.com/checkout?shopperOrder=12xy..", "shopperReference" => "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j", "recurringProcessingModel" => "Subscription", "shopperInteraction" => "ContAuth", "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("KRW", 1000); var details = new Adyen.Model.Checkout.DefaultPaymentMethodDetails{ Type = "kakaopay", StoredPaymentMethodId = "7219687191761347" }; var paymentsRequest = new Adyen.Model.Checkout.PaymentRequest { Reference = "YOUR_ORDER_NUMBER", Amount = amount, ReturnUrl = @"https://your-company.com/checkout?shopperOrder=12xy..", MerchantAccount = "YOUR_MERCHANT_ACCOUNT", ShopperReference = "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j", RecurringProcessingModel = Adyen.Model.Checkout.PaymentRequest.RecurringProcessingModelEnum.Subscription, ShopperInteraction = Adyen.Model.Checkout.PaymentRequest.ShopperInteractionEnum.ContAuth, 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 = { amount: { value: 1000, currency: "KRW" }, paymentMethod: { type: "kakaopay", storedPaymentMethodId: "7219687191761347" }, reference: "YOUR_ORDER_NUMBER", merchantAccount: "YOUR_MERCHANT_ACCOUNT", shopperReference: "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j", shopperInteraction: "ContAuth", recurringProcessingModel: "Subscription" } // 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 = { "amount": { "value": 1000, "currency": "KRW" }, "paymentMethod": { "type": "kakaopay", "storedPaymentMethodId": "7219687191761347" }, "reference": "YOUR_ORDER_NUMBER", "merchantAccount": "YOUR_MERCHANT_ACCOUNT", "shopperReference": "YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j", "shopperInteraction": "ContAuth", "recurringProcessingModel": "Subscription" } 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 = { :amount => { :value => 1000, :currency => 'KRW' }, :paymentMethod => { :type => 'kakaopay', :storedPaymentMethodId => '7219687191761347' }, :reference => 'YOUR_ORDER_NUMBER', :merchantAccount => 'YOUR_MERCHANT_ACCOUNT', :shopperReference => 'YOUR_UNIQUE_SHOPPER_ID_IOfW3k9G2PvXFu2j', :shopperInteraction => 'ContAuth', :recurringProcessingModel => 'Subscription' } result = adyen.checkout.payments_api.payments(request_body, headers: { 'Idempotency-Key' => 'UUID' }) ``` ## Test and go live To test successful KakaoPay live payments, you need to use a real mobile number registered with a [KakaoPay account](https://www.kakaopay.com). If you are encountering issues with testing KakaoPay payments, contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other). Check the status of KakaoPay test payments in your [Customer Area](https://ca-test.adyen.com/) > **Transactions** > **Payments**. Before you can accept live KakaoPay payments, you need to submit a request for KakaoPay in your [live Customer Area](https://ca-live.adyen.com/).