ordering-ui-react-native 0.21.89 → 0.21.90-release

package/themes/original/src/components/SignupForm/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity } from 'react-native';
+import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity, Modal } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -32,11 +32,9 @@ import {
 } from '../LoginForm/styles';
 
 import NavBar from '../NavBar';
-import { VerifyPhone } from '../VerifyPhone';
 
 import Alert from '../../../../../src/providers/AlertProvider'
 import { OText, OButton, OInput } from '../shared';
-import { OModal } from '../../../../../src/components/shared';
 import { SignupParams } from '../../types';
 import { sortInputFields } from '../../utils';
 import { GoogleLogin } from '../GoogleLogin';
@@ -141,6 +139,8 @@ const SignupFormUI = (props: SignupParams) => {
 	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
 	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 	const [tabLayouts, setTabLayouts] = useState<any>({})
+	const [isCheckingCode, setCheckingCode] = useState(false)
+	const [otpError, setOtpError] = useState(null)
 
 	const tabsRef = useRef<any>(null)
 	const nameRef = useRef<any>(null);
@@ -155,7 +155,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
 	const googleLoginEnabled = configs?.google_login_enabled?.value === '1' || !configs?.google_login_enabled?.enabled
 	const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1' || !configs?.facebook_login_enabled?.enabled
-	const appleLoginEnabled = configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled
+	const appleLoginEnabled = Platform.OS === 'ios' && (configs?.apple_login_enabled?.value === '1' || !configs?.apple_login_enabled?.enabled)
 
 	const closeAlert = () => {
 		setAlertState({
@@ -467,9 +467,16 @@ const SignupFormUI = (props: SignupParams) => {
 
 	useEffect(() => {
 		if (checkPhoneCodeState?.result?.error) {
-			setAlertState({
+			const titleText = (
+				typeof checkPhoneCodeState?.result?.result === 'string'
+					? checkPhoneCodeState?.result?.result
+					: checkPhoneCodeState?.result?.result[0].toString()
+			) || t('ERROR', 'Error')
+			setCheckingCode(false)
+			setOtpError(titleText)
+			checkPhoneCodeState?.generate && setAlertState({
 				open: true,
-				title: (typeof checkPhoneCodeState?.result?.result === 'string' ? checkPhoneCodeState?.result?.result : checkPhoneCodeState?.result?.result[0].toString()) || t('ERROR', 'Error'),
+				title: titleText,
 				content: []
 			})
 		}
@@ -583,65 +590,67 @@ const SignupFormUI = (props: SignupParams) => {
 							{sortInputFields({
 								values: validationFields?.fields?.checkout,
 							}).map(
-								(field: any, i: number) =>
-									!notValidationFields.includes(field.code) &&
-									showField &&
-									showField(field.code) &&
-									(signUpTab === 'default' ||
-										(signUpTab === 'otpEmail' && field.code === 'email')) && (
-										<React.Fragment key={field.id}>
-											{errors?.[`${field.code}`] && (
-												<OText
-													size={14}
-													color={theme.colors.danger5}
-													weight={'normal'}>
-													{errors?.[`${field.code}`]?.message} {errors?.[`${field.code}`]?.type === 'required' && '*'}
-												</OText>
-											)}
-											<Controller
-												control={control}
-												render={({ onChange, value }: any) => (
-													<OInput
-														placeholder={t(field.name?.replace(/\s/g, '_')?.toUpperCase(), field.name)}
-														style={style.inputStyle}
-														icon={
-															field.code === 'email'
-																? theme.images.general.email
-																: theme.images.general.user
-														}
-														value={value}
-														onChange={(val: any) =>
-															field.code !== 'email'
-																? (onChange(val))
-																: handleChangeInputEmail(val, onChange)
-														}
-														autoCapitalize={
-															field.code === 'email' ? 'none' : 'sentences'
-														}
-														autoCorrect={field.code === 'email' && false}
-														type={
-															field.code === 'email' ? 'email-address' : 'default'
-														}
-														autoCompleteType={
-															field.code === 'email' ? 'email' : 'off'
-														}
-														returnKeyType="next"
-														blurOnSubmit={false}
-														forwardRef={(ref: any) => handleRefs(ref, field.code)}
-														onSubmitEditing={() =>
-															field.code === 'email'
-																? phoneRef?.current?.focus?.()
-																: handleFocusRef(getNextFieldCode(i))
-														}
-														borderColor={errors?.[`${field.code}`] ? theme.colors.danger5 : theme.colors.border}
-													/>
+								(item: any, i: number) => {
+									const field = item?.validation_field || item
+									return (!notValidationFields.includes(field.code) &&
+										showField &&
+										showField(field.code) &&
+										(signUpTab === 'default' ||
+											(signUpTab === 'otpEmail' && field.code === 'email')) && (
+											<React.Fragment key={field.id}>
+												{errors?.[`${field.code}`] && (
+													<OText
+														size={14}
+														color={theme.colors.danger5}
+														weight={'normal'}>
+														{errors?.[`${field.code}`]?.message} {errors?.[`${field.code}`]?.type === 'required' && '*'}
+													</OText>
 												)}
-												name={field.code}
-												rules={getInputRules(field)}
-												defaultValue=""
-											/>
-										</React.Fragment>
-									),
+												<Controller
+													control={control}
+													render={({ onChange, value }: any) => (
+														<OInput
+															placeholder={t(field.name?.replace(/\s/g, '_')?.toUpperCase(), field.name)}
+															style={style.inputStyle}
+															icon={
+																field.code === 'email'
+																	? theme.images.general.email
+																	: theme.images.general.user
+															}
+															value={value}
+															onChange={(val: any) =>
+																field.code !== 'email'
+																	? (onChange(val))
+																	: handleChangeInputEmail(val, onChange)
+															}
+															autoCapitalize={
+																field.code === 'email' ? 'none' : 'sentences'
+															}
+															autoCorrect={field.code === 'email' && false}
+															type={
+																field.code === 'email' ? 'email-address' : 'default'
+															}
+															autoCompleteType={
+																field.code === 'email' ? 'email' : 'off'
+															}
+															returnKeyType="next"
+															blurOnSubmit={false}
+															forwardRef={(ref: any) => handleRefs(ref, field.code)}
+															onSubmitEditing={() =>
+																field.code === 'email'
+																	? phoneRef?.current?.focus?.()
+																	: handleFocusRef(getNextFieldCode(i))
+															}
+															borderColor={errors?.[`${field.code}`] ? theme.colors.danger5 : theme.colors.border}
+														/>
+													)}
+													name={field.code}
+													rules={getInputRules(field)}
+													defaultValue=""
+												/>
+											</React.Fragment>
+										))
+								}
 							)}
 
 							{(!!showInputPhoneNumber && (signUpTab === 'default' || signUpTab === 'otpCellphone')) && (
@@ -787,9 +796,9 @@ const SignupFormUI = (props: SignupParams) => {
 										<OButton
 											imgRightSrc={null}
 											text={t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
-											bgColor='#FFF'
-											borderColor='#FFF'
-											style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: '#FFF' }}
+											bgColor={theme.colors.white}
+											borderColor={theme.colors.white}
+											style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: theme.colors.white }}
 											textStyle={{ color: theme.colors.primary, marginLeft: 0, marginRight: 0 }}
 											onClick={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
 										/>
@@ -833,6 +842,7 @@ const SignupFormUI = (props: SignupParams) => {
 														/>
 													)
 												}
+												autoCapitalize='none'
 												value={value}
 												onChange={(val: any) => onChange(val)}
 												returnKeyType="done"
@@ -874,9 +884,7 @@ const SignupFormUI = (props: SignupParams) => {
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={t('GET_VERIFY_CODE', 'Get Verify Code')}
-							borderColor={theme.colors.primary}
 							imgRightSrc={null}
-							textStyle={{ color: 'white' }}
 							isLoading={isLoadingVerifyModal}
 							indicatorColor={theme.colors.white}
 							style={{ borderRadius: 7.6, marginTop: 6 }}
@@ -885,9 +893,6 @@ const SignupFormUI = (props: SignupParams) => {
 						<OButton
 							onClick={handleSubmit(onSubmit)}
 							text={signupButtonText}
-							bgColor={theme.colors.primary}
-							borderColor={theme.colors.primary}
-							textStyle={{ color: 'white' }}
 							imgRightSrc={null}
 							isDisabled={formState.loading || validationFields.loading}
 							style={{ borderRadius: 7.6, marginTop: 6, shadowOpacity: 0 }}
@@ -969,13 +974,16 @@ const SignupFormUI = (props: SignupParams) => {
 					)
 				)}
 			</FormSide>
-			<OModal
-				open={willVerifyOtpState}
-				onClose={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
-				entireModal
-				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			<Modal
+				visible={willVerifyOtpState}
+				onDismiss={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
+				animationType='slide'
 			>
 				<Otp
+					isCheckingCode={isCheckingCode}
+					setCheckingCode={setCheckingCode}
+					otpError={otpError}
+					setOtpError={setOtpError}
 					pinCount={numOtpInputs || 6}
 					willVerifyOtpState={willVerifyOtpState || false}
 					setWillVerifyOtpState={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
@@ -983,7 +991,7 @@ const SignupFormUI = (props: SignupParams) => {
 					onSubmit={onSubmit}
 					setAlertState={setAlertState}
 				/>
-			</OModal>
+			</Modal>
 			<Spinner
 				visible={formState.loading || validationFields.loading || isFBLoading}
 			/>

package/themes/original/src/components/SingleOrderCard/index.tsx

@@ -3,7 +3,8 @@ import {
   SingleOrderCard as SingleOrderCardController,
   useUtils,
   useOrder,
-  useLanguage
+  useLanguage,
+  useConfig
 } from 'ordering-components/native';
 import FastImage from 'react-native-fast-image'
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
@@ -45,6 +46,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const [{ parsePrice, optimizeImage, parseDate }] = useUtils();
   const [, t] = useLanguage();
   const [{ carts }] = useOrder()
+  const [{ configs }] = useConfig()
   const theme = useTheme();
   const isFocused = useIsFocused();
 
@@ -54,6 +56,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
 
   const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12, 15];
   const isGiftCardOrder = !order?.business_id
+  const changeIdToExternalId = configs?.change_order_id?.value === '1'
 
   const styles = StyleSheet.create({
     container: {
@@ -82,7 +85,6 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       elevation: 3
     },
     buttonText: {
-      color: theme.colors.primary,
       fontSize: 10,
       marginLeft: 2,
       marginRight: 2,
@@ -334,7 +336,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         lineHeight={15}
                         numberOfLines={1}
                       >
-                        {order?.business?.length > 1 ? order?.business?.length : (t('ORDER_NO', 'Order No') + '.')}
+                        {order?.business?.length > 1 ? order?.business?.length : !(changeIdToExternalId && order?.external_id) && (t('ORDER_NO', 'Order No') + '.')}
                       </OText>
                       <OText
                         size={10}
@@ -343,7 +345,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         lineHeight={15}
                         numberOfLines={1}
                       >
-                        {order?.business?.length > 1 ? t('ORDERS', 'orders') + ' \u2022 ' : order.id + ` \u2022 `}
+                        {order?.business?.length > 1 ? t('ORDERS', 'orders') + ' \u2022 ' : ((changeIdToExternalId && order?.external_id) || order.id) + ` \u2022 `}
                       </OText>
                     </>
                   )}

package/themes/original/src/components/SingleProductCard/index.tsx

@@ -48,6 +48,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
 	const isChewLayout = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
 	const hideProductDescription = theme?.business_view?.components?.products?.components?.product?.components?.description?.hidden
+	const hideProductDummyLogo = theme?.business_view?.components?.products?.components?.product?.components?.dummy?.hidden
 	const hideProductLogo = viewString
 		? theme?.[viewString]?.components?.cart?.components?.products?.image?.hidden
 		: theme?.business_view?.components?.products?.components?.product?.components?.image?.hidden
@@ -283,7 +284,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 									</OText>
 								</RibbonBox>
 							)}
-							{!hideProductLogo && (
+							{(!hideProductLogo && (product?.images || !hideProductDummyLogo)) && (
 								<FastImage
 									style={styles.productStyle}
 									source={product?.images ? {
@@ -313,9 +314,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 								height: 40
 
 							}}
-							bgColor={isSoldOut ? '#B8B8B8' : theme?.colors?.white}
-							borderColor={theme?.colors.primary}
-							textStyle={{ color: theme.colors.primary }}
+							isDisabled={isSoldOut}
 							text={t('ADD', 'Add')}
 						/>
 					)}

package/themes/original/src/components/SingleProductCard/styles.tsx

@@ -49,15 +49,12 @@ export const RibbonBox = styled.View`
   background-color: ${(props: any) => props.theme.colors.primary};
   padding: 1px 8px;
   max-width: 60px;
-
   ${(props: any) => props.bgColor && css`
     background-color: ${props.bgColor};
   `}
-
   ${(props: any) => props.isRoundRect && css`
     border-radius: 7.6px;
   `}
-
   ${(props: any) => props.isCapsule && css`
     border-radius: 50px;
   `}

package/themes/original/src/components/StripeCardForm/index.tsx

@@ -65,9 +65,6 @@ const StripeCardFormUI = (props: any) => {
 					<OButton
 						text={loading ? t('LOADING', 'Loading...') : t('ADD', 'Add')}
 						isDisabled={!cardState?.valid || loading}
-						bgColor={theme.colors.primary}
-						borderColor={theme.colors.primary}
-						textStyle={{ color: 'white' }}
 						imgRightSrc={null}
 						onClick={handleSubmit}
 					/>

package/themes/original/src/components/StripeCardsList/index.tsx

@@ -26,11 +26,13 @@ export const StripeCardsListUI = (props: any) => {
 	const {
 		onSelectCard,
 		deleteCard,
-		cardSelected,
 		cardsList,
 		handleCardClick,
 		onOpen,
 		gateway,
+		paySelected,
+		newCardAdded,
+		addNewCardAsDefault
 	} = props;
 
 	const theme = useTheme();
@@ -54,6 +56,12 @@ export const StripeCardsListUI = (props: any) => {
 		}
 	}, [cardsList?.loading])
 
+	useEffect(() => {
+		if (newCardAdded && addNewCardAsDefault) {
+			handleCardSelected(newCardAdded)
+		}
+	}, [JSON.stringify(newCardAdded)])
+
 	return (
 		<>
 			{token && !cardsList.loading && cardsList.cards && cardsList.cards.length === 0 && (
@@ -93,10 +101,9 @@ export const StripeCardsListUI = (props: any) => {
 				>
 					{cardsList.cards.map((card: any) => (
 						<OSItem key={card.id} isUnique={cardsList.cards.length} isInvalid={!card?.zipcode && validateZipcodeCard}>
-							{console.log(card?.zipcode && validateZipcodeCard)}
 							<OSItemContent onPress={() => handleCardSelected(card)}>
 								<View style={styles.viewStyle}>
-									{card.id === cardSelected?.id ? (
+									{(card.id === paySelected?.data?.id) ? (
 										<OIcon
 											src={theme.images.general.radio_act}
 											width={16}

package/themes/original/src/components/StripeElementsForm/index.tsx

@@ -9,7 +9,7 @@ import {
 } from '@stripe/stripe-react-native';
 import { useTheme } from 'styled-components/native';
 import { ErrorMessage } from './styles';
-
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { StripeElementsForm as StripeFormController } from './naked';
 import { OButton, OText } from '../shared';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -17,7 +17,7 @@ import { StripeMethodForm } from '../../../../../src/components/StripeMethodForm
 
 const StripeElementsFormUI = (props: any) => {
 	const {
-		publicKey,
+		publicKeyState,
 		handleSource,
 		values,
 		businessId,
@@ -34,7 +34,11 @@ const StripeElementsFormUI = (props: any) => {
 		methodPaySupported,
 		setPlaceByMethodPay,
 		cartTotal,
-		publicKeyAddCard
+		publicKeyAddCard,
+		urlscheme,
+		androidAppId,
+		businessNames,
+		setNewCardAdded
 	} = props;
 
 	const theme = useTheme();
@@ -53,7 +57,7 @@ const StripeElementsFormUI = (props: any) => {
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false);
 	const zipCodeEnabled = validationFields?.fields?.card?.zipcode?.enabled
 	const zipCodeRequired = validationFields?.fields?.card?.zipcode?.required
-	const isToSave = methodsPay?.includes(paymethod) ? publicKey : publicKeyAddCard
+	const isToSave = methodsPay?.includes(paymethod) ? publicKeyState?.key : (publicKeyAddCard || publicKeyState?.key)
 	const styles = StyleSheet.create({
 		container: {
 			width: '100%',
@@ -147,6 +151,10 @@ const StripeElementsFormUI = (props: any) => {
 						const _isNewCard = index === 0
 						stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId, _isNewCard);
 					})
+					setNewCardAdded?.({
+						...card,
+						id: setupIntent?.paymentMethodId
+					})
 				} else {
 					stripeTokenHandler(setupIntent?.paymentMethodId, user, businessId);
 				}
@@ -199,69 +207,79 @@ const StripeElementsFormUI = (props: any) => {
 
 	return (
 		<View style={{ ...styles.container, height: methodsPay?.includes(paymethod) ? 'auto' : height - top - bottom - 60 - (isKeyboardShow ? 250 : 0) }}>
-			{publicKey ? (
-				<View style={{ flex: 1 }}>
-					<StripeProvider
-						publishableKey={isToSave}
-						merchantIdentifier={merchantId}
-						urlScheme={merchantId}
-					>
-						{methodsPay?.includes(paymethod) ? (
-							<StripeMethodForm
-								handleSource={handleSource}
-								onCancel={onCancel}
-								cart={cart}
-								cartTotal={cartTotal}
-								setErrors={setErrors}
-								paymethod={paymethod}
-								devMode={publicKey?.includes('test')}
-								setMethodPaySupported={setMethodPaySupported}
-								placeByMethodPay={placeByMethodPay}
-								methodPaySupported={methodPaySupported}
-								setPlaceByMethodPay={setPlaceByMethodPay}
-							/>
-						) : (
-							<CardField
-								postalCodeEnabled={zipCodeEnabled}
-								cardStyle={{
-									backgroundColor: '#FFFFFF',
-									textColor: '#000000',
-									borderWidth: 1,
-									borderRadius: 8,
-									borderColor: theme.colors.border
-								}}
-								style={{
-									width: '100%',
-									height: 50,
-									marginVertical: 30,
-									zIndex: 9999,
-								}}
-								onCardChange={(cardDetails: any) => setCard(cardDetails)}
-							/>
-						)}
-					</StripeProvider>
-					{!!errors && (
+			{publicKeyState.loading ? (
+				<Placeholder Animation={Fade}>
+					<PlaceholderLine height={50} style={{ marginTop: 20 }} />
+				</Placeholder>
+			) : (
+				<>
+					{publicKeyState?.key ? (
+						<View style={{ flex: 1 }}>
+							<StripeProvider
+								publishableKey={isToSave}
+								merchantIdentifier={merchantId}
+								urlscheme={`${urlscheme}://checkout/${cart?.uuid}`}
+							>
+								{methodsPay?.includes(paymethod) ? (
+									<StripeMethodForm
+										handleSource={handleSource}
+										onCancel={onCancel}
+										cart={cart}
+										cartTotal={cartTotal}
+										setErrors={setErrors}
+										paymethod={paymethod}
+										devMode={publicKeyState?.key?.includes('test')}
+										setMethodPaySupported={setMethodPaySupported}
+										placeByMethodPay={placeByMethodPay}
+										methodPaySupported={methodPaySupported}
+										setPlaceByMethodPay={setPlaceByMethodPay}
+										androidAppId={androidAppId}
+										businessNames={businessNames}
+									/>
+								) : (
+									<CardField
+										postalCodeEnabled={zipCodeEnabled}
+										cardStyle={{
+											backgroundColor: '#FFFFFF',
+											textColor: '#000000',
+											borderWidth: 1,
+											borderRadius: 8,
+											borderColor: theme.colors.border
+										}}
+										style={{
+											width: '100%',
+											height: 50,
+											marginVertical: 30,
+											zIndex: 9999,
+										}}
+										onCardChange={(cardDetails: any) => setCard(cardDetails)}
+									/>
+								)}
+							</StripeProvider>
+							{!!errors && (
+								<ErrorMessage>
+									<OText
+										size={20}
+										color={theme.colors.error}
+										style={{ marginTop: 20, textAlign: 'center' }}
+									>
+										{errors}
+									</OText>
+								</ErrorMessage>
+							)}
+						</View>
+					) : (
 						<ErrorMessage>
 							<OText
 								size={20}
 								color={theme.colors.error}
-								style={{ marginTop: 20, textAlign: 'center' }}
+								style={{ marginTop: 20 }}
 							>
-								{errors}
+								{t('SOMETHING_WRONG', 'Something is wrong!')}
 							</OText>
 						</ErrorMessage>
 					)}
-				</View>
-			) : (
-				<ErrorMessage>
-					<OText
-						size={20}
-						color={theme.colors.error}
-						style={{ marginTop: 20 }}
-					>
-						{t('SOMETHING_WRONG', 'Something is wrong!')}
-					</OText>
-				</ErrorMessage>
+				</>
 			)}
 			{!methodsPay?.includes(paymethod) && (
 				<OButton
@@ -269,7 +287,6 @@ const StripeElementsFormUI = (props: any) => {
 					bgColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
 					borderColor={isCompleted ? theme.colors.primary : theme.colors.backgroundGray}
 					style={styles.btnAddStyle}
-					textStyle={{ color: 'white' }}
 					imgRightSrc={null}
 					onClick={() => handleSaveCard()}
 					isDisabled={!isCompleted}

package/themes/original/src/components/StripeElementsForm/naked.tsx

@@ -13,6 +13,7 @@ export const StripeElementsForm = (props: any) => {
   const [ordering] = useApi();
   const [{ token }] = useSession();
   const [state, setState] = useState({ loading: false, loadingAdd: false, error: null, requirements: null });
+  const [publicKeyState, setPublicKeyState] = useState({ key: props.publicKey, loading: true, error: null })
 
   const getRequirements = async () => {
     try {
@@ -52,7 +53,7 @@ export const StripeElementsForm = (props: any) => {
       const result = await fetch(`${ordering.root}/payments/stripe/cards`, {
         method: 'POST',
         headers: {
-          Authorization: `Bearer ${user?.session?.access_token}`,
+          Authorization: `Bearer ${token}`,
           'Content-Type': 'application/json'
         },
         body: JSON.stringify({
@@ -85,6 +86,51 @@ export const StripeElementsForm = (props: any) => {
     }
   }
 
+  /**
+   * Method to get stripe credentials from API
+   */
+  const getCredentials = async () => {
+    try {
+      setPublicKeyState({
+        ...publicKeyState,
+        loading: true
+      })
+      const { content: { result, error } } = await ordering.setAccessToken(token).paymentCards().getCredentials()
+      if (!error) {
+        setPublicKeyState({
+          loading: false,
+          key: result.publishable,
+          error: null
+        })
+      } else {
+        setPublicKeyState({
+          ...publicKeyState,
+          loading: false,
+          error: result
+        })
+      }
+    } catch (error) {
+      setPublicKeyState({
+        ...publicKeyState,
+        loading: false,
+        error: error.message
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (!token) return
+    if (props.publicKey) {
+      setPublicKeyState({
+        loading: false,
+        key: props.publicKey,
+        error: null
+      })
+    } else {
+      getCredentials()
+    }
+  }, [token, props.publicKey])
+
   useEffect(() => {
     if (!token || state.requirements) return
     toSave && getRequirements()
@@ -96,6 +142,7 @@ export const StripeElementsForm = (props: any) => {
       values={state}
       requirements={state.requirements}
       stripeTokenHandler={stripeTokenHandler}
+      publicKeyState={publicKeyState}
     />
   )
 }

package/themes/original/src/components/StripeRedirectForm/index.tsx

@@ -138,9 +138,6 @@ const StripeRedirectFormUI = (props: any) => {
 			<OButton
 				// text={formState.isSubmitting ? t('LOADING', 'Loading...') : t('OK', 'OK')}
 				text={t('OK', 'OK')}
-				bgColor={theme.colors.primary}
-				borderColor={theme.colors.primary}
-				textStyle={{ color: 'white' }}
 				imgRightSrc={null}
 				// isDisabled={formState.isSubmitting}
 				// onClick={() => handleSubmit(onSubmit)}