0.0.1 • Published 11 months ago
skipcash-capacitor v0.0.1
skipcash-capacitor
Skipcash integration with your capacitor (or ionic) app.
Install
npm install skipcash-capacitor
npx cap sync import { SkipCashPlugin, initiateApplePay, PaymentData, isWalletHasCards, initiatePaymentModel, setupNewCard } from 'skipcash-capacitor';
import { SplashScreen } from '@capacitor/splash-screen';
/**********************************
- THIS PACKAGE PROVIDES TWO PAYMENT OPTIONS FOR YOUR CUSTOMER -
1. IN-APP APPLE PAY using 'initiateApplePay()' function.
2. IN-APP WEB VIEW (INCLUDES ALL PAYMENT OPTIONS THAT SKIPCASH OFFERS (visa, master, amex,
international cards, etc...) using 'initiatePaymentModel()' function.
- THIS EXAMPLE APP, DEMONESTRATES HOW TO USE THE DIFFERENT OPTIONS MENTIONED ABOVE
***********************************/
/*
- Adding event listener for IN-APP WEBVIEW -
* this will be triggered in two cases!
1. customer presses the cancel button on the top of the view
2. customer finishes the payment whether the status is (successful/failed)
*/
SkipCashPlugin.addListener(
'responseScPaymentData', (data) => {
/*
data is already a json object structure as follows (example)
{
"paymentResponse": {
"id": "5c939e64-567c-4c47-92d8-7b8e85c602xx",
"statusId": "2",
"status": "Paid",
"transId": "test1",
"custom1": ""
}
}
*/
// const responseAsString = JSON.stringify(data); // convert to string
// console.log("data -> ", responseAsString); // print the string
console.log(data);
// after the webview closes it will trigger 'responseScPaymentData' event
// and it will return back the payment status parameters
}
);
/*
- Adding event listener for IN-APP Apple Pay -
* this will be triggered in two cases!
1. customer presses the cross button on the top of the payment sheet
2. customer finishes the payment whether the status is (successful/failed)
*/
SkipCashPlugin.addListener(
'applepay_response', (data) => {
const response = JSON.parse(data);
console.log(response);
// Handle payment response here...
// you can get the payment details using the payment id after successful payment request.
// send a GET request to SkipCash server /api/v1/payments/${paymentResponse.paymentId} and include your merchant
// client id in the authorization header request to get the payment details.
// for more details please refer to https://dev.skipcash.app/doc/api-integration/
}
);
window.customElements.define(
'capacitor-welcome',
class extends HTMLElement {
constructor() {
super();
SplashScreen.hide();
const root = this.attachShadow({ mode: 'open' });
root.innerHTML = `
<style>
:host {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh; /* Use viewport height to fill the entire screen */
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
}
h1, h2, h3, h4, h5 {
text-transform: uppercase;
}
.button {
padding: 10px;
background-color: #73B5F6;
color: #fff;
font-size: 0.9em;
border: 0;
border-radius: 3px;
text-decoration: none;
cursor: pointer;
}
</style>
<div>
<main>
<p>
<button class="button" id="start-payment">Start Payment (WebView)</button>
</p>
<p>
<button class="button" id="start-apple-payment">Start Apple Pay</button>
</p>
<p>
<button class="button" id="setup-new-card">Setup New Card</button>
</p>
</main>
</div>
`;
}
async connectedCallback() {
const self = this;
// initiate a new apple pay payment
const paymentData = new PaymentData();
paymentData.setEmail("example@example.com"); // mandatory
paymentData.setAmount("1.00"); // mandatory
paymentData.setFirstName("Skip"); // mandatory
paymentData.setLastName("Cash"); // mandatory
paymentData.setPhone("+97400000001"); // mandatory
paymentData.setCustom1("");paymentData.setCustom2(""); // optional
paymentData.setCustom3("");paymentData.setCustom4(""); // optional
paymentData.setCustom5("");paymentData.setCustom6(""); // optional
paymentData.setCustom7("");paymentData.setCustom8(""); // optional
paymentData.setCustom9("");paymentData.setCustom10(""); // optional
paymentData.setDescription("hello");paymentData.setSubject("test"); // this will appear at the payment page
paymentData.setReturnUrl(""); //important when using the webview
/*
// add your payment end point - you should create ur own endpoint for your merchant account
// PLEASE REFER TO https://dev.skipcash.app/doc/api-integration/ for more information
// on how to request a new payment (pay url) you need to implement that for your
// backend server to create endpoint to request a new payment and return the data
// you receive from skipcash server to this package, which will be used by this package to process your
// customer payment.
-> When you complete setuping & testing ur endpoint please pass the link to below setPaymentLinkEndPoint //// method.
*/
paymentData.setPaymentLinkEndPoint("");
// set your endpoint authorizartion header, used to protect your endpoint from unauthorized access
paymentData.setAuthorizationHeader("");
//optional - but very much recommended
/*
set transaction id (your system internal id assigned to specific transaction), Each transaction id should be unique.
*/
paymentData.setTransactionId("");
//optional - but very much recommended
/*
Get each client payment details instantly after they make the payment directly to your server endpoint.
read more about webhooks -> https://dev.skipcash.app/doc/api-integration/web-hooks/
*/
paymentData.setWebhookUrl("");
// Start applepay payment
self.shadowRoot.querySelector('#start-apple-payment').addEventListener(
'click', async function (e) {
/*
When you're implementing IN-APP Apple Pay; you have to pass the name of the merchant identifier
(you need to create a new one from apple developer account of your app ).
please reachout to https://dev.skipcash.app/ mobile apple pay section to
know how to generate your merchant identifier and setup Xcode.
*/
paymentData.setMerchantIdentifier(""); // pass if you want to implement IN-APP Apple Pay
paymentData.setMerchantName("(Your Official Business/app Name)"); // Required by apple for IN-APP Apple Pay
paymentData.setSummaryItem("Total for payment", `${paymentData.getAmount()}`); // Add payment summary item(s)
const hasCards = await isWalletHasCards(); // make sure the there is a card already in the wallet
if(hasCards){
initiateApplePay(paymentData);
}else{
// If no cards found, prompt user to setup a new one
setupNewCard();
}
}
)
// Start payment via webview
self.shadowRoot.querySelector('#start-payment').addEventListener(
'click', function(e){
paymentData.setPaymentModalTitle("Checkout"); // add payment modal title (ios/android)
// below are some options used to adjust the WEBVIEW SCREEN header (android)
/*
For the colours please use the full hexadecimal representation
not the shorthand representation; cause it can make some issues.
example:
(full hex) #FFFFFF - white (CORRECT ✅)
(short hex) #FFF - white (INCORRECT ❌)
*/
paymentData.setHeaderBackgroundColour("#FFFFFF"); // will only affect android
paymentData.setHeaderTitleColour("#000000"); // will only affect android
paymentData.setCancelBtnColour("#000000"); // will only affect android
initiatePaymentModel(paymentData);
}
)
self.shadowRoot.querySelector('#setup-new-card').addEventListener(
'click', function(e){
setupNewCard();
}
)
}
}
);
window.customElements.define(
'capacitor-welcome-titlebar',
class extends HTMLElement {
constructor() {
super();
const root = this.attachShadow({ mode: 'open' });
root.innerHTML = `
<style>
:host {
position: relative;
display: block;
padding: 15px 15px 15px 15px;
text-align: center;
background-color: #73B5F6;
}
::slotted(h1) {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 0.9em;
font-weight: 600;
color: #fff;
}
</style>
<slot></slot>
`;
}
}
);0.0.1
11 months ago