React Native(v4)- Customizable UI Elements

Please follow steps below to setup React Native SDK and start accepting UI elements via PortOne.

For initial SDK installation set up refer here

---

1. After inital setup, Install the package

npm install @iamport-intl/portone-sdk@latest

2. 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

Elements

Checkout UI

• Import from portone sdk as below

import { BasicCheckoutUI, CreditCardForm } from '@iamport-intl/portone-sdk';

Payload parameter list

Parameter	Datatype	Obligatory/Optional	Description
portOneKey	Text	Obligatory	PortOne Key provided to merchants
paymentChannel	Text	Obligatory	Name of the payment channel
paymentMethod	Text	Obligatory	Payment Method to be used
environment	Text	Obligatory	Environment of the payment
description	Text	Optional	Order description set in PSP order creation
merchantOrderId	Text	Obligatory	Order reference given by merchant ID
amount	Numeric[1,12]	Obligatory	Amount for transaction
currency	Text	Obligatory	Currency for transaction
billingDetails		Optional	Details of billing
shippingDetails		Optional	Details of shipping
merchantDetails		Optional	Merchant details
orderDetails		Obligatory	Order Details like quantity, id, name, price are Obligatory, while image is Optional
successUrl		Obligatory	Redirection url for success
failureUrl		Obligatory	Redirection url for failure
signatureHash		Obligatory	Signature calculated using this link

Environment Flag

Pass the environment flag in above payload. Environment is the mandatory field, by default the value of environment is sandbox while initiating payment.

<BasicCheckoutUI

selectedProducts={this.state.selectedProducts}

payload={this.getDefaultConfig()}

JWTToken={JWTToken}

themeColor={'#FC6B2D'} // #727C3B #FC0053 #FC6B2D #00FF00 #0000FF #006400 #FF0000 #FFC0CB

onClose={() => {

//Do the needful

}}

callbackFunction={this.afterCheckout}

showShippingAddressView={true}

showSavedCardsView={false}

showCartDetailsView={false}

customerUUID={"customerUUID"}

subMerchantKey={"subMerchantKey"}

/>

Params	Data type	Mandatory	Description
selectedProducts	object	yes	Should provide the selected products
payload	object	yes	Should provide the transaction payload
JWTtoken	string	yes	Should provide the JWT token
themeColor	String	no	Changes the view colour
layout	int	No	To change the UI layout
onClose	func	No	Callback when on close clicks
callbackFunction	func	Yes	Callback when any update in the transaction
showShippingAddressView	bool	No	To show the shipping address view
showSavedCardsView	bool	No	To show the Saved cards view
showCartDetailsView	bool	No	To show the Cart details view
customerUUID	string	No	Provide when merchant card vault enabled
showCartDetailsView	string	No	Provide when sub merchant flow enabled

Sample payload

let orderDetails = [

{

id: `${item.key}`,

price: item.price,

name: item.name,

quantity: item.quantity,

image: item.img,

}

]

let totalAmount = sum of orderDetails + shipping - promoDiscount

let payload = {

portOneKey: PORTONEKEY,

amount: totalAmount,

merchantOrderId: merchantOrderId,

currency: CURRENCY,

environment: ENVIRONMENT,

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,

},

signatureHash: "123"

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',

},

},

orderDetails: orderDetails,

successUrl: successURL,

failureUrl: failureURL,

redirectUrl: 'demo://checkout1',

source: 'mobile',

}

Payment Methods List

• Import from portone sdk as below

import { PaymentMethods} from '@iamport-intl/chaipay-sdk';

<PaymentMethods

payload={payload}

headerTitle={'Payment Methods'}

fontSize={15}

fontWeight={'400'}

headerFontSize={20}

headerFontWeight={'500'}

selectedData={this.selectedData}

customHandle={true}

selectedProducts={selectedProducts}

deliveryAmount={deliveryAmount}

themeColor={themeColor}

newCardData={this.creditCardDetails}

creditCardClicked={this.tokenisationCreditCardDetails}

atmCardClicked={this.atmCardClicked}

onClose={this.onCloseTransactionViewPressed}

customerUUID={this.props.customerUUID}

subMerchantKey={this.props.subMerchantKey}

/>

Input :

