Zeply.payments-capacitor-plugin NPM

zeply.payments-capacitor-plugin

It is a React Components and Capacitor plugin library. It is published to public NPM packages repository as https://www.npmjs.com/package/zeply.payments-capacitor-plugin.

Releases

CHANGELOG.md

Production Build

nx build zeply.payments-capacitor-plugin This command will produce a new build of the library.

Versioning

Each new build of the application will lead to minor version bump inside package.json of the library. Configuration for version bump can be found inside vite.config.ts.

Publishing

nx pulish-package zeply.payments-capacitor-plugin This command will publish the library to https://www.npmjs.com/package/zeply.payments-capacitor-plugin.

Demo

Example of this library components/capabilities you can check at https://merchant-dev.zeply.dev/ (Dev PG environment), https://merchant.zeply.dev/ (Prod PG environment). This is DEMO Merchant web app which was build with the components from this package

Specifics

Load Styling Any application which uses this package will get its styles bundle injected. The injection is not trivial it is done by a script in vite.config.js which after each build will innline the bundled dist/style.css into a src/styles.ts file. You can see this if after build you open dist/styles.js. This style.ts file will be triggered on first load of the zeply.payments-capacitor-plugin by application.
Capacitor
- This library is designed as React components library as well as custom Capacitor plugin. In order to be used/work properly the library requires any application which will import it to have installed as its main dependencies "@capacitor/android": "^5.2.2","@capacitor/core": "^5.2.2", "@capacitor/ios": "^5.2.2", "@capacitor/cli": "^5.2.2".
- Capacitor This library is designed to be a wrapper around zeply.applepay-capacitor-plugin and zeply.google-capacitor-plugin, both of those are capacitor plugins. In order to use properly this lib (zeply.payments-capacitor-plugin) requires those 2 packages to be installed.

ApplePay Mobile/Web (IOS/only inside Safari)

After pnpm install in order to build/develop Merchant Demo UI app for IOS you will need to do several steps.

npx cap add ios this will add IOS platform to the capacitor project

Components

PaymentGatewayConfig (Root zeply.payments-capacitor-plugin component)
ApplepayButton (initiate ApplePay payment)
ApplepayMobileButton (wrapped inside ApplepayButton)
ApplepayWebButton (wrapped inside ApplepayButton)

Development Configurations / Specifics

After pnpm/npm install in order to be able to have ApplePay for iOS and Web (Safari) you will need to do several steps.

Add/Install those packages to your application's package.json. NOTE: those are minimum required version
```
"zeply.payments-capacitor-plugin": "1.0.213",
"zeply.applepay-capacitor-plugin": "1.0.12",
```
npx cap add ios this will add ios platform to the capacitor project. You will need this step only if you need ApplePay integrated inside IOS hybrid app.
In order to use/test ApplePay in your Capacitor Mobile Application, you will need to add ApplePay capabilities to your iOS app. You also will need to have a registered Merchant with Apple https://developer.apple.com/documentation/applepaywebmerchantregistrationapi.

Example of using ApplePay into your custom React payment methods layout component:

import {PaymentGatewayConfigWrapper, ApplepayButton} from 'zeply.payments-capacitor-plugin';

export function CustomPaymentsLayout() {
  return (
    <div>
      <PaymentGatewayConfigWrapper>
        <ApplepayButton />
      </PaymentGatewayConfigWrapper>
    </div>
  );
}

GooglePay Mobile/WEB (Android, any Browser)

Components

PaymentGatewayConfig (Root zeply.payments-capacitor-plugin component)
PaymentProcessOverlay (used to show 3DS check)
GooglepayButton (used to initiate GooglePay payment)
GooglepayWebButton (wrapped inside GooglepayButton)
GooglepayMobileButton (wrapped inside GooglepayButton)

Development Configurations / Specifics

After pnpm/npm install in order to be able to have GooglePay for Android and Web you will need to do several steps.

Add/Install those packages to your application's package.json. NOTE: those are minimum required version
```
"zeply.payments-capacitor-plugin": "1.0.213",
"zeply.googlepay-capacitor-plugin": "1.0.2",
```
npx cap add android this will add android platform to the capacitor project. You will need this step only if you need GooglePay for Android.
Update the content of the file android/app/src/main/AndroidManifest.xml to enable GooglePay for your build. You will need to add the following lines inside the <application> tag.
```
<application>
....
        <meta-data android:name="com.google.android.gms.wallet.api.enabled" android:value="true" />
</application>
```
In order to test GooglePay you won't need registration with Google but for real payment you will have to register your merchant with Google https://support.google.com/pay/business/answer/7530745?hl=en.

Example of using GooglePayButton into your custom React payment methods layout component:

import {
  GooglepayButton,
  PaymentGatewayContext,
  IPaymentGatewayContext
} from 'zeply.payments-capacitor-plugin';

export function CustomPaymentsLayout() {
  const { overlayIframeConfig } = useContext<IPaymentGatewayContext>(PaymentGatewayContext);
  return (
    <>
      <PaymentProcessOverlay />
      {!overlayIframeConfig.active && (
        <div>
            <GooglepayButton />
        </div>
      )}
    </>
  );
}