skipcash-capacitor

Skipcash integration with your capacitor (or ionic) app.

Install

npm install skipcash-capacitor
npx cap sync

 import { SkipCashPlugin, initiateApplePay, PaymentData, isWalletHasCards, initiatePaymentModel, setupNewCard } from 'skipcash-capacitor';

import { SplashScreen } from '@capacitor/splash-screen';


/**********************************
- THIS PACKAGE PROVIDES TWO PAYMENT OPTIONS FOR YOUR CUSTOMER -
  1. IN-APP APPLE PAY using 'initiateApplePay()' function.
  2. IN-APP WEB VIEW (INCLUDES ALL PAYMENT OPTIONS THAT SKIPCASH OFFERS (visa, master, amex, 
  international cards, etc...) using 'initiatePaymentModel()' function.
- THIS EXAMPLE APP, DEMONESTRATES HOW TO USE THE DIFFERENT OPTIONS MENTIONED ABOVE
***********************************/


/* 
  - Adding event listener for IN-APP WEBVIEW -
  * this will be triggered in two cases!
    1. customer presses the cancel button on the top of the view
    2. customer finishes the payment whether the status is (successful/failed)
*/
SkipCashPlugin.addListener(
  'responseScPaymentData', (data) => {
    /*
      data is already a json object structure as follows (example)

      {
        "paymentResponse": {
          "id": "5c939e64-567c-4c47-92d8-7b8e85c602xx",
          "statusId": "2",
          "status": "Paid",
          "transId": "test1",
          "custom1": ""
        }
      }
    */

    
    // const responseAsString = JSON.stringify(data); // convert to string

    // console.log("data -> ", responseAsString); // print the string

    console.log(data);

    // after the webview closes it will trigger 'responseScPaymentData' event
    // and it will return back the payment status parameters
  }
);


/* 
  - Adding event listener for IN-APP Apple Pay -
  * this will be triggered in two cases!
    1. customer presses the cross button on the top of the payment sheet
    2. customer finishes the payment whether the status is (successful/failed)
*/
SkipCashPlugin.addListener(
  'applepay_response', (data) => {
    const response = JSON.parse(data);
    console.log(response);
    // Handle payment response here...
    // you can get the payment details using the payment id after successful payment request.
    // send a GET request to SkipCash server /api/v1/payments/${paymentResponse.paymentId} and include your merchant
    // client id in the authorization header request to get the payment details.
    // for more details please refer to https://dev.skipcash.app/doc/api-integration/ 
  }
);

