@gnosispay/pse-react-native 1.0.1 → 1.0.3

package/README.md

@@ -1,20 +1,24 @@
 # PSE React Native
 
-A React Native library that provides a secure WebView component for integrating Gnosis Pay card functionality into your mobile applications.
+A React Native library that provides a secure WebView component for integrating Gnosis Pay PSE functionality into your mobile applications.
 
-## Features
+## Setup
 
-- 🔒 **Secure WebView Integration** - Safely embed Gnosis Pay card interfaces
-- 📱 **Cross-Platform** - Works on both iOS and Android
-- ⚡ **Easy Integration** - Simple component with minimal setup
-- 🎛️ **Configurable** - Flexible configuration options for different environments
-- 📨 **Message Handling** - Built-in communication between WebView and React Native
-- 🔄 **WebView Controls** - Programmatic navigation and reload capabilities
+This guide assumes that you have already integrated PSE SDK into your web flow.
+
+On your backend, you first need to host the static HTML wrapper for the PSE SDK client.
+We have provided an [example HTML file](https://github.com/gnosispay/ui/blob/main/pse-backend-demo/src/static/native-webview.html) in our example for [backend integration](https://github.com/gnosispay/ui/blob/main/pse-backend-demo/).
+
+We recommend putting this endpoint in the same application that serves the ephemeral tokens to your PSE integration, so you can easily inject that token into the frame.
+
+Then you should pass the URL to this frame as `webViewUrl` parameter.
+
+Refer to [PSE Docs](https://docs.gnosispay.com/cards/pse-integration) for all further details.
 
 ## Installation
 
 ```bash
-npm install pse-react-native
+npm install @gnosispay/pse-react-native
 ```
 
 ### Peer Dependencies
@@ -36,16 +40,16 @@ npx expo install react-native-webview
 ```tsx
 import React, { useRef } from "react";
 import { View, Button, Alert } from "react-native";
-import { PSEWebView, PSEWebViewRef } from "pse-react-native";
+import { PSEWebView, PSEWebViewRef } from "@gnosispay/pse-react-native";
 
 export default function PaymentScreen() {
   const webViewRef = useRef<PSEWebViewRef>(null);
 
   const config = {
     appId: "your-app-id",
-    authToken: "your-auth-token",
-    cardToken: "your-card-token",
-    baseUrl: "https://pse-backend.v2.gnosispay.com", // Optional
+    gnosisPayApiAuthToken: "users-gnosispay-api-token",
+    cardToken: "users-card-token",
+    webViewUrl: "https://pse-backend.v2.gnosispay.com/native-webview",
   };
 
   const handleError = (error: string) => {
@@ -100,9 +104,9 @@ export default function PaymentScreen() {
 ```tsx
 interface PSEConfig {
   appId: string; // Your application identifier
-  authToken: string; // Authentication token
+  gnosisPayApiAuthToken: string; // Authentication token
   cardToken: string; // Card-specific token
-  baseUrl?: string; // Optional: Custom backend URL
+  webViewUrl?: string; // Full URL where your PSE iframe is hosted
 }
 ```
 
@@ -170,9 +174,9 @@ const handleError = (error: string) => {
 ```tsx
 const config = {
   appId: "your-prod-app-id",
-  authToken: "your-prod-auth-token",
+  gnosisPayApiAuthToken: "your-prod-auth-token",
   cardToken: "your-prod-card-token",
-  baseUrl: "https://pse-backend.v2.gnosispay.com",
+  webViewUrl: "https://pse-backend.v2.gnosispay.com/native-webview",
 };
 ```
 
@@ -181,9 +185,9 @@ const config = {
 ```tsx
 const config = {
   appId: "your-staging-app-id",
-  authToken: "your-staging-auth-token",
+  gnosisPayApiAuthToken: "your-staging-auth-token",
   cardToken: "your-staging-card-token",
-  baseUrl: "https://pse-backend-staging.v2.gnosispay.com",
+  webViewUrl: "https://pse-backend-staging.v2.gnosispay.com/native-webview",
 };
 ```
 
@@ -239,11 +243,11 @@ This compiles the TypeScript source files and generates the distribution files i
 
 - Verify your authentication tokens are valid
 - Check network connectivity
-- Ensure the baseUrl is accessible
+- Ensure the webViewUrl is accessible
 
 **Authentication errors:**
 
-- Double-check your appId, authToken, and cardToken
+- Double-check your appId, gnosisPayApiAuthToken, and cardToken
 - Verify tokens haven't expired
 - Contact your PSE provider for token validation
 

package/lib/PSEWebView.js

@@ -18,8 +18,9 @@ const PSEWebView = forwardRef(({ config, onError, onMessage, onLoad, style, test
         // Send parameters to webview after it loads
         const params = {
             appId: config.appId.trim(),
-            authToken: config.authToken.trim(),
+            gnosisPayApiAuthToken: config.gnosisPayApiAuthToken.trim(),
             cardToken: config.cardToken.trim(),
+            elementType: config.elementType,
         };
         const message = JSON.stringify(params);
         webViewRef.current?.postMessage(message);
@@ -51,8 +52,10 @@ const PSEWebView = forwardRef(({ config, onError, onMessage, onLoad, style, test
         onError?.(errorMessage);
         Alert.alert("PSE WebView Error", errorMessage);
     };
-    const baseUrl = config.baseUrl || "https://pse-backend.v2.gnosispay.com";
-    const webViewUrl = `${baseUrl}/native-webview`;
+    const webViewUrl = config.webViewUrl;
+    if (!webViewUrl) {
+        throw new Error("webViewUrl is required");
+    }
     return (<WebView ref={webViewRef} source={{ uri: webViewUrl }} style={[styles.webview, style]} startInLoadingState={true} scalesPageToFit={true} onLoad={handleWebViewLoad} onMessage={handleWebViewMessage} onError={handleWebViewError} javaScriptEnabled={true} testID={testID}/>);
 });
 PSEWebView.displayName = "PSEWebView";

package/lib/PSEWebView.tsx

@@ -23,8 +23,9 @@ const PSEWebView = forwardRef<PSEWebViewRef, PSEWebViewProps>(
       // Send parameters to webview after it loads
       const params = {
         appId: config.appId.trim(),
-        authToken: config.authToken.trim(),
+        gnosisPayApiAuthToken: config.gnosisPayApiAuthToken.trim(),
         cardToken: config.cardToken.trim(),
+        elementType: config.elementType,
       };
 
       const message = JSON.stringify(params);
@@ -62,8 +63,10 @@ const PSEWebView = forwardRef<PSEWebViewRef, PSEWebViewProps>(
       Alert.alert("PSE WebView Error", errorMessage);
     };
 
-    const baseUrl = config.baseUrl || "https://pse-backend.v2.gnosispay.com";
-    const webViewUrl = `${baseUrl}/native-webview`;
+    const webViewUrl = config.webViewUrl;
+    if (!webViewUrl) {
+      throw new Error("webViewUrl is required");
+    }
 
     return (
       <WebView

package/lib/types.d.ts

@@ -1,8 +1,10 @@
+import type { ElementType } from "@gnosispay/pse-sdk";
 export interface PSEConfig {
     appId: string;
-    authToken: string;
+    gnosisPayApiAuthToken: string;
     cardToken: string;
-    baseUrl?: string;
+    webViewUrl?: string;
+    elementType: ElementType;
 }
 export interface PSEWebViewProps {
     config: PSEConfig;

package/lib/types.ts

@@ -1,8 +1,11 @@
+import type { ElementType } from "@gnosispay/pse-sdk";
+
 export interface PSEConfig {
   appId: string;
-  authToken: string;
+  gnosisPayApiAuthToken: string;
   cardToken: string;
-  baseUrl?: string;
+  webViewUrl?: string;
+  elementType: ElementType;
 }
 
 export interface PSEWebViewProps {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@gnosispay/pse-react-native",
   "main": "lib/index.js",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "types": "lib/index.d.ts",
   "files": [
     "lib/",
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^14.1.0",
+    "@gnosispay/pse-sdk": "^1.2.2",
     "@react-navigation/bottom-tabs": "^7.3.10",
     "@react-navigation/elements": "^2.3.8",
     "@react-navigation/native": "^7.1.6",
@@ -52,21 +53,21 @@
     "expo-symbols": "~0.4.5",
     "expo-system-ui": "~5.0.10",
     "expo-web-browser": "~14.2.0",
-    "react": "19.0.0",
+    "react": ">=18.0.0",
     "react-dom": "19.0.0",
-    "react-native": "0.79.5",
+    "react-native": ">=0.70.0",
     "react-native-gesture-handler": "~2.24.0",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.11.1",
     "react-native-web": "~0.20.0",
-    "react-native-webview": "13.13.5"
+    "react-native-webview": ">=13.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@types/react": "~19.0.10",
-    "typescript": "~5.8.3",
     "eslint": "^9.25.0",
-    "eslint-config-expo": "~9.2.0"
+    "eslint-config-expo": "~9.2.0",
+    "typescript": "~5.8.3"
   }
 }