@gnosispay/pse-react-native 1.0.1 → 1.0.2

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
+    authToken: "users-gnosispay-api-token",
+    cardToken: "users-card-token",
+    webViewUrl: "https://pse-backend.v2.gnosispay.com/native-webview",
   };
 
   const handleError = (error: string) => {
@@ -102,7 +106,7 @@ interface PSEConfig {
   appId: string; // Your application identifier
   authToken: string; // Authentication token
   cardToken: string; // Card-specific token
-  baseUrl?: string; // Optional: Custom backend URL
+  webViewUrl?: string; // Full URL where your PSE iframe is hosted
 }
 ```
 
@@ -172,7 +176,7 @@ const config = {
   appId: "your-prod-app-id",
   authToken: "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",
 };
 ```
 
@@ -183,7 +187,7 @@ const config = {
   appId: "your-staging-app-id",
   authToken: "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,7 +243,7 @@ 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:**
 

package/lib/PSEWebView.js

@@ -51,8 +51,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

@@ -62,8 +62,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

@@ -2,7 +2,7 @@ export interface PSEConfig {
     appId: string;
     authToken: string;
     cardToken: string;
-    baseUrl?: string;
+    webViewUrl?: string;
 }
 export interface PSEWebViewProps {
     config: PSEConfig;

package/lib/types.ts

@@ -2,7 +2,7 @@ export interface PSEConfig {
   appId: string;
   authToken: string;
   cardToken: string;
-  baseUrl?: string;
+  webViewUrl?: string;
 }
 
 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.2",
   "types": "lib/index.d.ts",
   "files": [
     "lib/",