Recipes
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
- Create a Customer
- Create a Payment Method
- Get a Card SetupIntent session token
•••
- Initialise the Super Web Component in your frontend
- Wait for the Payment Method to be ready to use
- Create an Off Session payment
🦉Open Recipe
Shell
xxxxxxxxxx
1
curl --request POST \
2
3
4
5
6
7
8
9
10
11
12
# Response
13
# {
14
# "id":"<<customerId>>",
15
# "externalReference": "<your customer ID>",
16
# "paymentMethods": [],
17
# }
18
19
curl --request POST \
20
21
22
23
24
25
26
27
28
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
45
46
47
48
49
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
68
69
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
85
86
87
88
89
90
91
92
93
94
95
96
97
# Response
98
# {
99
# "transactionId": "<<paymentIntentId>>",
100
# "transactionReference": "<<paymentRef>>",
101
# "externalReference": "<<your payment reference>>",
102
# "transactionStatus": "PaymentSuccess",
103
# }