注释：该 SDK 仅用于预览用途并会随时更改。
CVC 验证
在处理您客户的 CVC 详情之前验证 CVC 详情。
警告：该验证并不会检查客户的卡详情是否正确。验证器只会检查所输入的详情格式。
开始
若要集成验证功能，您必须：
- 初始化 AccessCheckout 客户端（如果您已实施会话功能，则您已经有一个实例）
- 创建
CvcOnlyValidationEventListener的实施，以获得验证事件的通知 - 使用我们的
useCvcOnlyValidation()钩子，获得用于初始化验证的函数的实例 - 一旦您的 UI 组件在 DOM 中出现，就调用该函数，以便有效地初始化验证
完整示例集成：您可以在
初始化 AccessCheckout 客户端
实施验证的第一步为创建 AccessCheckout 的实例，如果您还没有一个的话。
为此，您必须提供您的 baseUrl 和 merchantId。
以下是如何初始化的示例。
Copied!
import {
AccessCheckout,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';
const accessCheckout = new AccessCheckout({
baseUrl: 'https://try.access.worldpay.com/',
merchantId: 'YOUR_CHECKOUT_ID',
});import { AccessCheckout, } from '@worldpay/access-worldpay-checkout-react-native-sdk'; const accessCheckout = new AccessCheckout({ baseUrl: 'https://try.access.worldpay.com/', merchantId: 'YOUR_CHECKOUT_ID', });
参数
| 参数 | 描述 |
|---|---|
baseUrl |
|
merchantId | 您独特的商户标识号。 |
实施您的 CvcOnlyValidationEventListener
若要接收客户的 CVC 详情的验证结果，则您必须创建自己的 CvcOnlyValidationEventListener 界面的实施。 此界面的每个函数均可选，让您能够灵活地侦听您所关心的事件。
Copied!
const validationEventListener = {
onCvcValidChanged(isValid) {
// TODO: handle the cvc validation result
},
onValidationSuccess() {
// TODO: handle the form when the validation is complete i.e. all fields are valid
},
};const validationEventListener = { onCvcValidChanged(isValid) { // TODO: handle the cvc validation result }, onValidationSuccess() { // TODO: handle the form when the validation is complete i.e. all fields are valid }, };
import {
...
CvcOnlyValidationEventListener,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';
const validationEventListener: CvcOnlyValidationEventListener = {
onCvcValidChanged(isValid: boolean): void {
// TODO: handle the cvc validation result
},
onValidationSuccess(): void {
// TODO: handle the form when the validation is complete i.e. all fields are valid
},
};import { ... CvcOnlyValidationEventListener, } from '@worldpay/access-worldpay-checkout-react-native-sdk'; const validationEventListener: CvcOnlyValidationEventListener = { onCvcValidChanged(isValid: boolean): void { // TODO: handle the cvc validation result }, onValidationSuccess(): void { // TODO: handle the form when the validation is complete i.e. all fields are valid }, };
方法
| 方法 | 描述 |
|---|---|
onCvcValidChanged | 该方法与 CVC 字段的有效性一起调用。 isValid 表示该字段是处于有效还是无效状态。 |
onValidationSuccess | 该方法在所有字段都处于有效状态时才调用。通常，您可以用它来启用提交按钮。 |
调用我们的钩子，以获取验证初始化函数
您现在必须调用我们的钩子，以获取函数的实例，该函数将用于初始化您的 UI 的验证。
要执行此操作，
- 创建
CvcOnlyValidationConfig，以指定 CVCTextInput的id。 - 然后调用在
accessCheckout、CvcOnlyValidationConfig和您的CvcOnlyValidationEventListener实施上传送的useCvcOnlyValidation()钩子。
因此，您将获取一个具有 initialiseCvcOnlyValidation 属性的 object，该属性包含用于有效初始化验证的函数。
以下是详细说明如何执行此操作的示例。
Copied!
import {
...
CvcOnlyValidationConfig,
useCvcOnlyValidation,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';
const validationConfig = new CvcOnlyValidationConfig({
cvcId: 'cvcInput',
});
const { initialiseCvcOnlyValidation } = useCvcOnlyValidation(
accessCheckout,
validationConfig,
validationEventListener
);import { ... CvcOnlyValidationConfig, useCvcOnlyValidation, } from '@worldpay/access-worldpay-checkout-react-native-sdk'; const validationConfig = new CvcOnlyValidationConfig({ cvcId: 'cvcInput', }); const { initialiseCvcOnlyValidation } = useCvcOnlyValidation( accessCheckout, validationConfig, validationEventListener );
初始化验证
您现在必须使用 initialiseCvcOnlyValidation() 函数来初始化验证。 在这样做之前，您需要确保您的 CVC 的 UI 组件在 DOM 中可用。
验证初始化是一个异步流程，因此，请确保处理由函数返回的承诺。
Copied!
import React from 'react';
import { ..., View } from 'react-native';
...
<View
onLayout={() => {
initialiseCvcOnlyValidation()
.then(() => {
// You may want to optionally perform some actions once validation has been successfully initialized.
})
.catch((error) => {
// do something in case of error
});
}}
>
...
</View>
...import React from 'react'; import { ..., View } from 'react-native'; ... <View onLayout={() => { initialiseCvcOnlyValidation() .then(() => { // You may want to optionally perform some actions once validation has been successfully initialized. }) .catch((error) => { // do something in case of error }); }} > ... </View> ...
完整代码示例
以下是上述步骤的完整代码示例。
Copied!
import {
AccessCheckout,
CvcOnlyValidationConfig,
useCvcOnlyValidation,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';
import React from 'react';
import {TextInput, View} from 'react-native';
export default function CvcFlow() {
const accessCheckout = new AccessCheckout({
baseUrl: 'https://try.access.worldpay.com/',
merchantId: 'YOUR_CHECKOUT_ID',
});
const validationEventListener = {
onCvcValidChanged(isValid) {
// TODO: handle the cvc validation result
},
onValidationSuccess() {
// TODO: handle the form when the validation is complete i.e. all fields are valid
},
};
const validationConfig = new CvcOnlyValidationConfig({
cvcId: 'cvcInput',
});
const { initialiseCvcOnlyValidation } = useCvcOnlyValidation(
accessCheckout,
validationConfig,
validationEventListener,
);
return (
<View
onLayout={() => {
initialiseCvcOnlyValidation()
.then(() => {
// You may want to optionally perform some actions once validation has been successfully initialized.
})
.catch((error) => {
// do something in case of error
});
}}
>
<TextInput
nativeID="cvcInput"
keyboardType="numeric"
placeholder="CVC"
/>
</View>
);
}import { AccessCheckout, CvcOnlyValidationConfig, useCvcOnlyValidation, } from '@worldpay/access-worldpay-checkout-react-native-sdk'; import React from 'react'; import {TextInput, View} from 'react-native'; export default function CvcFlow() { const accessCheckout = new AccessCheckout({ baseUrl: 'https://try.access.worldpay.com/', merchantId: 'YOUR_CHECKOUT_ID', }); const validationEventListener = { onCvcValidChanged(isValid) { // TODO: handle the cvc validation result }, onValidationSuccess() { // TODO: handle the form when the validation is complete i.e. all fields are valid }, }; const validationConfig = new CvcOnlyValidationConfig({ cvcId: 'cvcInput', }); const { initialiseCvcOnlyValidation } = useCvcOnlyValidation( accessCheckout, validationConfig, validationEventListener, ); return ( <View onLayout={() => { initialiseCvcOnlyValidation() .then(() => { // You may want to optionally perform some actions once validation has been successfully initialized. }) .catch((error) => { // do something in case of error }); }} > <TextInput nativeID="cvcInput" keyboardType="numeric" placeholder="CVC" /> </View> ); }
import {
AccessCheckout,
CvcOnlyValidationConfig,
CvcOnlyValidationEventListener,
useCvcOnlyValidation,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';
import React from 'react';
import { TextInput, View } from 'react-native';
export default function CvcFlow() {
const accessCheckout = new AccessCheckout({
baseUrl: 'https://try.access.worldpay.com/',
merchantId: 'YOUR_CHECKOUT_ID',
});
const validationEventListener: CvcOnlyValidationEventListener = {
onCvcValidChanged(isValid: boolean): void {
// TODO: handle the cvc validation result
},
onValidationSuccess(): void {
// TODO: handle the form when the validation is complete i.e. all fields are valid
},
};
const validationConfig = new CvcOnlyValidationConfig({
cvcId: 'cvcInput',
});
const { initialiseCvcOnlyValidation } = useCvcOnlyValidation(
accessCheckout,
validationConfig,
validationEventListener
);
return (
<View
onLayout={() => {
initialiseCvcOnlyValidation()
.then(() => {
// You may want to optionally perform some actions once validation has been successfully initialized.
})
.catch((error) => {
// do something in case of error
});
}}
>
<TextInput
nativeID="cvcInput"
keyboardType="numeric"
placeholder="CVC"
/>
</View>
);
}import { AccessCheckout, CvcOnlyValidationConfig, CvcOnlyValidationEventListener, useCvcOnlyValidation, } from '@worldpay/access-worldpay-checkout-react-native-sdk'; import React from 'react'; import { TextInput, View } from 'react-native'; export default function CvcFlow() { const accessCheckout = new AccessCheckout({ baseUrl: 'https://try.access.worldpay.com/', merchantId: 'YOUR_CHECKOUT_ID', }); const validationEventListener: CvcOnlyValidationEventListener = { onCvcValidChanged(isValid: boolean): void { // TODO: handle the cvc validation result }, onValidationSuccess(): void { // TODO: handle the form when the validation is complete i.e. all fields are valid }, }; const validationConfig = new CvcOnlyValidationConfig({ cvcId: 'cvcInput', }); const { initialiseCvcOnlyValidation } = useCvcOnlyValidation( accessCheckout, validationConfig, validationEventListener ); return ( <View onLayout={() => { initialiseCvcOnlyValidation() .then(() => { // You may want to optionally perform some actions once validation has been successfully initialized. }) .catch((error) => { // do something in case of error }); }} > <TextInput nativeID="cvcInput" keyboardType="numeric" placeholder="CVC" /> </View> ); }
后续步骤
