Getting Started

Artifact access

In order to seamlessly integrate with our Web SDK artifact, you are required to configure your package manager client by using the following steps.

Configure .npmrc file

1. Open or create a .npmrc file in the root directory of your project.
2. Add the following line to the .npmrc file:

@paysafe:registry=https://repository.paysafe.com

Save Changes

Save the changes to the .npmrc file.

Summary

With the .npmrc file configured, your client will use the specified registry to access the Web SDK from our Artifactory registry.

If you encounter any issues or have questions regarding artifact access, contact our team.

Installation

Once you have set up your project to access the artifact, you can install it the SDK and start using it.

npm

Installation with npm version 7 and above (peer dependencies are installed automatically):

npm install @paysafe/paysafe-wallet-saas-web

Installation with npm prior to version 7:

npm install @paysafe/paysafe-wallet-saas-web @paysafe/paysafe-wallet-saas-screening-web

yarn

Installation with yarn:

yarn add @paysafe/paysafe-wallet-saas-web @paysafe/paysafe-wallet-saas-screening-web

Dependencies

The SDK has the following peer dependencies to keep in mind:

• @paysafe/paysafe-wallet-saas-screening-web

Usage

First, you need to import the Wallet and get a reference to its instance.

import { Wallet } from '@paysafe/paysafe-wallet-saas-web/wallet';

const wallet = Wallet.getInstance();

Type declaration files are available as well and you can import them from the respective module! In this case you import the Wallet type from the wallet module.

Configure SDK

In order to use the SDK, you need to configure it, so it can reuse the provided configuration for the lifecycle of your application. This is done by calling the configure method of the Wallet.

const sdkConfiguration = {
  baseURL: 'https://api.paysafe.com', /* or your own server, which proxies the requests to the Paysafe Wallet API */
  brand: 'demoBrand',                 /* your own company brand */
  configToken: 'demoConfigToken'      /* the config token you have received from Paysafe Wallet API */
};

wallet
  .configure(sdkConfiguration)
  .then(configureResult => console.log('Configure result', configureResult));

The configToken is a token that you have received from Paysafe Wallet API in advance. This means that in order to configure the SDK, you must have already sent an HTTP request for fetching the configToken.

Authenticate User

In order to use the Paysafe Wallet API, you need to authenticate the user for whom the wallet operations from the SDK would apply. This is done by calling the authenticate method of the Wallet.

const authenticationConfiguration = {
  accessToken: this.accessToken /* the user accessToken you have received from Paysafe Wallet API */
};

wallet
  .authenticate(authenticationConfiguration)
  .then(authenticationResult => console.log('Authentication result', authenticationResult));

The accessToken is a token that you have received from Paysafe Wallet API in advance. This means that in order to authenticate a user in the SDK, you must have already sent an HTTP request for fetching the accessToken.

Wallet Operations

If the Configure SDK and the Authenticate operations were successful, you can start using the SDK for wallet operations!

Example:

wallet.getProfileService().getProfile()
  .then(customerInfo => console.log('Customer info', customerInfo))
  .catch(error => console.error(error));

Angular

An example of how to integrate the Web SDK with an Angular application.

import { Component, OnInit } from '@angular/core';
import { AuthenticationResult, ConfigurationResult, Wallet } from '@paysafe/paysafe-wallet-saas-web/wallet';
import { Account, CustomerInfo } from '@paysafe/paysafe-wallet-saas-web/profile';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  private wallet: Wallet = Wallet.getInstance();
  private customerInfo: CustomerInfo;
  private accounts: Account[];

  ngOnInit(): void {
    this.setupSdk();
  }

  private async setupSdk(): Promise<void> {
    try {
      // Configure the wallet and log the result
      const configurationResult = await this.configureWallet();
      console.log('Configuration result', configurationResult);

      // Authenticate the wallet and log the result
      const authenticationResult = await this.authenticateWallet();
      console.log('Authentication result', authenticationResult);

      // Fetch customerInfo and accounts concurrently using Promise.all
      const [fetchedCustomerInfo, fetchedAccounts] = await Promise.all([this.getCustomerInfo(), this.getAccounts()]);

      // Set state with the fetched data
      this.customerInfo = fetchedCustomerInfo;
      this.accounts = fetchedAccounts;
    } catch (error) {
      // Handle errors during the asynchronous operations
      console.error('Error in setupSdk:', error);
    }
  }

  configureWallet(): Promise<ConfigurationResult> {
    return this.wallet.configure({
      baseURL: 'https://baseUrl.com',
      brand: 'brandName',
      configToken: 'configToken'
    });
  };

  authenticateWallet(): Promise<AuthenticationResult> {
    return this.wallet.authenticate({
      accessToken: 'accessToken'
    });
  };

  getCustomerInfo(): Promise<CustomerInfo> {
    return this.wallet.getProfileService().getProfile();
  };

  getAccounts(): Promise<Account[]> {
    return this.wallet.getProfileService().getAccounts();
  };
}

React

An example of how to integrate the Web SDK with a React application.

import React, { useEffect, useState } from 'react';
import { AuthenticationResult, ConfigurationResult, Wallet } from '@paysafe/paysafe-wallet-saas-web/wallet';
import { CustomerInfo } from '@paysafe/paysafe-wallet-saas-web/profile';

const App: React.FC = () => {
    const [wallet] = useState(() => Wallet.getInstance());
    const [customerInfo, setCustomerInfo] = useState <CustomerInfo | null> (null);

    const configureWallet = (): Promise<ConfigurationResult> => {
        return wallet.configure({
            baseURL: 'https://baseUrl.com',
            brand: 'brandName',
            configToken: 'configToken'
        });
    };

    const authenticateWallet = (): Promise<AuthenticationResult> => {
        return wallet.authenticate({
            accessToken: 'accessToken'
        });
    };

    const getCustomerInfo = (): Promise<CustomerInfo> => {
        return wallet.getProfileService().getProfile();
    };

    useEffect(() => {
        const setupSdk = async () => {
            try {
                // Configure the wallet and log the result
                const configurationResult = await configureWallet();
                console.log('Configuration result', configurationResult);

                // Authenticate the wallet and log the result
                const authenticationResult = await authenticateWallet();
                console.log('Authentication result', authenticationResult);

                // Fetch customerInfo
                const fetchedCustomerInfo = await getCustomerInfo();

                // Set state with the fetched customer info
                setCustomerInfo(fetchedCustomerInfo);
            } catch (error) {
                // Handle errors during the asynchronous operations
                console.error('Error in setupSdk:', error);
            }
        };

        setupSdk();
    }, []);
}

export default App;

Wallet

The Wallet module is the main module of the SDK. It provides the implementation for the Wallet instance, along with the necessary models.

All SDK features are exposed through the Wallet instance. All services and API operations are accessible through it.

import { Wallet } from '@paysafe/paysafe-wallet-saas-web/wallet';

const wallet = Wallet.getInstance();

Get Profile Service

import { Wallet } from '@paysafe/paysafe-wallet-saas-web/wallet';

const profileService = Wallet.getInstance().getProfileService();

Get Transaction History Service

import { Wallet } from '@paysafe/paysafe-wallet-saas-web/wallet';

const transactionHistoryService = Wallet.getInstance().getTransactionHistoryService();

Get Prepaid Card Service

import { Wallet } from '@paysafe/paysafe-wallet-saas-web/wallet';

const cardService = Wallet.getInstance().getCardService();