Params	Data type	Mandatory	Description
customHandle	Boolean	No	Based on the boolean transaction initiation will be handled by the element.
Payload	Object	Yes, if customHandle is false	Payload required to initiate the payment
headerTitle	String	No	Default payment methods
To display the title of the elemennt
headerFontSize	Int	No	Default 14
Changes the header style
headerFontWeight	string	No	Default “normal”
Changes the header style
fontSize	Int	No	Default 14
Changes the items style
fontWeight	String	No	Default “normal”
Changes the items style
selectedData	func	yes, if customHandle is true	provides the selected method
selectedProducts	Array	No	To show the selected Products on the transaction status screen.
deliveryAmount	Int	No	Delivery amount for the particular transaction, if exists
removeBorder	Bool	No	To remove the border Lines
newCardData	func	No	Passes the entered card details
atmCardClicked	func	No	Callbacks after atm card option selected
themeColor	string	No	Changes border color and header Title to themeColor
customerUUID	string	No	Provide when merchant card vault enabled
subMerchantKey	string	No	Provide when sub merchant flow enabled

• Output :
  • if customHandle is true,
    • Share the selected payment method details (should be as per the params required in init payment) back to the merchant
  • if customHandle is false,
    • Initiate the transaction and displays the status

Wallets

• Import from portone sdk as below

import { WalletView } from '@iamport-intl/chaipay-sdk';

<WalletView

customHandle={true}

selectedProducts={this.props.selectedProducts}

payload={this.props.payload}

data={this.state.walletsList}

payNow={this.payNow}

onClose={this.onClosePressed}

selectedData={this.selectedData}

deliveryAmount={5000}

subMerchantKey={"subMerchantKey"}

/>

Input :

Params	Data type	Mandatory	Description
customHandle	Boolean	No	if true, transaction initiation will be handled by the element.
If false, provides the selected method via selectedData Method
Payload	Object	Yes, if customHandle is false	Payload required to initiate the payment
headerTitle	String	No	Default payment methods
To display the title of the element
subMerchantKey	string	no	provides it when sub merchant flow enabled
selectedData	func	yes, if customHandle is true	provides the selected method
selectedProducts	Array	No	To show the selected Products on the transaction status screen.
deliveryAmount	Int	No	Delivery amount for the particular transaction, if exists
themeColor	string	No	Changes border color and header Title to themeColor

• Output :
  • if customHandle is true,
    • Share the selected payment method details (should be as per the params required in init payment) back to the merchant
  • if customHandle is false,
    • Initiate the transaction and displays the status

Credit Card Details

• Import from portone sdk as below

import { CreditCardForm } from '@iamport-intl/chaipay-sdk';

<CreditCardForm

handleSDK={true}

containerHeight={'85%'}

onClose={() => {

this.setState({showV4Checkout: false});

}}

showSaveForLater={true}

newCardData={this.newCardData}

headerTitle={"Enter card details"}

payNowButtonText={

this.props.cardStyles?.payNowButtonText || strings.payNow

}

payload={{

...this.getDefaultConfig(),\

}}

jwtToken={this.props.jwtToken}

customerUUID={this.props.customerUUID}

subMerchantKey={this.props.subMerchantKey}

/>

Input :

Params	Data type	Mandatory	Description
handleSDK	Bool	No	Based on the param, handles transaction from SDK side
containerHeight	String	No	Height of the bottom sheet view
showSaveForLater	Bool	No	Option to show save card view
headerTitle	String	Yes	Title for the bottom sheet
payNowButtonText	String	Yes	Title for the Pay now button
payload	String	Yes	Provide transaction payload
jwtToken	String	Yes	Provide JWT Token
themeColor	string	No	Changes border color and header Title to themeColor
newCardData	func	No	Passes the entered card Details
customerUUID	string	No	Provide when merchant card vault enabled
subMerchantKey	string	No	Provide when sub merchant flow enabled

| | | | |

• Output :
  • Provided credit card Details

Mobile Authentication Flow

• Import from portone sdk as below

import { MobileNumberAuthenticationView } from '@iamport-intl/chaipay-sdk';

<MobileNumberAuthenticationView

savedCardsData={this.savedCardsData}

