--- title: "Clearpay React Native Drop-in" description: "Add Clearpay to your Drop-in integration." url: "https://docs.adyen.com/payment-methods/clearpay/react-native-drop-in" source_url: "https://docs.adyen.com/payment-methods/clearpay/react-native-drop-in.md" canonical: "https://docs.adyen.com/payment-methods/clearpay/react-native-drop-in" last_modified: "2026-05-22T12:56:54+02:00" language: "en" --- # Clearpay React Native Drop-in Add Clearpay to your Drop-in integration. [View source](/payment-methods/clearpay/react-native-drop-in.md) You can add Clearpay to your existing integration. The following instructions show only what you must add to your integration specifically for Clearpay. 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 Drop-in ### Before-You-Begin ## Requirements | Requirement | Description | | | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | | **Integration type** | Make sure that you have an existing Sessions flow [React Native Drop-in integration](/online-payments/build-your-integration/advanced-flow?platform=React%2BNative\&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=React%2BNative\&integration=Drop-in#handle-the-redirect). `action.type`: **redirect** | | | **Setup steps** | Before you begin, [add Clearpay in your Customer Area](/payment-methods/add-payment-methods). | | ### Add-Parameters-Sessions-Request ## Add additional parameters to your /sessions request When you [create a payment session](/online-payments/build-your-integration/sessions-flow?platform=React%2BNative\&integration=Drop-in#create-a-payment-session), add the following parameters: | Parameter | Required | Description | | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | | [shopperName](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-shopperName) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's full name. | | [shopperEmail](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-shopperEmail) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's email address. | | [shopperReference](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-shopperReference) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | A unique reference to identify the shopper. Minimum length: three characters. | | [countryCode](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-countryCode) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's country/region. | | [billingAddress](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-billingAddress) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The postal address to be included on the invoice. | | [deliveryAddress](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-deliveryAddress) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The postal address where the goods will be shipped. | | [lineItems](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-lineItems) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Price and product information about the purchased items.   | | [telephoneNumber](https://docs.adyen.com/api-explorer/Checkout/latest/post/sessions#request-telephoneNumber) | | The shopper's telephone number, if provided. | **Example /sessions request** ```bash curl https://checkout-test.adyen.com/v71/sessions \ -H 'x-API-key: ADYEN_API_KEY' \ -H 'Idempotency-Key: YOUR_IDEMPOTENCY_KEY' \ -H 'content-type: application/json' \ -X POST -d '{ "amount":{ "value":1000, "currency":"GBP" }, "shopperName":{ "firstName":"Simon", "lastName":"Hopper" }, "shopperEmail":"s.hopper@example.com", "shopperReference":"YOUR_UNIQUE_SHOPPER_ID", "reference":"YOUR_ORDER_REFERENCE", "merchantAccount":"ADYEN_MERCHANT_ACCOUNT", "returnUrl":"https://your-company.example.com/checkout?shopperOrder=12xy..", "countryCode":"GB", "telephoneNumber":"+44 203 936 4029", "billingAddress":{ "city":"London", "country":"GB", "houseNumberOrName":"8-10", "postalCode":"SW1H 0BG", "stateOrProvince":"Westminster", "street":"Broadway" }, "deliveryAddress":{ "city":"London", "country":"GB", "houseNumberOrName":"8-10", "postalCode":"SW1H 0BG", "stateOrProvince":"Westminster", "street":"Broadway" }, "lineItems":[ { "description":"Shoes", "quantity":"1", "amountIncludingTax":"400", "amountExcludingTax": "331", "taxAmount": "69", "id":"Item #1" }, { "description":"Socks", "quantity":"2", "amountIncludingTax":"300", "amountExcludingTax": "248", "taxAmount": "52", "id":"Item #2" } ] }' ``` ### Add-Configuration ## Add additional configuration for Clearpay You do not need to add any configuration parameters for Clearpay. ### Drop-In-Capture ## Capture the payment Depending on your merchant account configuration, Clearpay payments are captured automatically after authorisation, or manually captured. If you prefer to capture the payment after the goods have been sent, you need to set up a [capture delay](/online-payments/capture#delayed-automatic-capture) or use [manual capture](/online-payments/capture#capture-a-payment). To partially capture a payment, you also need to use manual capture. Clearpay payments have to be captured within 13 days after authorisation. During authorisation, the shopper is charged for the first installment. If the payment is not captured within 13 days, before the second installment, Clearpay cancels the payment and refunds the first installment to the shopper. For testing purposes, Clearpay authorisations expire in one day. When you use manual capture, you need to capture test Clearpay payments within one day after authorisation. ### Full or partial manual captures When you use manual capture, in your [/payments/{paymentPspReference}/captures](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments/\(paymentPspReference\)/captures) request specify: * [amount.value](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments/\(paymentPspReference\)/captures#request-amount-value): the full or partial amount that the shopper should pay. * [lineItems](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments/\(paymentPspReference\)/captures#request-lineItems): (optional) price and product information for the items that the shopper should pay for. Any unclaimed amount that is left over after partially capturing a payment is automatically cancelled. When your account is enabled for *multiple* partial captures, the unclaimed amount after an initial capture is not automatically cancelled. To set up multiple partial captures, contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other). Multiple partial captures will create a new invoice for each capture. ### Drop-In-Refunds-And-Cancellations ## Refunds and cancellations If a payment has not yet been captured, you can [cancel](/online-payments/cancel) it. If a payment has already been captured and you want to return the funds to the shopper, you need to [refund](/online-payments/refund) the payment. ### Full or partial refunds To fully or partially refund a payment, in your [/payments/{paymentPspReference}/refunds](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments/\(paymentPspReference\)/refunds) request specify: * [amount.value](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments/\(paymentPspReference\)/refunds#request-amount-value): the full or partial amount to be refunded to the shopper. * [lineItems](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments/\(paymentPspReference\)/refunds#request-lineItems): (optional) price and product information about the refunded items. ### Drop-In-Discounts ## Discounts To offer discounts, your payment request must include the negative amount to be added to the original price. The following example shows how to specify a discount of 1 GBP on Item #2: ```json { "amount":{ "value":800, "currency":"GBP" }, ... "lineItems":[ { "description":"Test Clearpay 1", "quantity":"1", "amountIncludingTax":"400", "id":"Item #1" }, { "description":"Test Clearpay 2", "quantity":"2", "amountIncludingTax":"300", "id":"Item #2" } { "description":"Discount", "quantity":"2", "amountIncludingTax":"-100", "id":"Item #2 Discount" } ] } ``` ## Test and go live To test Clearpay payments, you need to use the Clearpay sandbox environment and create a test Clearpay shopper account. Clearpay offers separate sandbox environments and test details based on country and region.\ Follow the links to the Clearpay developer documentation for more details. | Clearpay developer documentation | Description | | -------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | | [Test Environment (Sandbox)](https://developers.clearpay.co.uk/v-2/messaging-implementation#sandbox-testing) | More information about how to get access to the sandbox environment. | | [Customer Accounts](https://developers.clearpay.co.uk/merchant-portal) | Learn how to create a test Clearpay shopper account. | | [Test cards](https://developers.clearpay.co.uk/v-2/guides/api-development/test-environments#test-credit-cards) | List of available Clearpay test cards to test different payment flows. | In the Clearpay sandbox environment, you will see Adyen as the merchant name. When you go live, this will change to your own merchant name. When you have set up your sandbox environment, and created your Clearpay test shopper account, you can make a test payment. You can check the status of test payments in your [Customer Area](https://ca-test.adyen.com/) > **Transactions** > **Payments**. Before you can accept live Clearpay payments, you need to [submit a request for Clearpay](/payment-methods/add-payment-methods) in your [live Customer Area](https://ca-live.adyen.com/). ## Advanced flow Drop-in ### Before-You-Begin ## Requirements | Requirement | Description | | | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | | **Integration type** | Make sure that you have an existing Advanced flow [React Native Drop-in 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=Drop-in#handle-the-redirect). `action.type`: **redirect** | | | **Setup steps** | Before you begin, [add Clearpay in your Customer Area](/payment-methods/add-payment-methods). | | ### Add-Configuration ## Add additional configuration for Clearpay You do not need to add any configuration parameters for Clearpay. ### Add-Parameters-Payments-Request ## Add additional parameters to your /payments request When you [make a payment](/online-payments/build-your-integration/advanced-flow/?platform=React%2BNative\&integration=Drop-in#make-a-payment), add the following parameters to the [/payments](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments) request: | Parameter | Required | Description | | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | | [shopperName](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-shopperName) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's full name. | | [shopperEmail](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-shopperEmail) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's email address. | | [shopperReference](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-shopperReference) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | A unique reference to identify the shopper. Minimum length: three characters. | | [countryCode](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-countryCode) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The shopper's country/region. | | [billingAddress](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-billingAddress) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The postal address to be included on the invoice. | | [deliveryAddress](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-deliveryAddress) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | The postal address where the goods will be shipped. | | [lineItems](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-lineItems) | ![-white\_check\_mark-](/user/data/smileys/emoji/white_check_mark.png "-white_check_mark-") | Price and product information about the purchased items. | | [telephoneNumber](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments#request-telephoneNumber) | | The shopper's telephone number, if provided. | **Example payment request for Clearpay** ```bash curl https://checkout-test.adyen.com/v72/payments \ -H 'x-API-key: ADYEN_API_KEY' \ -H 'idempotency-key: YOUR_IDEMPOTENCY_KEY' \ -H 'content-type: application/json' \ -X POST -d '{ "paymentMethod":{ "type":"clearpay" }, "amount":{ "value":1000, "currency":"GBP" }, "shopperName":{ "firstName":"Simon", "lastName":"Hopper" }, "shopperEmail":"s.hopper@example.com", "shopperReference":"YOUR_UNIQUE_SHOPPER_ID", "reference":"YOUR_ORDER_REFERENCE", "merchantAccount":"ADYEN_MERCHANT_ACCOUNT", "returnUrl":"https://your-company.example.com/checkout?shopperOrder=12xy..", "countryCode":"GB", "telephoneNumber":"+44 203 936 4029", "billingAddress":{ "city":"London", "country":"GB", "houseNumberOrName":"8-10", "postalCode":"SW1H 0BG", "stateOrProvince":"Westminster", "street":"Broadway" }, "deliveryAddress":{ "city":"London", "country":"GB", "houseNumberOrName":"8-10", "postalCode":"SW1H 0BG", "stateOrProvince":"Westminster", "street":"Broadway" }, "lineItems":[ { "description":"Shoes", "quantity":"1", "amountIncludingTax":"400", "amountExcludingTax": "331", "taxAmount": "69", "id":"Item #1" }, { "description":"Socks", "quantity":"2", "amountIncludingTax":"300", "amountExcludingTax": "248", "taxAmount": "52", "id":"Item #2" } ] }' ``` The response includes `action.type`: **redirect**. **Example response with a redirect action** ```json { "resultCode":"RedirectShopper", "action":{ "paymentMethodType":"clearpay", "method":"GET", "url":"https://checkoutshopper-test.adyen.com/checkoutshopper/checkoutPaymentRedirect?redirectData=...", "type":"redirect" } } ``` ### Capture ## Capture the payment Depending on your merchant account configuration, Clearpay payments are captured automatically after authorisation, or manually captured. If you prefer to capture the payment after the goods have been sent, you need to set up a [capture delay](/online-payments/capture#delayed-automatic-capture) or use [manual capture](/online-payments/capture#capture-a-payment). To partially capture a payment, you also need to use manual capture. Clearpay payments have to be captured within 13 days after authorisation. During authorisation, the shopper is charged for the first installment. If the payment is not captured within 13 days, before the second installment, Clearpay cancels the payment and refunds the first installment to the shopper. For testing purposes, Clearpay authorisations expire in one day. When you use manual capture, you need to capture test Clearpay payments within one day after authorisation. ### Full or partial manual captures When you use manual capture, in your [/payments/{paymentPspReference}/captures](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments/\(paymentPspReference\)/captures) request specify: * [amount.value](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments/\(paymentPspReference\)/captures#request-amount-value): the full or partial amount that the shopper should pay. * [lineItems](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments/\(paymentPspReference\)/captures#request-lineItems): (optional) price and product information for the items that the shopper should pay for. Any unclaimed amount that is left over after partially capturing a payment is automatically cancelled. When your account is enabled for *multiple* partial captures, the unclaimed amount after an initial capture is not automatically cancelled. To set up multiple partial captures, contact our [Support Team](https://ca-test.adyen.com/ca/ca/contactUs/support.shtml?form=other). Multiple partial captures will create a new invoice for each capture. ## Refunds and cancellations If a payment has not yet been captured, you can [cancel](/online-payments/cancel) it. If a payment has already been captured and you want to return the funds to the shopper, you need to [refund](/online-payments/refund) the payment. ### Full or partial refunds To fully or partially refund a payment, in your [/payments/{paymentPspReference}/refunds](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments/\(paymentPspReference\)/refunds) request specify: * [amount.value](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments/\(paymentPspReference\)/refunds#request-amount-value): the full or partial amount to be refunded to the shopper. * [lineItems](https://docs.adyen.com/api-explorer/Checkout/latest/post/payments/\(paymentPspReference\)/refunds#request-lineItems): (optional) price and product information about the refunded items. ## Discounts To offer discounts, your payment request must include the negative amount to be added to the original price. The following example shows how to specify a discount of 1 GBP on Item #2: ```json { "amount":{ "value":800, "currency":"GBP" }, ... "lineItems":[ { "description":"Test Clearpay 1", "quantity":"1", "amountIncludingTax":"400", "id":"Item #1" }, { "description":"Test Clearpay 2", "quantity":"2", "amountIncludingTax":"300", "id":"Item #2" } { "description":"Discount", "quantity":"2", "amountIncludingTax":"-100", "id":"Item #2 Discount" } ] } ``` ## Test and go live To test Clearpay payments, you need to use the Clearpay sandbox environment and create a test Clearpay shopper account. Clearpay offers separate sandbox environments and test details based on country and region.\ Follow the links to the Clearpay developer documentation for more details. | Clearpay developer documentation | Description | | -------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | | [Test Environment (Sandbox)](https://developers.clearpay.co.uk/v-2/messaging-implementation#sandbox-testing) | More information about how to get access to the sandbox environment. | | [Customer Accounts](https://developers.clearpay.co.uk/merchant-portal) | Learn how to create a test Clearpay shopper account. | | [Test cards](https://developers.clearpay.co.uk/v-2/guides/api-development/test-environments#test-credit-cards) | List of available Clearpay test cards to test different payment flows. | In the Clearpay sandbox environment, you will see Adyen as the merchant name. When you go live, this will change to your own merchant name. When you have set up your sandbox environment, and created your Clearpay test shopper account, you can make a test payment. You can check the status of test payments in your [Customer Area](https://ca-test.adyen.com/) > **Transactions** > **Payments**. Before you can accept live Clearpay payments, you need to [submit a request for Clearpay](/payment-methods/add-payment-methods) in your [live Customer Area](https://ca-live.adyen.com/).