Skip to main content

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
  1. 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#

ParameterDatatypeObligatory/OptionalDescription
portOneKeyTextObligatoryPortOne Key provided to merchants
paymentChannelTextObligatoryName of the payment channel
paymentMethodTextObligatoryPayment Method to be used
environmentTextObligatoryEnvironment of the payment
descriptionTextOptionalOrder description set in PSP order creation
merchantOrderIdTextObligatoryOrder reference given by merchant ID
amountNumeric[1,12]ObligatoryAmount for transaction
currencyTextObligatoryCurrency for transaction
billingDetailsOptionalDetails of billing
shippingDetailsOptionalDetails of shipping
merchantDetailsOptionalMerchant details
orderDetailsObligatoryOrder Details like quantity, id, name, price are Obligatory, while image is Optional
successUrlObligatoryRedirection url for success
failureUrlObligatoryRedirection url for failure
signatureHashObligatorySignature 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"}
/>
ParamsData typeMandatoryDescription
selectedProductsobjectyesShould provide the selected products
payloadobjectyesShould provide the transaction payload
JWTtokenstringyesShould provide the JWT token
themeColorStringnoChanges the view colour
layoutintNoTo change the UI layout
onClosefuncNoCallback when on close clicks
callbackFunctionfuncYesCallback when any update in the transaction
showShippingAddressViewboolNoTo show the shipping address view
showSavedCardsViewboolNoTo show the Saved cards view
showCartDetailsViewboolNoTo show the Cart details view
customerUUIDstringNoProvide when merchant card vault enabled
showCartDetailsViewstringNoProvide when sub merchant flow enabled

layout3

layout2

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 :

ParamsData typeMandatoryDescription
customHandleBooleanNoBased on the boolean transaction initiation will be handled by the element.
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
customerUUIDstringNoProvide when merchant card vault enabled
subMerchantKeystringNoProvide 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

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

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
subMerchantKeystringnoprovides it when sub merchant flow enabled
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
  • 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
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 :

ParamsData typeMandatoryDescription
handleSDKBoolNoBased on the param, handles transaction from SDK side
containerHeightStringNoHeight of the bottom sheet view
showSaveForLaterBoolNoOption to show save card view
headerTitleStringYesTitle for the bottom sheet
payNowButtonTextStringYesTitle for the Pay now button
payloadStringYesProvide transaction payload
jwtTokenStringYesProvide JWT Token
themeColorstringNoChanges border color and header Title to themeColor
newCardDatafuncNoPasses the entered card Details
customerUUIDstringNoProvide when merchant card vault enabled
subMerchantKeystringNoProvide when sub merchant flow enabled

| | | | |

  • 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}
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
ParamsData typeMandatoryDescription
containerHeightStringNoHeight of the bottom sheet view
savedCardsDatafuncYesProvides the saved card data
OnclosefuncYesDismiss the bottom sheet view
headerTitleStringYesTitle for the bottom sheet
payNowButtonTextStringYesTitle for the Pay now button
payloadStringYesProvide transaction payload
jwtTokenStringYesProvide JWT Token
themeColorstringNoChanges border color and header Title to themeColor
  • 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