# 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.