shouldShowOTP={this.state.shouldShowOTP}

onClose={() => {

this.setState({ showMobileInputFlow: false });

}}

themeColor={this.props.themeColor}

headerTitle={

formatNumber(totalAmount, this.props.payload?.currency) ||

}

payload={this.props.payload}

jwtToken={this.props.JWTToken}

/>

• Input

Params	Data type	Mandatory	Description
containerHeight	String	No	Height of the bottom sheet view
savedCardsData	func	Yes	Provides the saved card data
Onclose	func	Yes	Dismiss the bottom sheet view
headerTitle	String	Yes	Title for the bottom sheet
payNowButtonText	String	Yes	Title for the Pay now button
payload	String	Yes	Provide transaction payload
jwtToken	String	Yes	Provide JWT Token
themeColor	string	No	Changes border color and header Title to themeColor

• Output - Share the fetched saved cards for the particular number

Get Saved Cards

<SavedCardsView

showSheet={true}

data={[

{name: '5757 5757 5757 5757', description: '14 / 22'},

{name: '5000 0000 0000 0018', description: '25 / 25 '},

{name: '4000 0000 0000 0002', description: '12 / 22'},

]}

showAuthenticationFlow={true}

payNow={this.payNow}

checkBoxColor={'#E7E9F1'}

checkBoxSelectionColor={'green'}

themeColor={'green'}

nameFontSize={15}

nameFontWeight={'600'}

subNameFontSize={12}

subNameFontWeight={'300'}

imageWidth={35}

imageHeight={35}

imageResizeMode={'contain'}

checkBoxHeight={25}

containerHorizontalPadding={15}

containerVerticalPadding={15}

headerTitle={'Saved Cards'}

headerTitleFont={20}

headerTitleWeight={'500'}

headerImageWidth={50}

headerImageHeight={50}

headerImageResizeMode={'contain'}

selectedItem={item => {

console.log(item);

}}

/>

Params	Data type	Mandatory	Description
showAuthenticationFlow	Bool	yes	To show the authentication flow
showSheet	Bool	Yes	to display the view
payNow	func	yes	Clicks on pay now button with selected data
checkBoxColor	string	No	Changes checkbox colour
checkBoxHeight	Int	No	height of the checkbox field
nameFontSize	Int	No	Style of the name text
nameFontWeight	String	No	Style of the name text Font
subNameFontSize	Int	No	Style of the description text
subNameFontWeight	String	No	Style of the description text font
imageWidth	Int	No	width of the image
imageHeight	Int	No	Height of the image
imageResizeMode	String	No	default contain
containerHorizontalPadding	Int	No	Changes the horizontal padding
containerVerticalPadding	Int	No	Changes the vertical padding
headerTitle	String	No	Default Saved Cards
headerTitleFont	Int	No	style of header title font size
headerTitleWeight	Int	No	style of header title font weight
headerImageWidth	Int	No	-
headerImageHeight	Int	No	-
headerImageResizeMode	String	No	Default contain
selectedItem	func	yes	Passes the selected Item

• Input
  • Show Authentication flow - false
    • Provide the fetched saved card details
  • Show Authentication flow - true
    • No input Params
• Output

  • Share the Selected Saved card details

    

Pay Now button

<PayNowButton

disabled={!this.state.enablePayNow}

themeColor={this.props.themeColor}

textFontSize={16}

textFontWeight={'800'}

textColor={'white'}

borderRadius={this.state.borderRadius}

height={50}

width={width - 60}

text={'Pay Now'}

payload={this.getPayload()}

/>

Input :

Params	Data type	Mandatory	Description
disabled	Bool	No	Default false, to disable the button
textFontSize	Int	No	Default 14
Changes the items style
textFontWeight	String	No	Default “800”
Changes the items style
themeColor	string	No	Changes backgroungColor to themeColor
textColor	String	No	Default “White”
borderRadius	Int	No	To add Corner radius to the button
height	Int	No	Height of the button
width	Int	No	Height of the button
text	String	No	Button Text. Default Pay now
payload	object	yes	pass the whole payload to initiate the payment

• Logic - Call the init payment request and handle the payment flow using web view, redirection
• Output - Share the final payment status and details back to the merchant

Cart Section

<CartDetails

