true_casey/rnpay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

合并 verify 和 otp 界面，增加 password 界面

Browse Source
This commit is contained in:
TQCasey
2026-05-28 15:21:53 +08:00
parent 6eaa171ba4
commit c79a088597
4 changed files with 256 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/WalletBindComponents.tsx
View File

@@ -15,7 +15,7 @@ export class FreeChargeBind extends Component<{
return (
<OTPBindUI
walletType={WalletType.FREECHARGE_PERSONAL}
title="Freecharge 绑定"
title="Bind Freecharge"
otpLength={4}
onRequestOTP={this.props.onRequestOTP}
onVerifyOTP={this.props.onVerifyOTP}
@@ -40,7 +40,7 @@ export class MobikwikOTPBind extends Component<{
return (
<OTPBindUI
walletType={WalletType.MOBIKWIK_PERSONAL}
title="Mobikwik 绑定"
title="Bind Mobikwik"
otpLength={6}
onRequestOTP={this.props.onRequestOTP}
onVerifyOTP={this.props.onVerifyOTP}
@@ -65,7 +65,7 @@ export class PayTmPersonalOTPBind extends Component<{
return (
<OTPBindUI
walletType={WalletType.PAYTM_PERSONAL}
title="Paytm 绑定"
title="Bind Paytm"
otpLength={6}
onRequestOTP={this.props.onRequestOTP}
onVerifyOTP={this.props.onVerifyOTP}
@@ -90,7 +90,7 @@ export class BharatPeBusinessOTPBind extends Component<{
return (
<OTPBindUI
walletType={WalletType.BHARATPE_BUSINESS}
title="BharatPe 绑定"
title="Bind BharatPe"
otpLength={4}
onRequestOTP={this.props.onRequestOTP}
onVerifyOTP={this.props.onVerifyOTP}
@@ -147,7 +147,7 @@ function PaytmBusinessForm({ onRequestOTP, onVerifyOTP, onSuccess, onError, isDe
const log = (...args: any[]) => { if (isDebug) console.log('[PaytmBusiness]', ...args); };
const handleRequestOTP = async () => {
if (!mobile || mobile.length !== 10) { setErrorMsg('请输入10位手机号'); return; }
if (!mobile || mobile.length !== 10) { setErrorMsg('Please enter a 10-digit mobile number'); return; }
setLoading(true); setErrorMsg('');
try {
const res = await onRequestOTP(WalletType.PAYTM_BUSINESS, { mobile });
@@ -161,7 +161,7 @@ function PaytmBusinessForm({ onRequestOTP, onVerifyOTP, onSuccess, onError, isDe
};
const handleVerifyOTP = async () => {
if (!otp || otp.length !== 6) { setErrorMsg('请输入6位验证码'); return; }
if (!otp || otp.length !== 6) { setErrorMsg('Please enter the 6-digit verification code'); return; }
setLoading(true); setErrorMsg('');
try {
const res = await onVerifyOTP(WalletType.PAYTM_BUSINESS, { mobile, otp, sessionToken });
@@ -182,25 +182,25 @@ function PaytmBusinessForm({ onRequestOTP, onVerifyOTP, onSuccess, onError, isDe
return (
<View style={ptStyles.container}>
<View style={ptStyles.form}>
<Text style={ptStyles.title}>Paytm Business 绑定</Text>
<Text style={ptStyles.title}>Bind Paytm Business</Text>
{errorMsg ? <Text style={ptStyles.errorText}>{errorMsg}</Text> : null}
{step === 'credentials' && (
<>
<TextInput style={ptStyles.input} placeholder="手机号" placeholderTextColor="#999" keyboardType="phone-pad" maxLength={10} value={mobile} onChangeText={t => { setMobile(t); setErrorMsg(''); }} editable={!loading} />
<TextInput style={ptStyles.input} placeholder="Mobile number" placeholderTextColor="#999" keyboardType="phone-pad" maxLength={10} value={mobile} onChangeText={t => { setMobile(t); setErrorMsg(''); }} editable={!loading} />
<TouchableOpacity style={[ptStyles.button, loading && ptStyles.buttonDisabled]} onPress={handleRequestOTP} disabled={loading}>
{loading ? <ActivityIndicator color="#fff" /> : <Text style={ptStyles.buttonText}>获取验证码</Text>}
{loading ? <ActivityIndicator color="#fff" /> : <Text style={ptStyles.buttonText}>Send OTP</Text>}
</TouchableOpacity>
</>
)}
{step === 'otp' && (
<>
<Text style={ptStyles.hint}>验证码已发送至 {mobile}</Text>
<TextInput style={ptStyles.input} placeholder="6位验证码" placeholderTextColor="#999" keyboardType="number-pad" maxLength={6} value={otp} onChangeText={t => { setOtp(t); setErrorMsg(''); }} editable={!loading} />
<Text style={ptStyles.hint}>OTP sent to {mobile}</Text>
<TextInput style={ptStyles.input} placeholder="6-digit code" placeholderTextColor="#999" keyboardType="number-pad" maxLength={6} value={otp} onChangeText={t => { setOtp(t); setErrorMsg(''); }} editable={!loading} />
<TouchableOpacity style={[ptStyles.button, loading && ptStyles.buttonDisabled]} onPress={handleVerifyOTP} disabled={loading}>
{loading ? <ActivityIndicator color="#fff" /> : <Text style={ptStyles.buttonText}>验证并绑定</Text>}
{loading ? <ActivityIndicator color="#fff" /> : <Text style={ptStyles.buttonText}>Verify & Bind</Text>}
</TouchableOpacity>
<TouchableOpacity style={ptStyles.linkButton} onPress={() => setStep('credentials')} disabled={loading}>
<Text style={ptStyles.linkText}>重新输入手机号</Text>
<Text style={ptStyles.linkText}>Change mobile number</Text>
</TouchableOpacity>
</>
)}
@@ -235,7 +235,7 @@ export class PhonePeBusinessOTPBind extends Component<{
return (
<OTPBindUI
walletType={WalletType.PHONEPE_BUSINESS}
title="PhonePe Business 绑定"
title="Bind PhonePe Business"
otpLength={5}
onRequestOTP={this.props.onRequestOTP}
onVerifyOTP={this.props.onVerifyOTP}
@@ -260,7 +260,7 @@ export class PhonePePersonalOTPBind extends Component<{
return (
<OTPBindUI
walletType={WalletType.PHONEPE_PERSONAL}
title="PhonePe 绑定"
title="Bind PhonePe"
otpLength={5}
onRequestOTP={this.props.onRequestOTP}
onVerifyOTP={this.props.onVerifyOTP}
@@ -285,8 +285,12 @@ export class AmazonPayOTPBind extends Component<{
return (
<OTPBindUI
walletType={WalletType.AMAZONPAY_PERSONAL}
title="Amazon Pay 绑定"
title="Bind Amazon Pay"
otpLength={6}
passwordBeforeOtp
passwordLabel="Amazon password"
passwordPlaceholder="Enter Amazon account password"
passwordRequiredMsg="Please enter your Amazon account password"
onRequestOTP={this.props.onRequestOTP}
onVerifyOTP={this.props.onVerifyOTP}
onSuccess={this.props.onSuccess}