paymaya-js-sdk v2.0.1

Overview

Official client side SDK by PayMaya Payment Gateway. For assistance you may reach us through paymayadevs@voyager.ph

Install

npm install --save paymaya-js-sdk

or

yarn add paymaya-js-sdk

Run

You can either import it like:

import PaymayaSdkClient from 'paymaya-js-sdk'

or simply include it through a script tag on your HTML site:

<script src="https://unpkg.com/paymaya-js-sdk@2.0.0/dist/bundle.js"></script>

NOTE: when including via script tags, the SDK is globally available using the variable PayMayaSDK

Usage

Before using any of the publicly available methods, you need to initialize the SDK by using the init method (you only need to do this once in app's lifetime).

React:

import paymaya from 'paymaya-js-sdk';

function App() {
  const exampleCheckoutObject = {};
  useEffect(() => {
    paymaya.init('my-public-key', true);
    paymaya.createCheckout(exampleCheckoutObject);
  }, []);
  return (
      <div>
        <div>Test App</div>
      </div>
  );
}

or vanilla js

    <script>
      const myExampleObject = {};
      PayMayaSDK.init('my-public-key', true);
      PayMayaSDK.createCheckout(myExampleObject);
    </script>

SDK API

• init

• createCheckout

• createWalletLink

• createSinglePayment

• addTransactionHandler

• createCreditCardForm

init(publicKey, isSandbox)

This method initializes SDK. It must be run before other methods are being used.

Returns: void

init properties:

createCheckout(checkoutRequestObject)

This method redirects the user to PayMaya Checkout, where the user can finalize his/her payment.

Returns: Promise<void>

checkoutRequestObject properties are defined here.

Example checkoutRequestObject:

{
  "totalAmount": {
    "value": 100,
    "currency": "PHP",
    "details": {
      "discount": 0,
      "serviceCharge": 0,
      "shippingFee": 0,
      "tax": 0,
      "subtotal": 100
    }
  },
  "buyer": {
    "firstName": "John",
    "middleName": "Paul",
    "lastName": "Doe",
    "birthday": "1995-10-24",
    "customerSince": "1995-10-24",
    "sex": "M",
    "contact": {
      "phone": "+639181008888",
      "email": "merchant@merchantsite.com"
    },
    "shippingAddress": {
      "firstName": "John",
      "middleName": "Paul",
      "lastName": "Doe",
      "phone": "+639181008888",
      "email": "merchant@merchantsite.com",
      "line1": "6F Launchpad",
      "line2": "Reliance Street",
      "city": "Mandaluyong City",
      "state": "Metro Manila",
      "zipCode": "1552",
      "countryCode": "PH",
      "shippingType": "ST" // ST - for standard, SD - for same day
    },
    "billingAddress": {
      "line1": "6F Launchpad",
      "line2": "Reliance Street",
      "city": "Mandaluyong City",
      "state": "Metro Manila",
      "zipCode": "1552",
      "countryCode": "PH"
    }
  },
  "items": [
    {
      "name": "Canvas Slip Ons",
      "quantity": 1,
      "code": "CVG-096732",
      "description": "Shoes",
      "amount": {
        "value": 100,
        "details": {
          "discount": 0,
          "serviceCharge": 0,
          "shippingFee": 0,
          "tax": 0,
          "subtotal": 100
        }
      },
      "totalAmount": {
        "value": 100,
        "details": {
          "discount": 0,
          "serviceCharge": 0,
          "shippingFee": 0,
          "tax": 0,
          "subtotal": 100
        }
      }
    }
  ],
  "redirectUrl": {
    "success": "https://www.merchantsite.com/success",
    "failure": "https://www.merchantsite.com/failure",
    "cancel": "https://www.merchantsite.com/cancel"
  },
  "requestReferenceNumber": "1551191039",
  "metadata": {}
}

createWalletLink(walletLinkrequestObject)

This method creates a wallet link that allows charging to a PayMaya account.

Returns Promise<void>

walletLinkRequestObject properties:

createSinglePayment(singlePaymentRequestObject)

This method creates a single payment redirection, allowing the user to finalize the transaction.

Returns Promise<void>

createSinglePayment properties:

addTransactionHandler(callback)

This method assigns a listener for credit card form method createdCreditCardForm - whenever the user fills all the information required (cvc, credit card number and expiry date) and then tokenizes that data, a callback will be fired with payment token.

Returns void

Example usage:

sdk
  .createCreditCardForm(iframeContainer, {})
  .addTransactionHandler((paymentTokenId) => this.setState({open: true, iframe: true, bodyResponse: {paymentTokenId}}))

addTransactionHandler properties:

callback(paymentTokenId) properties:

createCreditCardForm(targetHtmlElement, options)

This method creates a credit card form in selected html element, by embedding a safe iframe instance in it - allowing the user to fill his credit card information in a safe manner.

Returns void

createdCreditCardForm properties: