RN-PaymentSDK Initial setup

Enable deep linking in ANDROID:

To create a link to your app content, add an intent filter that contains these elements and attribute values in your AndroidManifest.xml:
Include the BROWSABLE category. It is required in order for the intent filter to be accessible from a web browser. Without it, clicking a link in a browser cannot resolve to your app.
Also include the DEFAULT category. This allows your app to respond to implicit intents. Without this, the activity can be started only if the intent specifies your app component name.
```java
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
```
To accept the URIs that begin with portone://checkout“
```java
<data android:scheme="portone"
android:host="checkout" />
<data android:scheme="zalopay"
android:host="pay" />
<data android:scheme="momo"
android:host="pay" />
```

Enable deep linking in iOS:

To open your application, add the url schemes to the app, Go to ProjectSettings -> info
Add inside the URL types
To open the other applications, should include the url schemes in info.plist
LSApplicationQueriesSchemes - Specifies the URL schemes you want the app to be able to use with the canOpenURL: method of the UIApplication class.
To support HTTP connections, add this source code in app info.plist
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
<key>NSAllowsLocalNetworking</key>
<true/>
</dict>

To use the library:

Add .npmrc file to the project
- In that file, add the following code and save it
@iamport-intl:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=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
Go to project terminal, run the following code
npm install @iamport-intl/portone-sdk@latest
After successful installation, it will be shown in package.json under dependencies
Add peer dependencies
npm install @react-native-async-storage/async-storage
npm install react-native-localization
npm install react-native-webview
npm install react-native-linear-gradient
npm install react-native-rsa-native
Import the library as below:
import {Checkout} from '@iamport-intl/portone-sdk';

Initialise the checkout instance as below:

<Checkout
          callbackFunction={this.afterCheckout}
          redirectUrl={"chaiport://"}
          env={"dev"}         //Optional
          environment={"sandbox"} //Optional
  />

Params	Data type	Mandatory	Description
env	String	No	env type. e,g "dev" "prod"
callbackFunction	func	yes	returns the success and failure callback.
redirectUrl	String	yes	redirect url for the app
environment	String	No	sandbox, live

Sample Payload containing the payment details:

var orderDetails = [ {
id: `${item.key}`,
price: item.price,
name: item.name,
quantity: item.quantity,
image: item.img,
}];

var payload = {
portOneKey: KEY,
merchantDetails: {
name: 'Chaipay Cart',
logo: 'https://demo.portone.cloud/images/chikku-loafers.jpg',
back_url: 'https://demo.chaipay.io/checkout.html',
promo_code: 'Downy350',
promo_discount: promoDiscount,
shipping_charges: shipping,
},
merchantOrderId: merchantOrderId,
signatureHash: this.createHash(
KEY,
totalAmount,
CURRENCY,
failureURL,
merchantOrderId,
successURL,
SECRET_KEY,
),
amount: totalAmount,
currency: CURRENCY,
countryCode: 'VN',
billingDetails: {
billing_name: 'Test React native',
billing_email: 'markweins@gmail.com',
billing_phone: '+660956425564'
billing_address: {
city: 'VND',
country_code: 'VN',
locale: 'en',
line_1: 'address',
line_2: 'address_2',
postal_code: '400202',
state: 'Mah',
},
},
shippingDetails: {
shipping_name: 'xyz-Testing',
shipping_email: 'xyz@gmail.com',
shipping_phone: '+910830443596',
shipping_address: {
city: 'testing city',
country_code: 'VN',
locale: 'en',
line_1: 'Testing line 1',
line_2: 'Testing line 2',
postal_code: '400202',
state: 'Mah',
},
},
environment: ENVIRONMENT,
orderDetails: orderDetails,
successUrl: successURL,
failureUrl: failureURL,

redirectUrl: 'demo://checkout1',
expiryHours: 2,
source: 'mobile',
description: 'test RN',

showShippingDetails: true,
showBackButton: false,
defaultGuestCheckout: false,
isCheckoutEmbed: false,
};

Sample Response Payload:

Success callback :

```jsx
{
  "chaipay_order_ref": "1wc00XMK4uKy3EeYBAvRPlkfjkZ",
  "channel_order_ref": "210812000000171",
  "merchant_order_ref": "MERCHANT1628742344516",
  "status": "Success",
  "status_code": "2000",
  "status_reason": "SUCCESS"
}
```

Failure Callback:

```jsx
{
  "chaipay_order_ref": "1wa0choxhAy2QtE9ix8aNt8T3Mf",
  "channel_order_ref": "0",
  "merchant_order_ref": "MERCHANT1628681469666",
  "status": "Initiated",
  "status_code": "4000",
  "status_reason": "INVALID_TRANSACTION_ERROR"
}
```

Steps for Signature Hash Generation

```jsx
createHash: (
    key,
    amount,
    currency,
    failureUrl,
    merchantOrderId,
    successUrl,
    secretKey,
  ) => {
    let mainParams =
      'amount=' +
      encodeURIComponent(amount) +
      '&client_key=' +
      encodeURIComponent(key) +
      '&currency=' +
      encodeURIComponent(currency) +
      '&failure_url=' +
      encodeURIComponent(failureUrl) +
      '&merchant_order_id=' +
      encodeURIComponent(merchantOrderId) +
      '&success_url=' +
      encodeURIComponent(successUrl);

    let hash = HmacSHA256(mainParams, secretKey);
    let signatureHash = Base64.stringify(hash);

    return signatureHash;
  }
  ```

Subpages#