Merge pull request #79 from PaystackOSS/inlinejs

Feat: Add InlineJS snippets

Author: damilola-paystack

dist/doc/developer-tools/inlinejs/callback-oncancel.js

@@ -0,0 +1,5 @@
+const js = `onCancel: () => {
+  console.log("User cancelled")
+}`
+
+export {js}

dist/doc/developer-tools/inlinejs/callback-onelementsmount.js

@@ -0,0 +1,9 @@
+const js = `onElementsMount: (elements) =>{ // { applePay: true } or null
+  if (elements) {
+    console.log(`Successfully mounted elements: ${JSON.stringify(elements)}`);
+  } else {
+    console.log('Could not load elements');
+  }
+}`
+
+export {js}

dist/doc/developer-tools/inlinejs/callback-onerror.js

@@ -0,0 +1,5 @@
+const js = `onError: (error) => {
+  console.log(`Error: ${error.message}`);
+}`
+
+export {js}

dist/doc/developer-tools/inlinejs/callback-onload.js

@@ -0,0 +1,6 @@
+const js = `onLoad: (response) => {
+  // Transaction has loaded
+  // You can parse the transaction object if you need to.
+}`
+
+export {js}

dist/doc/developer-tools/inlinejs/callback-onsuccess.js

@@ -0,0 +1,5 @@
+const js = `onSuccess: (response) => {
+  // Post payment flow can go here
+}`
+
+export {js}

dist/doc/developer-tools/inlinejs/cancel-payment.js

@@ -0,0 +1,23 @@
+const js = `const popup = new Paystack()
+
+const transaction = popup.newTransaction({
+  key: 'pk_domain_xxxxx', // Replace with your public key
+  email: "[email protected]",
+  amount: 10000,
+  onLoad: (transaction) => {
+    window.clearInterval(redirectTimer);
+  }
+});
+
+let timeElapsed = 0;
+const timeLimit = 2;
+const redirectURL = 'https://your.redirecturl.com';
+const redirectTimer = setInterval(() => {
+  timeElapsed += 1;
+  if (timeElapsed === timeLimit) {
+    popup.cancelTransaction(transaction.id);
+    window.location.href = redirectURL;
+  }
+}, 1000);`
+
+export {js}

dist/doc/developer-tools/inlinejs/checkout.js

@@ -0,0 +1,21 @@
+const js = `const popup = new Paystack()
+
+popup.checkout({
+  key: 'pk_domain_xxxxxx',
+  email: '[email protected]',
+  amount: 23400,
+  onSuccess: (transaction) => {
+    console.log(transaction);
+  },
+  onLoad: (response) => {
+    console.log("onLoad: ", response);
+  },
+  onCancel: () => {
+    console.log("onCancel");
+  },
+  onError: (error) => {
+    console.log(`Error ${error.message}`);
+  }
+})`
+
+export {js}

dist/doc/developer-tools/inlinejs/initialize.js

@@ -0,0 +1,6 @@
+const js = `// Add for NPM, Yarn
+import Paystack from '@paystack/inline-js';
+
+const popup = new Paystack()`
+
+export {js}

dist/doc/developer-tools/inlinejs/installation.js

@@ -0,0 +1,7 @@
+const cdn = `<script src="https://js.paystack.co/v2/inline.js"></script>`
+
+const npm = `npm i @paystack/inline-js`
+
+const yarn = `yarn add @paystack/inline-js`
+
+export {cdn, npm, yarn}

dist/doc/developer-tools/inlinejs/multi-split-dynamic.js

@@ -0,0 +1,22 @@
+const js = `const popup = new Paystack()
+
+popup.newTransaction({
+  key: 'pk_domain_xxxxxx',
+  email: '[email protected]',
+  amount: 98540,
+  split_code: 'SPL_RYUUL4u1hP',
+  onSuccess: (transaction) => {
+    console.log(transaction);
+  },
+  onLoad: (response) => {
+    console.log("onLoad: ", response);
+  },
+  onCancel: () => {
+    console.log("onCancel");
+  },
+  onError: (error) => {
+    console.log(`Error: ${error.message}`);
+  }
+})`
+
+export {js}