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

---

Initializing the SDK

• Input - PortOne key, Currency, Environment, Signature Hash

Elements

Checkout UI

• Import from portone sdk as below

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

<CheckoutUI

selectedProducts={this.state.selectedProducts}

layout={1}

themeColor={'#FF0000'}

onClose={() => {

// Do the needful

}}

/>

Params	Data type	Mandatory	Description
selectedProducts	object	yes	Should provide the selected products
themeColor	String	no	Changes the view colour
layout	int	No	To change the UI layout
onClose	func	No	Callback when on close clicks

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

headerColor={'black'}

selectedData={this.selectedData}

customHandle={true}

selectedProducts={selectedProducts}

deliveryAmount={deliveryAmount}

themeColor={themeColor}

removeBorder={true}

newCardData={this.creditCardDetails}

atmCardClicked={this.atmCardClicked}

onClose={this.onCloseTransactionViewPressed}

walletViewStyles={{

themeColor: "red",

nameFontSize: "14",

nameFontWeight='400',

imageWidth=35,

imageHeight=35,

imageResizeMode={'contain'}

checkBoxHeight={25}

containerHeight={'70%'}

headerTitle={'wallet'}

headerTitleFont={25}

headerTitleWeight={'300'}

headerImage={'https://demo.portone.cloud/images/g1.jpg'}

headerImageWidth={50}

headerImageHeight={50}

headerImageResizeMode={'contain'}

searchPlaceHolder={'🔍 Search by Channels'}

shouldShowSearch={true}

}}

cardStyles={{

showSaveForLater={true}

themeColor: ,

borderRadius: this.state.borderRadius,

nameFontSize: this.state.fontSize,

nameFontWeight: this.state.fontWeight,

buttonBorderRadius: this.state.borderRadius,

}}

transactionStyles={{

themeColor: themeColor,

borderRadius: this.state.borderRadius,

nameFontSize: this.state.fontSize,

nameFontWeight: this.state.fontWeight,

buttonBorderRadius: this.state.borderRadius,

}}

/>

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 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
walletViewStyles	object	No	Styles for wallet details
cardViewStyles	object	No	Styles for cart Details
transactionStyles	object	No	Styles for Transaction status details

• 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

showSheet={true}

customHandle={true}

selectedProducts={this.props.selectedProducts}

payload={this.props.payload}

data={this.state.walletsList}

payNow={this.payNow}

onClose={this.onClosePressed}

themeColor={"red"}

nameFontSize={15}

nameFontWeight={'500}

payNowButtonCornerRadius={15}

imageWidth={35}

imageHeight={35}

imageResizeMode={"contain"}

checkBoxHeight={25}

containerHeight={"70%"}

headerTitle={"Wallets"}

headerTitleFont={25}

headerTitleWeight={ "300" }

headerImage={"https://demo.portone.cloud/images/g1.jpg"}

headerImageWidth={30}

headerImageHeight={30}

headerImageResizeMode={"contain"}

searchPlaceHolder={"🔍 Search by Channels"}

shouldShowSearch={true}

selectedData={this.selectedData}

deliveryAmount={5000}

deliveryAmount={this.props.deliveryAmount}

/>

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
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
themeColor	string	No	Changes border color and header Title to themeColor
walletViewStyles	object	No	Described in wallet details
cardViewStyles	object	No	Described in cart Details

• 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

showSheet={true}

containerHeight={"45%"}

onClose={this.onCloseCardPressed}

showSaveForLater={true}

themeColor={"red"}

newCardData={this.newCardData}

/>

Input :

Params	Data type	Mandatory	Description
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
themeColor	string	No	Changes border color and header Title to themeColor
newCardData	func	No	Passes the entered card Details
cardViewStyles	object	No	Described in cart Details

• 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}

/>

• Input - No input Parama
• 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

Address Section