selectedProducts={selectedProducts || []}

nameFontSize={this.state.fontSize - 1}

nameFontWeight={`${Number(this.state.fontWeight) - 100}`}

descriptionSize={this.state.fontWeight - 3}

descriptionFontWeight={`${Number(this.state.fontWeight) - 200}`}

amountFontSize={this.state.fontSize}

amountFontWeight={this.state.fontWeight}

borderRadius={this.state.borderRadius}

borderWidth={1}

headerText={'Net payable'}

orderSummaryText={'Order Details'}

headerTextColor={this.props.themeColor}

headerFont={25}

headerFontWeight={'500'}

removeItem={this.removeItem}

removeBorder={true}

borderColor={this.state.color}

showNetPayable={true}

showCancel={true}

themeColor={this.props.themeColor}

/>

• Input

Params	Data type	Mandatory	Description
selectedProducts	Object	Yes	Should pass the selected Items to display
nameFontSize	Int	No	Changes the items style
descriptionSize	Int	No	Changes the items style
amountFontSize	Int	No	Changes the items style
nameFontWeight	String	No	Changes the items style
descriptionFontWeight	String	No	Changes the items style
amountFontWeight	String	No	Changes the items style
borderRadius	Int	No	Changes border radius of item view
textColor	String	No	Default “White”
borderRadius	Int	No	To add Corner radius to the button
borderWidth	Int	No	Default 1
headerText	String	No	Default Net payable
orderSummaryText	String	No	Default Order details
showCancel	Bool	yes	Should show cancel Icon
removeItem	func	no	Mandatory if show cancel is true
Provides the deleted data.
themeColor	String	No	changes the colour for the view
removeBorder	Bool	no	To show or hide the border colour
borderColor	String	no	colour of he item view border
headerFont	Int	No
headerFontWeight	String	No

• Output - Displays on cart section UI

  

Cart Summary

<CartSummary

hideHeaderView={true}

removeBorder={true}

deliveryAmount={deliveryAmount}

totalAmount={totalAmount}

amountTitle={'Taxes'}

amountFont={12}

amountColor={'#010101'}

amountFontWeight={'300'}

deliveryTitle={'Delivery'}

deliveryFont={12}

deliveryColor={'#010101'}

deliveryFontWeight={'300'}

summaryTitle={'Summary'}

summaryFont={14}

summaryColor={'#010101'}

summaryFontWeight={'500'}

backgroundColor={'transparent'}

/>

• Input - Merchant share cart summary details

Params	Data type	Mandatory	Description
hideHeaderView	Bool	no	To hide/show the header part
removeBorder	Bool	No	To remove the border Colour
deliveryAmount	Int	yes	Provide the delivery amount
totalAmount	Int	yes	Provide the total amount
amountTitle	String	No	Name for amount title
deliveryTitle	String	No	Name for Devlivery title
summaryTitle	String	No	Name for Summary title
amountFont	Int	No	Font of the amount
deliveryFont	Int	No	Font of the delivery field
summaryFont	Int	No	Font of the summary field
amountFontWeight	String	No	Changes the font weight style
deliveryFontWeight	String	No	Changes the font weight style
summaryFontWeight	String	No	Changes the font weight style
amountColor	String	No	Colour of the amount text
deliveryColor	String	No	Colour of the delivery text
summaryColor	String	No	Colour of the summary text
backgroundColor	String	No	Default “transparent”

• Output - Displays on cart summary UI

Transaction Status Page

<TransactionStatusView

selectedProducts={selectedProducts}

deliveryAmount={deliveryAmount}

orderDetails={orderDetails}

showSheet={true}

onClose={this.onCloseTransactionViewPressed}

themeColor={this.props.themeColor}

payload={this.getPayload()}

/>

• Input - Merchant shares transaction response and cart details

Params	Data type	Mandatory	Description
selectedProducts	object	yes	Should share the selected products
deliveryAmount	Float	yes	provide the delivery amount
orderDetails	object	yes	provide the items deatils
showSheet	Bool	yes	To hide / show the view
onClose	func	yes	when on close clicks, it triggeres
themeColor	String	No	To add the required colour
payload	object	yes	payload of the transaction

• Output - Displays the details on the success page UI