window.customElements.define(
  'capacitor-welcome',
  class extends HTMLElement {
    constructor() {
      super();

      SplashScreen.hide();

      const root = this.attachShadow({ mode: 'open' });

      root.innerHTML = `
    <style>
      :host {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh; /* Use viewport height to fill the entire screen */
        margin: 0; /* Remove default margin */
        padding: 0; /* Remove default padding */
      }
      
      h1, h2, h3, h4, h5 {
        text-transform: uppercase;
      }
      
      .button {
        padding: 10px;
        background-color: #73B5F6;
        color: #fff;
        font-size: 0.9em;
        border: 0;
        border-radius: 3px;
        text-decoration: none;
        cursor: pointer;
      }
      
    </style>
    <div>
      <main>
        <p>
          <button class="button" id="start-payment">Start Payment (WebView)</button>
        </p>
        <p>
          <button class="button" id="start-apple-payment">Start Apple Pay</button>
        </p>
        <p>
          <button class="button" id="setup-new-card">Setup New Card</button>
        </p>
      </main>
    </div>
    `;
    }

    async connectedCallback() {
      const self = this;
      
      // initiate a new apple pay payment
      const paymentData = new PaymentData();
      paymentData.setEmail("[email protected]"); // mandatory
      paymentData.setAmount("1.00"); // mandatory
      paymentData.setFirstName("Skip"); // mandatory
      paymentData.setLastName("Cash"); // mandatory
      paymentData.setPhone("+97400000001"); // mandatory
      paymentData.setCustom1("");paymentData.setCustom2(""); // optional
      paymentData.setCustom3("");paymentData.setCustom4(""); // optional
      paymentData.setCustom5("");paymentData.setCustom6(""); // optional
      paymentData.setCustom7("");paymentData.setCustom8(""); // optional
      paymentData.setCustom9("");paymentData.setCustom10(""); // optional
      paymentData.setDescription("hello");paymentData.setSubject("test"); // this will appear at the payment page
      paymentData.setReturnUrl(""); //important when using the webview
      

      //optional - but very much recommended
      /*
        set transaction id (your system internal id assigned to specific transaction), Each transaction id should be unique.
      */
      paymentData.setTransactionId("");



      //optional - but very much recommended
      /*
       Get each client payment details instantly after they make the payment directly to your server endpoint.

       read more about webhooks -> https://dev.skipcash.app/doc/api-integration/web-hooks/
      */
      paymentData.setWebhookUrl(""); 
      


      // Start applepay payment
      self.shadowRoot.querySelector('#start-apple-payment').addEventListener(
        'click', async function (e) {


          // set your backend endpoint for creating skipcash payment & processing applepay payment check online documentation -> https://dev.skipcash.app/doc/apple-pay-sdk/back-end/
          paymentData.setProcessApplePayEndPoint("");

          // set your endpoint authorizartion header, used to protect your endpoint from unauthorized access 
          paymentData.setAuthorizationHeader("");

          /*
            When you're implementing IN-APP Apple Pay; you have to  pass the name of the merchant identifier
            (you need to create a new one from apple developer account of your app ). 
            please reachout to https://dev.skipcash.app/ mobile apple pay section to
            know how to generate your merchant identifier and setup Xcode.
          */
          
          paymentData.setMerchantIdentifier(""); // pass if you want to implement IN-APP Apple Pay

          paymentData.setMerchantName("(Your Official Business/app Name)"); // Required by apple for IN-APP Apple Pay

          paymentData.setSummaryItem("Total for payment", `${paymentData.getAmount()}`); // Add payment summary item(s)
          
          const hasCards = await isWalletHasCards(); // make sure the there is a card already in the wallet

          if(hasCards){
            initiateApplePay(paymentData);
          }else{
            // If no cards found, prompt user to setup a new one
            setupNewCard();
          }
        }
      )

      // Start payment via webview
      self.shadowRoot.querySelector('#start-payment').addEventListener(
        'click', function(e){

          /*
            // add your payment end point - you should create ur own endpoint for your merchant account
            // PLEASE REFER TO https://dev.skipcash.app/doc/api-integration/ for more information
            // on how to request a new payment (pay url) you need to implement that for your 
            // backend server to create endpoint to request a new payment and return the data 
            // you receive from skipcash server to this package, which will be used by this package to process your
            // customer payment. 

            -> When you complete setuping & testing ur endpoint please pass the link to below setPaymentLinkEndPoint //// method.
          */
          paymentData.setPaymentLinkEndPoint("");

          // set your endpoint authorizartion header, used to protect your endpoint from unauthorized access 
          paymentData.setAuthorizationHeader("");


          paymentData.setPaymentModalTitle("Checkout"); // add payment modal title (ios/android)

          // below are some options used to adjust the WEBVIEW SCREEN header (android)
          /* 
            For the colours please use the full hexadecimal representation 
            not the shorthand representation; cause it can make some issues.

            example:
            (full hex)    #FFFFFF - white (CORRECT ✅)
            (short hex)   #FFF    - white (INCORRECT ❌)

          */
          paymentData.setHeaderBackgroundColour("#FFFFFF"); // will only affect android
          paymentData.setHeaderTitleColour("#000000"); // will only affect android
          paymentData.setCancelBtnColour("#000000"); // will only affect android
          
          
          initiatePaymentModel(paymentData);
        }
      )

      self.shadowRoot.querySelector('#setup-new-card').addEventListener(
        'click', function(e){
          setupNewCard();
        }
      )
    }
  }
);

window.customElements.define(
  'capacitor-welcome-titlebar',
  class extends HTMLElement {
    constructor() {
      super();
      const root = this.attachShadow({ mode: 'open' });
      root.innerHTML = `
    <style>
      :host {
        position: relative;
        display: block;
        padding: 15px 15px 15px 15px;
        text-align: center;
        background-color: #73B5F6;
      }
      ::slotted(h1) {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 0.9em;
        font-weight: 600;
        color: #fff;
      }
    </style>
    <slot></slot>
    `;
    }
  }
);