> For the complete documentation index, see [llms.txt](https://docs.neox.vn/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.neox.vn/docs/payment-gateway/integrations/hosted-checkout/react-native-sdk.md).

# React Native SDK

## React Native SDK for NeoX Payment Gateway

**Use**

```tsx
import { NeoXProvider } from '@neox/react-native-sdk'
const App = () => {
  return (
    <NeoXProvider
      options={{
        header: {
          // containerStyle: {
          //   backgroundColor: 'blue',
          // },
          // titleStyle: {
          //   fontSize: 25,
          //   color: 'red',
          //   fontFamily: 'Montserrat-BoldItalic',
          // },
          // screenTitles: {
          //   paymentGatewayTitle: 'Cổng thanh toán NeoX',
          //   cardPaymentTitle: 'Thanh toán thẻ',
          //   transferPaymentTitle: 'Chuyển khoản ngân hàng',
          //   resultTitle: 'Ví NeoX',
          // },
        },
        button: {
          style: {
            backgroundColor: 'blue',
            color: 'white',
            borderRadius: 0,
            // fontSize: 22,
          },
          paymentLabel: 'Thanh toán ngay',
        },
      }}
    >
      <NavigationContainer>
        <RootStack.Navigator
          initialRouteName='ProductScreen'
          screenOptions={{
            animation:
              Platform.OS === 'android' ? 'fade_from_bottom' : 'default',
          }}
        >
          <RootStack.Screen
            component={Products}
            name='ProductScreen'
            options={{ headerShown: false }}
          />
          <RootStack.Screen
            component={ProductDetails}
            name='ProductDetailsScreen'
            options={{ headerTitle: 'Chi tiết sản phẩm' }}
          />
        </RootStack.Navigator>
      </NavigationContainer>
    </NeoXProvider>
  )
}
export default App
```

### Methods

| Method     | Description                                                |
| ---------- | ---------------------------------------------------------- |
| initialize | Initialize the necessary configurations for the SDK and UI |

### Example

```tsx
import { initialize, dismiss } from '@neox/react-native-sdk'
 initialize(
        {
          neo_PaymentBaseUrl: 'https://uat-api.neopay.vn/',
          neo_MerchantCode: 'HUYEN1',
          neo_Amount: product.price * count,
          neo_OrderInfo: 'Thanh toan don hang',
          neo_ReturnURL: '',
          neo_MerchantTxnID: 'T' + Math.floor(Math.random() * 100000),
          neo_SecureHash: '123456',
          neo_OrderID: 'DH' + Math.floor(Math.random() * 200000),
          neo_PaymentMethod: paymentMethod || [],
          neo_Currency: 'VND',
          neo_Version: '',
          neo_Command: '',
        },
        {
          onSuccess: (res) => {
            console.log('res=>Success', res)
            // dismiss()
          },
          onFailure: (res) => {
            console.log('res=>Failure', res)
            // dismiss()
          },
          onClose: () => {
          },
        }
      )
```

### Params in initialize function

<table><thead><tr><th width="217">Parammetter</th><th width="111">Data Type</th><th width="138">Default Value</th><th>Description</th></tr></thead><tbody><tr><td>neo_MerchantCode</td><td>String</td><td></td><td>Merchant code is provided by NeoX</td></tr><tr><td>neo_Currency</td><td>String</td><td>VND</td><td>Transaction currency, VND as default</td></tr><tr><td>neo_Locale</td><td>String</td><td>vi</td><td>Language will display on the checkout page. Support: “vi”, “en”.</td></tr><tr><td>neo_Version</td><td>string</td><td>1</td><td>Payment gateway version, “1” as default</td></tr><tr><td>neo_PaymentMethod</td><td>String</td><td>["WALLET", "ATM", "CC", "QR"]</td><td>Allows to choose to display direct or list payment channels. If this field is not transmitted, all channels will be displayed.</td></tr><tr><td>neo_Amount</td><td>number</td><td></td><td>Payment amount</td></tr><tr><td>neo_MerchantTxnID</td><td>String</td><td></td><td>Unique - Transaction ID is provided by merchant</td></tr><tr><td>neo_OrderID</td><td>String</td><td></td><td>Order ID</td></tr><tr><td>neo_PaymentBaseUrl</td><td>String</td><td></td><td>Environment</td></tr></tbody></table>

**Callback**

| Event     | Description                                  |
| --------- | -------------------------------------------- |
| onSuccess | The event occurs when payment is successful. |
| onFailure | The event occurs when payment fails.         |

**Callback data from onSuccess and onFailure**

| Parameter          | Data Type | Description                                                                                                                               |
| ------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| neo\_MerchantCode  | string    | Merchant code is provided by NeoX                                                                                                         |
| neo\_Currency      | string    | Transaction currency, VND as default                                                                                                      |
| neo\_Locale        | string    | Language will display on the checkout page. Support: “vi”, “en”.                                                                          |
| neo\_Version       | string    | Payment gateway version, “1” as default                                                                                                   |
| neo\_Command       | string    | “PAY” as default                                                                                                                          |
| neo\_Amount        | string    | Payment amount                                                                                                                            |
| neo\_MerchantTxnID | string    | Unique - Transaction ID is provided by merchant                                                                                           |
| neo\_OrderID       | string    | Oder ID                                                                                                                                   |
| neo\_OrderInfo     | string    | Oder Information                                                                                                                          |
| neo\_TransactionID | string    | Unique - Transaction ID is generated by the NeoX system, for reconciling.                                                                 |
| neo\_ResponseCode  | string    | The error code is returned by NeoX, indicates the transaction result.                                                                     |
| neo\_ResponseMsg   | string    | Error description.                                                                                                                        |
| neo\_CustomerID    | string    | The customer ID on the merchant system.                                                                                                   |
| neo\_ResponseData  | string    | The data response of customer's payment.                                                                                                  |
| neo\_SecureHash    | string    | Use SHA256 to hash the above parameters (sort the key by Alphabet order) + Secret Key (will be provided by NeoX after actual integration) |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.neox.vn/docs/payment-gateway/integrations/hosted-checkout/react-native-sdk.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.