- Home
- All APIs
- Access Worldpay
- Checkout SDK
- React Native SDK
- Create a session to pay with a card
Create a session to pay with a card
Use our React Native SDK to secure your customer's card details by creating a session
.
Full sample integration: You can see an example of the session generation
Set your views
When you create your checkout form, you must set the views that your customers use to enter and submit their card details.
Here's an example of how you would set your view configurations.
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>
);
}
Validate card details
You can optionally validate your customer's card details. You can find instructions
Create a session
Initialize the AccessCheckout client
You must now initialize the AccessCheckout
.
To do this, you must provide your baseUrl
and merchantId
(checkout ID).
Here's an example of how to initialize it.
import {
AccessCheckout,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';
const accessCheckout = new AccessCheckout({
baseUrl: 'https://try.access.worldpay.com/',
merchantId: 'YOUR_CHECKOUT_ID',
});
Parameters
Parameter | Description |
---|---|
baseUrl |
|
merchantId | Your unique checkout ID. |
Generate CARD session
You must pass the customer's card details and the CARD
session type to the generateSessions
method of the AccessCheckout
instance.
Here's an example of what you should do when your customer submits their card details.
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
});
}
Full code sample
Here's the full code sample of the steps above.
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>
);
}
Create a verified token
Once you've received a CARD session
you must create a
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.
Next steps
Create a