# Recipes

**Accept an Off-Session Payment**

Learn how to capture a customer's card details, to charge them at a later date.

### In this Recipe

1. Create a Customer
2. Create a Payment Method
3. Get a Card SetupIntent session token

•••

1. Initialise the Super Web Component in your frontend
2. Wait for the Payment Method to be ready to use
3. Create an Off Session payment

🦉Open Recipe

### Shell

```
xxxxxxxxxx
```

1

```
curl --request POST \
```

2

```	 --url https://api.test.superpayments.com/2025-11-01/customers \
```

3

```	 --header 'Authorization: <<apiKey>>' \
```

4

```	 --header 'accept: application/json' \
```

5

```	 --header 'content-type: application/json' \
```

6

```	 --data '{
```

7

```		"externalReference": "<<your customer ID>>",
```

8

```		"brandId": "<<brandId>>",
```

9

```		"metadata": {}
```

10

```	}'
```

11

```

```

12

```
# Response
```

13

```
# {
```

14

```
#    "id":"<<customerId>>",
```

15

```
#    "externalReference": "<your customer ID>",
```

16

```
#    "paymentMethods": [],
```

17

```
# }
```

18

```

```

19

```
curl --request POST \
```

20

```	 --url https://api.test.superpayments.com/2025-11-01/payment-methods \
```

21

```	 --header 'Authorization: <<apiKey>>' \
```

22

```	 --header 'accept: application/json' \
```

23

```	 --header 'content-type: application/json'
```

24

```	 --data '{
```

25

```		"customerId":"<<customerId>>",
```

26

```		"type": "CARD",
```

27

```		"usage": "OFF_SESSION",
```

28

```		"metadata": {}
```

29

```	}'
```

30

```

```

31

```
# Response
```

32

```
# {
```

33

```
#   "id": "<<paymentMethodId>>",
```

34

```
#   "type": "CARD",
```

35

```
#   "usage": "OFF_SESSION",
```

36

```
#   "status": "REQUIRES_ACTION",
```

37

```
#   "customerId": "<<customerId>>",
```

38

```
#   "metadata": {},
```

39

```
#   "createdAt": "2025-11-01T00:00:00.000",
```

40

```
#   "updatedAt": "2025-11-01T00:00:00.000"
```

41

```
# }
```

42

```

```

43

```
curl --request POST \
```

44

```	 --url https://api.test.superpayments.com/2025-11-01/payment-methods/<<paymentMethodId>>/setup-intents \
```

45

```	 --header 'Authorization: <<apiKey>>' \
```

46

```	 --header 'accept: application/json' \
```

47

```	 --header 'content-type: application/json'
```

48

```	 --data '{
```

49

```		"returnUrl": "https://<your website success page>.com/"
```

50

```	}'
```

51

```

```

52

```
# Response
```

53

```
# {
```

54

```
#   "id": "<<setupIntentId>>",
```

55

```
#   "sessionToken": "<<sessionToken>>"
```

56

```
# }
```

57

```

```

58

```
# Import super-card component
```

59

```
# Script Production: https://cdn.superpayments.com/js/payments.js
```

60

```
# Script Mock: https://cdn.superpayments.com/js/test/payment.js
```

61

```
<super-card session-token="<<sessionToken>>"><super-card>
```

62

```

```

63

```
<!-- Render a submit button and call window.superCard.submit() on click -->
```

64

```
<button onclick="window.superCard.submit()">Save Card</button>
```

65

```

```

66

```
curl --request GET \
```

67

```	 --url https://api.test.superpayments.com/2025-11-01/payment-methods/<<paymentMethodId>> \
```

68

```	 --header 'Authorization: <<apiKey>>' \
```

69

```	 --header 'accept: application/json'
```

70

```

```

71

```
# Response
```

72

```
# {
```

73

```
#   "id": "<<paymentMethodId>>",
```

74

```
#   "type": "CARD",
```

75

```
#   "usage": "OFF_SESSION",
```

76

```
#   "status": "ENABLED",
```

77

```
#   "customerId": "<<customerId>>",
```

78

```
#   "metadata": {},
```

79

```
#   "createdAt": "2025-11-01T00:00:00.000",
```

80

```
#   "updatedAt": "2025-11-01T00:00:00.000"
```

81

```
# }
```

82

```

```

83

```
curl --request POST \
```

84

```	 --url https://api.test.superpayments.com/2025-11-01/payments \
```

85

```	 --header 'Authorization: <<apiKey>>' \
```

86

```	 --header 'accept: application/json' \
```

87

```	 --header 'content-type: application/json'
```

88

```	 --data '{
```

89

```		"paymentInitiatorId":"<<paymentInitiatorId>>",
```

90

```		"amount": 10000,
```

91

```		"currency": "GBP",
```

92

```		"externalReference": "<<your payment reference>>",
```

93

```		"offSession": true,
```

94

```		"paymentMethodId": "<<paymentMethodId>>"
```

95

```	}'
```

96

```

```

97

```
# Response
```

98

```
# {
```

99

```
#   "transactionId": "<<paymentIntentId>>",
```

100

```
#   "transactionReference": "<<paymentRef>>",
```

101

```
#   "externalReference": "<<your payment reference>>",
```

102

```
#   "transactionStatus": "PaymentSuccess",
```

103

```
# }
```