Translation disclaimer

Documentation is written in English and subsequently translated. This page, therefore, might not have the most up-to-date content. If any questions arise relating to the accuracy of the translated content, please refer to the English version of the page.

Menu

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

创建用卡支付的会话

创建一个 session,以便使用我们的 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>
  );
}

验证银行卡资料

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

创建会话

初始化 AccessCheckout 客户端

您现在必须初始化 AccessCheckout

为此,您必须提供 baseUrlmerchantId

下方为如何进行初始化的示例。

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您独特的商户标识号。

生成卡会话

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

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

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

...

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

  accessCheckout.generateSessions(cardDetails, sessionTypes)
    .then((sessions) => {
      const cardSession = sessions.card;
      // do something with the card session ...
    })
    .catch((error) => {
      // do something in case of error
    });
}
import {
  ...
  CARD,
  CardDetails,
  Sessions,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';

...

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

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

完整代码示例

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

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

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];
    const cardDetails = {
      pan,
      expiryDate,
      cvc,
    };

    accessCheckout.generateSessions(cardDetails, sessionTypes)
      .then((sessions) => {
        const cardSession = sessions.card;
        // do something with the card session ...
      })
      .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 React, { useState } from 'react';
import { Button, TextInput, View } from 'react-native';
import {
  AccessCheckout,
  CARD,
  CardDetails,
  Sessions,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';

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: Array<string> = [CARD];
    const cardDetails: CardDetails = {
      pan,
      expiryDate,
      cvc,
    };

    accessCheckout.generateSessions(cardDetails, sessionTypes)
      .then((sessions: Sessions) => {
        const cardSession = sessions.card;
        // do something with the card session ...
      })
      .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 值。


后续步骤


创建已验证 Token