注释：该 SDK 仅用于预览用途并会随时更改。

创建会话以便使用卡和 CVC 进行支付

为银行卡资料和 CVC 创建单独的会话，从而使用我们的 React Native SDK 来确保您客户支付详情的安全。

完整示例集成：您可以在此处查看会话生成示例。

设置您的视图

在创建结账表时，您必须设置供您的客户用于输入并提交其银行卡资料的视图。

以下是您应如何设置视图配置的示例。

Copied!

import React, {useState} from 'react';
import {Button, TextInput, View} from 'react-native';

export default function CardFlow() {
  const [pan, setPan] = useState ('');
  const [expiryDate, setExpiryDate] = useState ('');
  const [cvc, setCvc] = useState ('');

  function createSession() {
  ...
  }

  return (
    <View>
      <TextInput
        keyboardType="numeric"
        placeholder="Card Number"
        onChangeText={setPan}
      />
      <TextInput
        keyboardType="numeric"
        placeholder="MM/YY"
        onChangeText={setExpiryDate}
      />
      <TextInput
        keyboardType="numeric"
        placeholder="CVC"
        onChangeText={setCvc}
      />
      <Button
        onPress={createSession}
      />
    </View>
  );
}

import React, {useState} from 'react';
import {Button, TextInput, View} from 'react-native';

export default function CardFlow() {
  const [pan, setPan] = useState <string> ('');
  const [expiryDate, setExpiryDate] = useState <string> ('');
  const [cvc, setCvc] = useState <string> ('');

  function createSession() {
  ...
  }

  return (
    <View>
      <TextInput
        keyboardType="numeric"
        placeholder="Card Number"
        onChangeText={setPan}
      />
      <TextInput
        keyboardType="numeric"
        placeholder="MM/YY"
        onChangeText={setExpiryDate}
      />
      <TextInput
        keyboardType="numeric"
        placeholder="CVC"
        onChangeText={setCvc}
      />
      <Button
        onPress={createSession}
      />
    </View>
  );
}

验证银行卡资料

您可以选择验证客户的银行卡资料。您可以在此处查找说明。

创建 CARD 会话和 CVC 会话

初始化 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',
});

参数

参数	描述
`baseUrl`	对于测试用途：`https://try.access.worldpay.com/` 对于实时用途：`https://access.worldpay.com/`
`merchantId`	您独特的商户标识号。

生成卡会话和 CVC 会话

您必须将客户的银行卡资料以及 CARD 和 CVC 会话类型传送至 AccessCheckout 实例的 generateSessions 方法。

以下是在客户提交银行卡资料时应进行的操作的示例。

Copied!

