Nhảy tới nội dung

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
}}
/>
ParamsData typeMandatoryDescription
selectedProductsobjectyesShould provide the selected products
themeColorStringnoChanges the view colour
layoutintNoTo change the UI layout
onClosefuncNoCallback when on close clicks

Screenshot 2022-05-05 at 4.50.14 PM.png layout3

layout2 layout2

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 :

ParamsData typeMandatoryDescription
customHandleBooleanNoif true, transaction initiation will be handled by the element.
If false, provides the selected method via selectedData Method
PayloadObjectYes, if customHandle is falsePayload required to initiate the payment
headerTitleStringNoDefault payment methods
To display the title of the elemennt
headerFontSizeIntNoDefault 14
Changes the header style
headerFontWeightstringNoDefault “normal”
Changes the header style
fontSizeIntNoDefault 14
Changes the items style
fontWeightStringNoDefault “normal”
Changes the items style
selectedDatafuncyes, if customHandle is trueprovides the selected method
selectedProductsArrayNoTo show the selected Products on the transaction status screen.
deliveryAmountIntNoDelivery amount for the particular transaction, if exists
removeBorderBoolNoTo remove the border Lines
newCardDatafuncNoPasses the entered card details
atmCardClickedfuncNoCallbacks after atm card option selected
themeColorstringNoChanges border color and header Title to themeColor
walletViewStylesobjectNoStyles for wallet details
cardViewStylesobjectNoStyles for cart Details
transactionStylesobjectNoStyles 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

Screenshot 2022-05-05 at 4.55.40 PM.png Screenshot 2022-05-05 at 4.55.48 PM.png

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 :

ParamsData typeMandatoryDescription
customHandleBooleanNoif true, transaction initiation will be handled by the element.
If false, provides the selected method via selectedData Method
PayloadObjectYes, if customHandle is falsePayload required to initiate the payment
headerTitleStringNoDefault payment methods
To display the title of the element
headerFontSizeIntNoDefault 14
Changes the header style
headerFontWeightstringNoDefault “normal”
Changes the header style
fontSizeIntNoDefault 14
Changes the items style
fontWeightStringNoDefault “normal”
Changes the items style
selectedDatafuncyes, if customHandle is trueprovides the selected method
selectedProductsArrayNoTo show the selected Products on the transaction status screen.
deliveryAmountIntNoDelivery amount for the particular transaction, if exists
themeColorstringNoChanges border color and header Title to themeColor
walletViewStylesobjectNoDescribed in wallet details
cardViewStylesobjectNoDescribed 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

Screenshot 2022-05-05 at 4.55.59 PM.png

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 :

ParamsData typeMandatoryDescription
headerFontWeightstringNoDefault “normal”
Changes the header style
fontSizeIntNoDefault 14
Changes the items style
fontWeightStringNoDefault “normal”
Changes the items style
themeColorstringNoChanges border color and header Title to themeColor
newCardDatafuncNoPasses the entered card Details
cardViewStylesobjectNoDescribed in cart Details
  • Output :
    • Provided credit card Details

Screenshot 2022-05-06 at 11.00.40 AM.png

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

Screenshot 2022-05-06 at 10.49.59 AM.png

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);
}}
/>
ParamsData typeMandatoryDescription
showAuthenticationFlowBoolyesTo show the authentication flow
showSheetBoolYesto display the view
payNowfuncyesClicks on pay now button with selected data
checkBoxColorstringNoChanges checkbox colour
checkBoxHeightIntNoheight of the checkbox field
nameFontSizeIntNoStyle of the name text
nameFontWeightStringNoStyle of the name text Font
subNameFontSizeIntNoStyle of the description text
subNameFontWeightStringNoStyle of the description text font
imageWidthIntNowidth of the image
imageHeightIntNoHeight of the image
imageResizeModeStringNodefault contain
containerHorizontalPaddingIntNoChanges the horizontal padding
containerVerticalPaddingIntNoChanges the vertical padding
headerTitleStringNoDefault Saved Cards
headerTitleFontIntNostyle of header title font size
headerTitleWeightIntNostyle of header title font weight
headerImageWidthIntNo-
headerImageHeightIntNo-
headerImageResizeModeStringNoDefault contain
selectedItemfuncyesPasses 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

      Screenshot 2022-05-06 at 10.50.28 AM.png

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 :

ParamsData typeMandatoryDescription
disabledBoolNoDefault false, to disable the button
textFontSizeIntNoDefault 14
Changes the items style
textFontWeightStringNoDefault “800”
Changes the items style
themeColorstringNoChanges backgroungColor to themeColor
textColorStringNoDefault “White”
borderRadiusIntNoTo add Corner radius to the button
heightIntNoHeight of the button
widthIntNoHeight of the button
textStringNoButton Text. Default Pay now
payloadobjectyespass 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

Screenshot 2022-05-05 at 5.01.39 PM.png Screenshot 2022-05-06 at 10.08.29 AM.png

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
ParamsData typeMandatoryDescription
selectedProductsObjectYesShould pass the selected Items to display
nameFontSizeIntNoChanges the items style
descriptionSizeIntNoChanges the items style
amountFontSizeIntNoChanges the items style
nameFontWeightStringNoChanges the items style
descriptionFontWeightStringNoChanges the items style
amountFontWeightStringNoChanges the items style
borderRadiusIntNoChanges border radius of item view
textColorStringNoDefault “White”
borderRadiusIntNoTo add Corner radius to the button
borderWidthIntNoDefault 1
headerTextStringNoDefault Net payable
orderSummaryTextStringNoDefault Order details
showCancelBoolyesShould show cancel Icon
removeItemfuncnoMandatory if show cancel is true
Provides the deleted data.
themeColorStringNochanges the colour for the view
removeBorderBoolnoTo show or hide the border colour
borderColorStringnocolour of he item view border
headerFontIntNo
headerFontWeightStringNo
  • Output - Displays on cart section UI Screenshot 2022-05-05 at 4.59.48 PM.png

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
ParamsData typeMandatoryDescription
hideHeaderViewBoolnoTo hide/show the header part
removeBorderBoolNoTo remove the border Colour
deliveryAmountIntyesProvide the delivery amount
totalAmountIntyesProvide the total amount
amountTitleStringNoName for amount title
deliveryTitleStringNoName for Devlivery title
summaryTitleStringNoName for Summary title
amountFontIntNoFont of the amount
deliveryFontIntNoFont of the delivery field
summaryFontIntNoFont of the summary field
amountFontWeightStringNoChanges the font weight style
deliveryFontWeightStringNoChanges the font weight style
summaryFontWeightStringNoChanges the font weight style
amountColorStringNoColour of the amount text
deliveryColorStringNoColour of the delivery text
summaryColorStringNoColour of the summary text
backgroundColorStringNoDefault “transparent”
  • Output - Displays on cart summary UI

Screenshot 2022-05-05 at 5.02.16 PM.png

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
ParamsData typeMandatoryDescription
selectedProductsobjectyesShould share the selected products
deliveryAmountFloatyesprovide the delivery amount
orderDetailsobjectyesprovide the items deatils
showSheetBoolyesTo hide / show the view
onClosefuncyeswhen on close clicks, it triggeres
themeColorStringNoTo add the required colour
payloadobjectyespayload of the transaction
  • Output - Displays the details on the success page UI

Screenshot 2022-05-06 at 9.56.27 AM.png Screenshot 2022-05-06 at 10.05.52 AM.png

Address Section#