SkipCash Google Pay Button

A framework-agnostic Google Pay button integration for SkipCash.

Installation

npm install @skipcash/skipcash-gpay-web
# or
yarn add @skipcash/skipcash-gpay-web

Usage

import { SkipCashGPayButton } from 'skipcash-gpay';

function PaymentComponent() {
  return (
    <SkipCashGPayButton
      gateway="mpgs"
      gatewayMerchantId="YOUR_MERCHANT_ID"
      environment="TEST"
      merchantName="Your Store"
      merchantId="YOUR_MERCHANT_ID"
      amount="10.00"
      currencyCode="QAR"
      countryCode="QA"
      skipCashConfig={{
        keyId: "YOUR_KEY_ID",
        baseUrl: "YOUR_BACKEND_BASE_URL",
        endpoints: {
          pay: "YOUR_PAY_ENDPOINT",
          status: "YOUR_STATUS_ENDPOINT",
          getPaymentId: "YOUR_PAYMENT_ID_ENDPOINT", //Optional
        }
      }}
      onPaymentSuccess={(details) => {
        console.log('Payment successful:', details);
      }}
      onPaymentFailure={(error) => {
        console.error('Payment failed:', error);
      }}
    />
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | gateway | string | Yes | Payment gateway identifier (e.g., "mpgs") | | gatewayMerchantId | string | Yes | Gateway merchant ID | | environment | "TEST" | "PRODUCTION" | Yes | Environment mode | | merchantName | string | Yes | Your store name | | merchantId | string | Yes | Your merchant ID | | amount | string | Yes | Payment amount | | currencyCode | string | Yes | Currency code (e.g., "QAR") | | countryCode | string | Yes | Country code (e.g., "QA") | | skipCashConfig | object | Yes | SkipCash configuration object | | skipCashConfig.keyId | string | Yes | Your SkipCash key ID | | skipCashConfig.baseUrl | string | Yes | SkipCash API base URL | | skipCashConfig.endpoints.pay | string | Yes | Payment endpoint path | | skipCashConfig.endpoints.status | string | Yes | Status check endpoint path | | onPaymentSuccess | (details: PaymentDetails) => void | Yes | Success callback | | onPaymentFailure | (error: any) => void | Yes | Error callback | | buttonColor | "black" | "white" | No | Button color (default: "black") | | buttonType | "plain" | "buy" | "donate" | "long" | "short" | No | Button type (default: "long") | | buttonSizeMode | "static" | "fill" | No | Button size mode (default: "static") |

Development

To build the package locally:

npm install
npm run build

License

MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For support, please contact [Your Support Email/Link].