Access Worldpay
/
Create sessions to pay with card and CVC

Last Updated: 15 May 2024 | Change Log

Create sessions to pay with a card and CVC

Use our React Native SDK to secure your customer's payment details by creating separate sessions for the card details and CVC.

Full Sample Integration

You can see an example of the session generation here.

Set your views

When you create your checkout form, you must add the views that your customers use to enter their card details and set unique identifiers for each of them.

As part of our SDK, we provide the AccessCheckoutTextInput UI component dedicated to capturing your customer's card details to minimize your exposure to PCI Data and ensure you can qualify for the lowest level of PCI compliance (SAQ-A). You must use this component and define the nativeID property to identify each field.

Here's an example of how you would set your view configurations.

import React from 'react';
import {View} from 'react-native';
import {AccessCheckoutTextInput} from '@worldpay/access-worldpay-checkout-react-native-sdk';

export default function CardFlow() {

  return (
    <View>
      <AccessCheckoutTextInput
        nativeID="panInput"
        placeholder="Card Number"
      />
      <AccessCheckoutTextInput
        nativeID="expiryDateInput"
        placeholder="MM/YY"
      />
      <AccessCheckoutTextInput
        nativeID="cvcInput"
        placeholder="CVC"
      />
    </View>
  );
}

Validate card details

You can optionally validate your customer's card details. You can find instructions here.

Create CARD session and CVC session

Initialize the useAccessCheckout hook

You must now configure the useAccessCheckout hook.

To do this, you must provide your baseUrl, checkoutId and the identifiers which you defined as the nativeID property in the previous step within the AccessCheckoutTextInput components.

You must provide this configuration using the helper hook useCardConfig.

Here's an example of how to initialize it.

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

export default function CardFlow() {

  const {generateSessions} = useAccessCheckout({
    baseUrl: 'https://try.access.worldpay.com',
    checkoutId: 'YOUR_CHECKOUT_ID',
    config: useCardConfig({
      panId: 'panInput',
      expiryDateId: 'expiryDateInput',
      cvcId: 'cvcInput'
    }),
  });
}

Parameters

ParameterDescription
baseUrl
  • For testing use: https://try.access.worldpay.com/
  • For live use: https://access.worldpay.com/
checkoutIdYour unique checkout ID.
panIdThe nativeID assigned to your PAN AccessCheckoutTextInput component.
expiryDateIdThe nativeID assigned to your Expiry date AccessCheckoutTextInput component.
cvcIdThe nativeID assigned to your CVC AccessCheckoutTextInput component.

Generate CARD session and CVC session

The useAccessCheckout hook returns an object made of a generateSessions property which is a function. To generate a session, call the generateSessions function and pass in argument an array containing the session type(s) that you wish to generate, CARD and CVC in this instance. Note that session types are imported from our SDK.

Here's an example of what you should do when your customer submits their card details.

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

export default function CardFlow() {

  function handleOnPress() {
    const sessionTypes = [CARD, CVC];

    generateSessions(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>
      ...
      <Button
        title="Submit"
        onPress={handleOnPress}
      />
    </View>
  );
}

Full code sample

Here's the full code sample of the steps above.

import React from 'react';
import {Button, View} from 'react-native';
import {
  AccessCheckoutTextInput,
  CARD,
  CVC,
  useAccessCheckout,
  useCardConfig,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';

export default function CardFlow() {

  const {generateSessions} = useAccessCheckout({
    baseUrl: 'https://try.access.worldpay.com',
    checkoutId: 'YOUR_CHECKOUT_ID',
    config: useCardConfig({
      panId: 'panInput',
      expiryDateId: 'expiryDateInput',
      cvcId: 'cvcInput'
    }),
  });

  function handleOnPress() {
    const sessionTypes = [CARD, CVC];

    generateSessions(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>
      <AccessCheckoutTextInput
        nativeID="panInput"
        placeholder="Card Number"
      />
      <AccessCheckoutTextInput
        nativeID="expiryDateInput"
        placeholder="MM/YY"
      />
      <AccessCheckoutTextInput
        nativeID="cvcInput"
        placeholder="CVC"
      />
      <Button
        title="Submit"
        onPress={handleOnPress}
      />
    </View>
  );
}
Caution

Do not validate the structure or length of the session resources. We follow HATEOS standard to allow us the flexibility to extend our APIs with non-breaking changes.

Create a verified token

Once you've received a CARD session you must create a verified token to take a payment.

Important

The CARD session has a lifespan of one minute and you can use it only once. If you do not create a token within that time, you must create a new CARD session value.

Take a payment

Use the value of the CVC session and the verified token in our card/checkout paymentInstrument to take a payment.

Important

The CVC session has a lifespan of 15 minutes and you can use it only once. If you do not take a payment within that time, you must create a new CVC session value.

You can use this paymentInstrument in our Card Payments API..

Next steps

Create a verified token