import {
  ...
  CARD,
  CVC,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';

...

function createSession() {
  const sessionTypes = [CARD, CVC];
  const cardDetails = {
    pan,
    expiryDate,
    cvc,
  };

  accessCheckout.generateSessions(cardDetails, sessionTypes)
    .then((sessions) => {
      const cardSession = sessions.card;
      const cvcSession = sessions.cvc;
      // do something with the card and cvc sessions ...
    })
    .catch((error) => {
      // do something in case of error
    });
}

import {
  ...
  CARD,
  CardDetails,
  CVC,
  Sessions,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';

...

function createSession() {
  const sessionTypes: Array<string> = [CARD, CVC];
  const cardDetails: CardDetails = {
    pan,
    expiryDate,
    cvc,
  };

  accessCheckout.generateSessions(cardDetails, sessionTypes)
    .then((sessions: Sessions) => {
      const cardSession = sessions.card;
      const cvcSession = sessions.cvc;
      // do something with the card and cvc sessions ...
    })
    .catch((error) => {
      // do something in case of error
    });
}

完整代码示例

以下是上述步骤的完整代码示例。

Copied!

import {
  AccessCheckout,
  CARD,
  CVC,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';
import React, {useState} from 'react';
import {Button, TextInput, View} from 'react-native';

export default function CardFlow() {
  const [pan, setPan] = useState ('');
  const [expiryDate, setExpiryDate] = useState ('');
  const [cvc, setCvc] = useState ('');

  const accessCheckout = new AccessCheckout({
    baseUrl: 'https://try.access.worldpay.com/',
    merchantId: 'YOUR_CHECKOUT_ID',
  });

  function createSession() {
    const sessionTypes = [CARD, CVC];
    const cardDetails = {
      pan,
      expiryDate,
      cvc,
    };

    accessCheckout.generateSessions(cardDetails, sessionTypes)
      .then((sessions) => {
        const cardSession = sessions.card;
        const cvcSession = sessions.cvc;
        // do something with the card and cvc sessions ...
      })
      .catch((error) => {
        // do something in case of error
      });
  }

  return (
    <View>
      <TextInput
        keyboardType="numeric"
        placeholder="Card Number"
        onChangeText={setPan}
      />
      <TextInput
        keyboardType="numeric"
        placeholder="MM/YY"
        onChangeText={setExpiryDate}
      />
      <TextInput
        keyboardType="numeric"
        placeholder="CVC"
        onChangeText={setCvc}
      />
      <Button
        title="submit"
        onPress={createSession}
      />
    </View>
  );
}

import {
  AccessCheckout,
  CARD,
  CardDetails,
  CVC,
  Sessions,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';
import React, { useState } from 'react';
import { Button, TextInput, View } from 'react-native';

export default function CardFlow() {
  const [pan, setPan] = useState<string>('');
  const [expiryDate, setExpiryDate] = useState<string>('');
  const [cvc, setCvc] = useState<string>('');

  const accessCheckout = new AccessCheckout({
    baseUrl: 'https://try.access.worldpay.com/',
    merchantId: 'YOUR_CHECKOUT_ID',
  });

  function createSession() {
    const sessionTypes = [CARD, CVC];
    const cardDetails: CardDetails = {
      pan,
      expiryDate,
      cvc,
    };

    accessCheckout.generateSessions(cardDetails, sessionTypes)
      .then((sessions: Sessions) => {
        const cardSession = sessions.card;
        const cvcSession = sessions.cvc;
        // do something with the card and cvc sessions ...
      })
      .catch((error) => {
        // do something in case of error
      });
  }

  return (
    <View>
      <TextInput
        keyboardType="numeric"
        placeholder="Card Number"
        onChangeText={setPan}
      />
      <TextInput
        keyboardType="numeric"
        placeholder="MM/YY"
        onChangeText={setExpiryDate}
      />
      <TextInput
        keyboardType="numeric"
        placeholder="CVC"
        onChangeText={setCvc}
      />
      <Button
        title="submit"
        onPress={createSession}
      />
    </View>
  );
}

创建已验证 Token

一旦收到了 CARD session，您就必须创建已验证 Token以接受支付。

重要信息：CARD session 具有 1 分钟的使用寿命，并且您只能使用一次。如果未在该时间内创建 Token，您就必须创建新的 CARD session 值。

接受支付

使用 CVC session 的值和我们卡/结账 paymentInstrument 中的已验证 Token 来接受预存卡号支付。

重要信息：CVC session 具有 15 分钟的使用寿命，并且您只能使用一次。如果未在该时间内接受支付，您就必须创建新的 CVC session 值。

该 paymentInstrument 可用于任何预存卡号资源（payments:cardonFileAuthorize、payments:migrateCardOnFileSale和payments:migrateCardOnFileAuthorize）。

需要仅为 CVC 创建会话吗？查看下面的集成示例：

仅为 CVC 创建会话

使用我们的 React Native SDK，通过为 CVC 创建单独的会话来保护您的客户的支付详情。

完整示例集成：您可以在此处查看会话生成示例。

设置您的视图

在创建结账表时，您必须设置供您的客户用于输入和提交其 CVC 详情的视图。

以下是您应如何设置视图配置的示例。

Copied!

import React, {useState} from 'react';
import {Button, TextInput, View} from 'react-native';

export default function CvcFlow() {
  const [cvc, setCvc] = useState ('');

  function createSession() {
  ...
  }

  return (
    <View>
      <TextInput
        keyboardType="numeric"
        placeholder="CVC"
        onChangeText={setCvc}
      />
      <Button
        onPress={createSession}
      />
    </View>
  );
}

import React, {useState} from 'react';
import {Button, TextInput, View} from 'react-native';

export default function CvcFlow() {
  const [cvc, setCvc] = useState <string> ('');

  function createSession() {
  ...
  }

  return (
    <View>
      <TextInput
        keyboardType="numeric"
        placeholder="CVC"
        onChangeText={setCvc}
      />
      <Button
        onPress={createSession}
      />
    </View>
  );
}

验证卡详情

您可以选择验证客户的卡详情。您可以在此处查找说明。

创建 CVC 会话

初始化 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',
});

参数

参数	描述
`baseUrl`	对于测试用途：`https://try.access.worldpay.com/` 对于实时用途：`https://access.worldpay.com/`
`merchantId`	您独特的商户标识号。

生成 CVC `session`

您必须将客户的卡详情和 CVC 会话类型传送至 AccessCheckout 实例的 generateSessions 方法。

以下是在客户提交其卡详情时您应该做什么的示例。

Copied!

import {
  ...
  CVC,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';

...

function createSession() {
  const sessionTypes = [CVC];
  const cardDetails = {
    cvc,
  };

  accessCheckout.generateSessions(cardDetails, sessionTypes)
    .then((sessions) => {
      const cvcSession = sessions.cvc;
      // do something with the cvc only sessions ...
    })
    .catch((error) => {
      // do something in case of error
    });
}

import {
  ...
  CardDetails,
  CVC,
  Sessions,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';

...

function createSession() {
  const sessionTypes: Array<string> = [CVC];
  const cardDetails: CardDetails = {
    cvc,
  };

  accessCheckout.generateSessions(cardDetails, sessionTypes)
    .then((sessions: Sessions) => {
      const cvcSession = sessions.cvc;
      // do something with the cvc only sessions ...
    })
    .catch((error) => {
      // do something in case of error
    });
}

完整代码示例

以下是上述步骤的完整代码示例。

Copied!

import {
  AccessCheckout,
  CVC,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';
import React, {useState} from 'react';
import {Button, TextInput, View} from 'react-native';

export default function CvcFlow() {
  const [cvc, setCvc] = useState ('');

  const accessCheckout = new AccessCheckout({
    baseUrl: 'https://try.access.worldpay.com/',
    merchantId: 'YOUR_CHECKOUT_ID',
  });

  function createSession() {
    const sessionTypes = [CVC];
    const cardDetails = {
      cvc,
    };

    accessCheckout.generateSessions(cardDetails, sessionTypes)
      .then((sessions) => {
        const cvcSession = sessions.cvc;
        // do something with the cvc only sessions ...
      })
      .catch((error) => {
        // do something in case of error
      });
  }

  return (
    <View>
      <TextInput
        keyboardType="numeric"
        placeholder="CVC"
        onChangeText={setCvc}
      />
      <Button
        title="submit"
        onPress={createSession}
      />
    </View>
  );
}

import {
  AccessCheckout,
  CardDetails,
  CVC,
  Sessions,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';
import React, { useState } from 'react';
import { Button, TextInput, View } from 'react-native';

export default function CvcFlow() {
  const [cvc, setCvc] = useState<string>('');

  const accessCheckout = new AccessCheckout({
    baseUrl: 'https://try.access.worldpay.com/',
    merchantId: 'YOUR_CHECKOUT_ID',
  });

  function createSession() {
    const sessionTypes = [CVC];
    const cardDetails: CardDetails = {
      cvc,
    };

    accessCheckout.generateSessions(cardDetails, sessionTypes)
      .then((sessions: Sessions) => {
        const cvcSession = sessions.cvc;
        // do something with the cvc only sessions ...
      })
      .catch((error) => {
        // do something in case of error
      });
  }

  return (
    <View>
      <TextInput
        keyboardType="numeric"
        placeholder="CVC"
        onChangeText={setCvc}
      />
      <Button
        title="submit"
        onPress={createSession}
      />
    </View>
  );
}

接受支付

使用 CVC session 的值和在我们的 CVC/结账 paymentInstrument 中存储的已验证 Token 来接受预存卡号支付。

重要信息：CVC session 具有 15 分钟的使用寿命，并且您只能使用一次。如果未在该时间内接受支付，您就必须创建新的 CVC session 值。

该 paymentInstrument 可用于任何预存卡号资源（payments:cardonFileAuthorize、payments:migrateCardOnFileSale和payments:migrateCardOnFileAuthorize）。

Next steps

接受预存卡号销售
接受预存卡号授权或
迁移预存卡号授权

Translation disclaimer

创建会话以便使用卡和 CVC 进行支付

设置您的视图

验证银行卡资料

创建 CARD 会话和 CVC 会话

初始化 AccessCheckout 客户端

参数

生成卡会话和 CVC 会话

完整代码示例

创建已验证 Token

接受支付

仅为 CVC 创建会话

设置您的视图

验证卡详情

创建 CVC 会话

初始化 AccessCheckout 客户端

参数

生成 CVC `session`

完整代码示例

接受支付

Searching accross the entire site

Filter by product

Filter by product Searching across the entire site

Translation disclaimer Collapse

创建会话以便使用卡和 CVC 进行支付

设置您的视图

验证银行卡资料

创建 CARD 会话和 CVC 会话

初始化 AccessCheckout 客户端

参数

生成卡会话和 CVC 会话

完整代码示例

创建已验证 Token

接受支付

仅为 CVC 创建会话

设置您的视图

验证卡详情

创建 CVC 会话

初始化 AccessCheckout 客户端

参数

生成 CVC session

完整代码示例

接受支付

Searching accross the entire site

Filter by product

Filter by product Searching across the entire site

​

Translation disclaimer

生成 CVC `session`