@portittech/pay-with-toonie NPM

Pay with Toonie SDK

Documentation

Further official integration documentation can be found here.

Environment variables

This project is using variables from a .env file.

You must create a .env file in the root of the project and give a value to the variables you need to use. You can see the list of values to add in you env file on the rollup.config.js file.

If you need to add new environment values on the .env file, remember to add them on the rollup.config.js file too, to make them available around the code.

Environment variables, when declared correctly, can be accessed in this way process.env.<VARIABLE_NAME> using the Node.js process object.

Usage

<script src="https://unpkg.com/@portittech/pay-with-toonie/dist/pay-with-toonie.dist.js"></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/@portittech/pay-with-toonie/dist/pay-with-toonie.dist.css"
/>

<div>
  <div id="print-here-toonie-payment-form"></div>
</div>

/**
 * PAYMENT CREATION
 */

// CREATE A PAYMENT SESSION
const createPaymentSession = async (amount, currency, reason) => {
  const res = await fetch(
    "https://<ENVIRONMENT_API_URL>/acquiring/v1/payment",
    {
      method: "POST",
      headers: {
        "content-type": "application/json",
      },
      body: JSON.stringify({
        amount: amount,
        currency: currency,
        reason: reason,
        successUrl: "https://www.success.com",
        errorUrl: "https://www.error.com",
      }),
    },
  );

  const data = await res.json();

  // Data to be consumed by the SDK
  return {
    paymentSessionId: data.sessionId,
    amount: data.amount,
    currency: data.currency,
    successUrl: data.successUrl,
    errorUrl: data.errorUrl,
    reason: data.reason,
    otp: data.otp,
    paymentShortReference: data.shortReference,
  };
};

// GET PAYMENT DATA BY SESSION ID
const fetchPaymentDataBySessionId = async (paymentSessionId) => {
  const res = await fetch(
    `https://<ENVIRONMENT_API_URL>/acquiring/v1/payment/${paymentSessionId}`,
    {
      method: "GET",
      headers: {
        "content-type": "application/json",
      },
    },
  );

  const data = await res.json();

  return {
    paymentSessionId: data.sessionId,
    amount: data.amount,
    currency: data.currency,
    reason: data.reason,
    successUrl: data.successUrl,
    errorUrl: data.errorUrl,
  };
};

// INITIATE A PAYMENT
const initiatePayment = async (
  paymentSessionId,
  amount,
  currency,
  provider,
  reason,
) => {
  const res = await fetch(
    "https://<ENVIRONMENT_API_URL>/acquiring/v1/payment/initiate",
    {
      method: "POST",
      headers: {
        "content-type": "application/json",
      },
      body: JSON.stringify({
        paymentSessionId: paymentSessionId,
        amount: amount,
        currency: currency,
        walletId: "<WALLET_ID>",
        reason: reason,
        provider: provider,
        paymentSessionRequest: {
          amount: amount,
          reason: reason,
          destinationWalletId: "<WALLET_ID>",
          transactionCurrency: currency,
        },
      }),
    },
  );

  const data = await res.json();

  return {
    amount: data.amount,
    currency: data.currency,
    reason: data.reason,
    clientSecret: data.clientSecret,
    stripePaymentIntentId: data.paymentIntentId,
    feeAmount: data.feeAmount,
    otp: data.provider.otp,
    offersSessionId: data.provider.paymentOfferSessionId,
    paymentShortReference: data.provider.shortReference,
  };
};

// UPDATE PAYMENT
const updatePayment = async (paymentSessionId, paymentStatus) => {
  return await fetch(
    "https://<ENVIRONMENT_API_URL>/acquiring/v1/payment/${paymentSessionId}/status/${paymentStatus}",
    {
      method: "PUT",
      headers: {
        "content-type": "application/json",
      },
    },
  );
};

/**
 * PAYMENT BY CARD CALLBACKS
 */

const approveCardPayment = async (paymentId, currency) => {
  return await fetch(
    `https://<ENVIRONMENT_API_URL>/acquiring/v1/card/${paymentId}/approve`,
    {
      method: "POST",
      headers: {
        "content-type": "application/json",
      },
      body: JSON.stringify({
        currency: currency,
      }),
    },
  );
};

/**
 * STREAM WITH TOONIE CALLBACKS
 */

const createStreamPaymentIntent = async (amount, currency) => {
  const res = await fetch("https://<ENVIRONMENT_API_URL>/acquiring/v1/stream", {
    method: "POST",
    headers: {
      "content-type": "application/json",
    },
    body: JSON.stringify({
      amount: amount,
      currency: currency,
      walletId: "<MERCHANTWALLETID>",
      type: "Stream",
    }),
  });

  const data = await res.json();

  return {
    intentId: data.id,
    intentStreamId: data.paymentIntentStreamId,
    amount: data.amount,
    currency: data.currency,
    walletId: data.walletId,
    reason: data.reason,
  };
};

const approveStreamPayment = async (paymentIntentId) => {
  return await fetch(
    `https://<ENVIRONMENT_API_URL>/acquiring/v1/stream/approve/${paymentIntentId}`,
    {
      method: "PUT",
      headers: {
        "content-type": "application/json",
      },
    },
  );
};

const rejectStreamPayment = async (paymentIntentId) => {
  return await fetch(
    `https://<ENVIRONMENT_API_URL>/acquiring/v1/stream/reject/${paymentIntentId}`,
    {
      method: "PUT",
      headers: {
        "content-type": "application/json",
      },
    },
  );
};

const fetchStreamPaymentIntent = async (paymentIntentId) => {
  return await fetch(
    `https://<ENVIRONMENT_API_URL>/acquiring/v1/stream/${paymentIntentId}`,
    {
      method: "GET",
      headers: {
        "content-type": "application/json",
      },
    },
  );
};

/**
 * RESULT CALLBACKS
 */

const successPaymentCallback = (data) => {
  console.log("Success!!", data);
};

const failurePaymentCallback = (err) => {
  console.log("userError", err);
};

const genericErrorCallback = (error) => {
  console.error("Error!!", error);
};

const onModalClose = (possiblePaymentStatusInError) => {
  if (possiblePaymentStatusInError) console.error(possiblePaymentStatusInError);
};

const baseUrl = "https://<ENVIRONMENT_API_URL>";

// CHOOSE WHICH BUTTONS TO RENDER
const renderPayWithToonieButton = true;
const renderStreamWithToonieButton = true;
const renderPayWithCardButton = true;

const options = {
  createPaymentSession,
  fetchPaymentDataBySessionId,
  initiatePayment,
  updatePayment,
  approveCardPayment,
  createStreamPaymentIntent,
  approveStreamPayment,
  rejectStreamPayment,
  fetchStreamPaymentIntent,
  successPaymentCallback,
  failurePaymentCallback,
  genericErrorCallback,
  onModalClose,
  baseUrl,
  renderPayWithToonieButton,
  renderStreamWithToonieButton,
  renderPayWithCardButton,
};

// builds the UI for the form
PayWithToonie.render(
  document.querySelector("#print-here-toonie-payment-form"),
  options,
);

PayWithToonie.getStopPollingHandle((stopPollingHandle) => {
  // stopPollingHandle is a function you can call whenever you want to force the polling
});