Headless Apple Pay

1
import { TransakApplePay } from ‘@transak/ui-components-rn’;
2
3
<TransakApplePay
4
  sessionId={sessionId} // sessionId from Previous Step
5
  environment={environment} // ‘STAGING’ | ‘PRODUCTION’
6
  onReady={() => {
7
    // Component is ready
8
  }}
9
  onSuccess={({ requestId }) => {
10
    // Payment data captured — use requestId in the next step
11
  }}
12
  onError={({ code }) => {
13
    // Handle error
14
  }}
15
/>

1
{sessionId && !applePayErrorCode && (
2
  <View
3
    style={[
4
      styles.card,
5
      styles.applePayCard,
6
      {
7
        backgroundColor:
8
          applePayConfig.colorMode === ‘DARK’ ? ‘#000’ : ‘#fff’,
9
      },
10
    ]}
11
    // First touch on the Apple Pay button bubbles up here (the
12
    // WebView still consumes the press for its own click handler);
13
    // we use that as the trigger to fade the blur in, since the
14
    // SDK doesn’t expose a "sheet opened" event.
15
    onTouchStart={() => {
16
      if (isApplePayReady) setSheetActive(true);
17
    }}
18
  >
19
    <View style={styles.applePayFrame}>
20
      <TransakApplePay
21
        sessionId={sessionId}
22
        environment={environment} // ‘STAGING’ | ‘PRODUCTION’
23
        onReady={() => {
24
          setIsApplePayReady(true);
25
        }}
26
        onSuccess={(payload) => {
27
          void handlePaymentCaptured(payload.requestId);
28
        }}
29
        onError={(error) => {
30
          setApplePayErrorCode(error.code);
31
          setSheetActive(false);
32
        }}
33
      />
34
      {!isApplePayReady && (
35
        <View style={styles.applePayOverlay}>
36
          <ActivityIndicator size="small" color={tokens.primary} />
37
          <Text style={styles.loadingPillText}>Loading Apple Pay</Text>
38
        </View>
39
      )}
40
    </View>
41
  </View>
42
)}