payFURL client SDK

The Client SDK is used to securely collect payment details in the browser.

The Client SDK will seamlessly plug into your existing payment page. When it's initialised, it will securely load an iframe hosted by payFURL. The iframe will collect the payment details, which will then be submitted to payFURL and converted to a payment token. The payment token will be added as a hidden input to the form. In case of PayPal or Buy Now Pay Later payments the payment details will be converted to a transactionId. The transactionId will be added as a hidden input to the form. Collecting the payment details is triggered when the form is submitted.

Usage

Read here: https://docs.payfurl.com/client_sdk/

Your readme.md file looks fine, but I can provide some improvements in formatting and clarity. Here's a revised version:

Test Environment

Preparation

1. Create a file src/sdk/config.local.ts with the following content:

   export default {
     baseUrl: "http://localhost:3001",
     cssUrl: "http://localhost:3001/dist/sdk/",
     url: "http://localhost:3001/dist/iframe/",
     apiUrl: "https://localhost:5001",
     redirectUrl: "http://localhost:3001/checkout/redirect.html",
     sentryUrl: "",
   };

Sentry is disabled if sentryUrl value is empty.

2. Run the following commands in your project directory:

   • npm install
   • npm run server
   • npm run build-iframe
   • npm run build-sdk

Initialization

sdk.html is a simple page that loads the SDK and displays the result of the payment. To initialize the SDK, locate the following method in the sdk.html file:

const pf = payfurl.init(
  "local", // environment name
  "pubtestd8d074aceb5defec8f2d0b806292bf2b5f4179c69d-au", // public key
  true // enable debug mode
);

To run the SDK on your local machine, you need to have the corresponding API running in the local environment.

Switching between Environments

To switch between different environments, follow these steps:

1. Update all parameters in the file src/sdk/config.{environment}.ts with the proper values.
2. Run npm run build-iframe
3. Run npm run build-sdk
4. Change the environment name in the payfurl.init method.
5. Run the API in the corresponding environment.

Using an External SDK

If you want to use an external SDK, replace this line in your sdk.html:

<script type="text/javascript" src="dist/sdk/payfurl.umd.js?v=4975"></script>

with the desired version of the external SDK, for example:

<script type="text/javascript" src="https://assets.payfurl.com/v4.5.3.294/js/payfurl.js?v=4959"></script>

Please note that the external SDK cannot work with the local environment, so ensure that the environment name in the payfurl.init method is NOT set to "local."

Running

• open http://localhost:3001/sdk.html in your favorite browser
• enjoy *

(* - optional)

Analyzing size

1. Run npm run build-sdk
2. Open stats.html