skipcash-web

A framework-agnostic JavaScript SDK for integrating [SkipCash] in web applications.
Currently supports Apple Pay integration on the web. For more details on the integration check the documentation at (https://dev.skipcash.app/)

✨ Features

• ✅ Framework-agnostic – Use it with React, Vue, Angular, or any other JS frontend setup.
• 💳 Apple Pay support – Integrated Apple Pay flow via SkipCash.
• 🔀 ESM + CommonJS support – Works in modern bundlers and Node environments.
• 🧠 TypeScript typings included – Full type support out of the box.
• 🛠️ Built with Rollup – Lightweight and optimized builds.

📦 Installation

Install the package via npm:

npm install skipcash-web

🔗 Add apple-pay-sdk.js for non safari browsers support

  <!-- Add this tag to your <header></header> in index.html -->
  <script crossorigin 
    src="https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js" crossorigin="anonymous"> 
  </script>

ReactJS Example for Apple Pay.

// import skipcash from 'skipcash-web';
import React, {useEffect, useRef} from 'react';
import {payWithApplePay, canPayWithApple, ApplePayment} from 'skipcash-web';
// const {ApplePayOptions, canPayWithApple} = require('skipcash-web');

function App() {

  const didRun = useRef(false); // to prevent app from reloading twice
  
  useEffect(() => {
    if (didRun.current) return;
    didRun.current = true;

    canPayWithApple(
      "Your Merchant ID", 
      ()=>{ // successful
        console.log("device can initiate applepay payment."); 
        document.getElementById("apple-pay-button").style.display = "block";
      },
      (data)=>{ // onError
        const isApplePayJSAvailable = typeof window.ApplePaySession !== "undefined";
        if(isApplePayJSAvailable){ // check if apple-pay-sdk.js is available ( for non safari browsers )
          document.getElementById("apple-pay-button").style.display = "block";
          return;
        }
        console.error(data);
      }
    );
  }, []);
  
  function initiateApplePayment(){
    console.log(
      "initiating Apple Pay Payment"
    );
    const API_BASE    = "https://yourbackenddomain.com";
    const new_payment = new ApplePayment({
      logs: true, // (default: false)  if 'true' you will get logs for each step in the apple pay process for easy debugging.
      appleUrlValidationEndpoint: `${API_BASE}/validateUrl`, // used to validate the merchant 
      processApplePaymentEndpoint: `${API_BASE}/processpayment`, // used to process the payment by calling skipcash API
      merchant: "Your Business Name", // your official business name - will appear at the payment sheet
      summaries: [ // optional - however if a summary item was passed, total amount should match paymentData amount
        {label: "Tax", amount: parseFloat("0.00")},
        {label: "Total", amount: parseFloat("1.00")}
      ],
      paymentData: { // this 'paymentData' object will be sent to your payment creation endpoint as payload
        firstName: "Test",
        lastName: "SkipCash",
        email: "[email protected]",
        phone: "+97412341234",
        amount: "1.00",
        transactionId: "sandbox1" // (optional) - should be unqiue, your internal system order id.
      },
      headers: { // you can pass your headers if required by your endpoints
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'Authorization': ''
      }
    });
    payWithApplePay(
      new_payment, 
      (data)=>{ // payment was successful.
        console.log(data);
        alert("Payment was successful!");
      }, 
      (data)=>{ // payment failed.
        console.error(data);
        alert("Payment failed!");
      },
      ()=>{
        // oncancel apple payment
        console.info("payment was cancelled by user.");
      }
    )
  }

  const VALID_TYPES = {
    plain: "plain",
    buy: "buy",
    checkout: "checkout",
    book: "book",
    subscribe: "subscribe",
    donate: "donate",
    order: "order",
  };

  const BTN_COLOR = {
    white: "white",
    black: "black",
    whiteOutline: "white-outline"
  }

  const ApplePayBtn = ({ onPress, btnType="plain", btnColor="black"}) => {
    const btnRef = useRef(null);

    useEffect(() => {
      const el = btnRef.current;
      if (!el) return;
      const handler = (e) => { e.preventDefault(); onPress?.(); };
      el.addEventListener("click", handler);
      return () => el.removeEventListener("click", handler);
    }, [onPress]);

    return (
      <apple-pay-button
        ref={btnRef}
        buttonstyle={btnColor}
        type={btnType}
        style={{
          "--apple-pay-button-width": "250px",
          "--apple-pay-button-height": "35px",
          "--apple-pay-button-border-radius": "5px",
          "--apple-pay-button-padding": "3px 10px",
          "--apple-pay-button-box-sizing": "content-box",
          display: "inline-block",
          cursor: "pointer",
        }}
      />
    );
  }

  return (
    <div style={{ height: "100vh"}}>
      <center>
        <h1>SkipCash - Test Apple Pay</h1>
        <h4>JS Framework Project</h4>
      </center>
      <div
        id="apple-pay-button"
        style={{
          display: "none",
          flexDirection: "column",
          justifyContent: "space-between",
          alignItems: "center",
          gap: "2rem",
          marginTop: "1rem"
        }}
      >
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "2rem" }}>
          <ApplePayBtn btnColor={BTN_COLOR.whiteOutline} onPress={() => { initiateApplePayment(); }} btnType={VALID_TYPES.buy} />
          <ApplePayBtn onPress={() => { initiateApplePayment(); }} />
        </div>
      </div>
    </div>
  )
}

export default App;