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

• [X] 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

  • [X] 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".

  • [X] 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

• [x] PaymentGatewayConfig (Root zeply.payments-capacitor-plugin component)
• [x] ApplepayButton (initiate ApplePay payment)
• [x] ApplepayMobileButton (wrapped inside ApplepayButton)
• [x] 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

• [x] PaymentGatewayConfig (Root zeply.payments-capacitor-plugin component)
• [x] PaymentProcessOverlay (used to show 3DS check)
• [x] GooglepayButton (used to initiate GooglePay payment)
• [x] GooglepayWebButton (wrapped inside GooglepayButton)
• [x] 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>
        )}
      </>
    );
  }

Unit tests

• Run nx test zeply-payments-capacitor-plugin to execute the unit tests via Vitest.