I have spent a considerable amount of time searching for a solution. I am looking to incorporate Stripe Payment Gateway into my cordova application. Is there a method to achieve this on both Android and iOS using JavaScript?
I have spent a considerable amount of time searching for a solution. I am looking to incorporate Stripe Payment Gateway into my cordova application. Is there a method to achieve this on both Android and iOS using JavaScript?
After reaching out to stripe via email, I learned that their platform functions seamlessly on iOS when integrated as it is on web platforms. However, the same cannot be said for Android at this time! :(
Despite Checkout working smoothly on iOS devices using PhoneGap (or similar frameworks with native WebViews), it currently faces compatibility issues on Android devices with native WebViews. While this problem is acknowledged and a resolution is desired in the future, there are no immediate fixes available. As a temporary solution for Android compatibility, building a custom form with Stripe.js[0] is recommended.
UPDATE:
It seems there is an existing solution now! Although untested by myself, you can find it at the following link:
UPDATE 2: checkout.js is currently functioning properly with phonegap and cordova. More details can be found in the documentation here.
UPDATE 3: It has come to light that checkout.js is not compatible with cordova ios 4.0.0 and above. The last functional version of cordova ios is 3.9.2. For further information, refer to this query: Using Stripe Checkout with Cordova ios 4.0.0+
UPDATE 4: We have transitioned to using Stripe V3 Elements, although stripe checkout.js should still work if stripe is whitelisted as outlined here
Updated Information:
Unfortunately, the solution I initially proposed did not work as expected. When using checkout.js, I encountered an error prompting me to switch to a different browser due to some issue. At this point, it seems like my only option is to create a custom checkout form.
Solution Approach:
To tackle the specific requirements outlined in the checkout.js documentation, mentioned in the FAQ section: Proposed solution:
To adhere to the specified guidelines from the checkout.js documentation (Referenced in the FAQ),
"All payment information submitted through Checkout is done over a secure HTTPS connection. However, to safeguard against potential man-in-the-middle attacks, ensure that the page containing the payment form is also served over HTTPS. In essence, the URL of the page containing Checkout should start with https:// rather than just http://."
To address this requirement, I have incorporated an <iframe> within my Cordova application, setting the src attribute to a custom API endpoint. This API endpoint returns the <Form> snippet presented in the Simple implementation from the documentation. Therefore, my API endpoint serves the following HTML:
<form action="/charge" method="POST">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-amount="2000"
data-name="Stripe.com"
data-description="2 widgets"
data-image="/img/documentation/checkout/marketplace.png"
data-locale="auto">
</script>
</form>
This setup ensures that the checkout process is secured via https!
Additionally, I would like to caution about the aforementioned plugin discussed earlier. Special thanks to @Amrit Kahlon for providing the update!
Important Note: Avoid utilizing the plugin referenced in this thread: Telerik-Verified-Plugins/Stripe
It appears that there are no satisfactory alternatives available in terms of plugins, which may require manual implementation.
The plugin necessitates storing your Stripe secret key on the client-side, posing a security risk if accessed by unauthorized individuals.
Remember, the secrecy of the secret key is crucial.
The plugin's documentation (https://github.com/Telerik-Verified-Plugins/Stripe/blob/master/doc/index.md) highlights the following regarding security:
Security Warning
This plugin mandates embedding the Stripe secret key within the application. As the name implies, refrain from sharing the secret key as it grants unrestricted access to the Stripe API. By embedding the secret key, anyone could discover and misuse it, potentially leading to data leaks or financial losses.
Including your Stripe secret key in a Cordova application is highly discouraged, thus suggesting refraining from using this plugin.
The recommended approach for processing payments via mobile devices involves solely utilizing the publishable key. While it is technically feasible to submit payments using the secret key, exposure of this key could jeopardize prior charges, authorize refunds, and initiate transfers.
Cautiously assess whether this aligns with your intended use before proceeding.
I am hoping to automatically fill a hidden text field with the URL of the current page so that I can keep track of where form submissions are coming from. This simple solution will help me streamline my inquiry responses and save time. To clarify, upon lo ...
Seeking assistance in integrating vuetify's v-stepper with vue router. Specific requirements include: Assigning each step its own route (e.g. /myform/step1, /myform/step2, /myform/step3, etc) Creating components for each step that are dynamically lo ...
Seeking a straightforward method to remove Certs by CN (previously added with SecItemAdd from a PKCS12 import); encountering an error: Property list invalid for format: 200 (property lists cannot contain objects of type 'SecIdentity') Followe ...
I am currently working on implementing iOS web app properties into my website. My goal is to create a <div> at the top of the page and apply specific CSS styles when a certain condition is met in a JavaScript script. Unfortunately, I am facing issue ...
I have reviewed a few tutorials on mocking and testing Vuex actions, but I have struggled to implement them successfully on my own. Despite following the steps outlined in the links provided, I consistently encountered an issue where toHaveBeenCalled would ...
I have inserted data into multiple tables, each stored in a different SQL database. Now, I need to be able to click on one row from each table. Once I have selected 3 rows from the 3 tables, another data table should display the corresponding data. My fo ...
I'm facing an issue with my website where, upon clicking the contact link in the navigation bar, a contact box slides down and the navigation bar moves below it. However, when the contact link is clicked again to hide the contact box, the navigation b ...
I am facing an issue with some dynamically generated divs from a JavaScript plugin. The divs have a class .someclass which wraps existing divs. My goal is to add a class to the children of .someclass. I attempted to achieve this by using the following code ...
https://jsfiddle.net/8x7p682z/ function initialize() { function setThemeForTimeOfDay() { const body = document.querySelector('body'); const hours = new Date().getHours(); if (9 <= hours && hours <= 12) body.sty ...
As I transitioned to Swift, I quickly realized that a lot of the Sample Code I was using no longer functions in Swift 2.0. This has made it challenging for me as a beginner to navigate. I am seeking advice on the best practices for interacting with a REST ...
Apple's iOS 9 update brought in three new ways of App Thinning: App Slicing Resource On Demand Bit Code: acts as a plug-in for iOS Apps I have come across tutorials and example codes for 1. and 2., but information on Bitcode seems to be scarc ...
Using Jquery to dynamically return a list of products, render it as HTML, and show it on the page using $(selector).html(html), I've encountered an issue. When adding products to the cart too quickly, which triggers the rendering of the cart again, th ...
I have a dilemma with my two HTML pages - index.html and register.html. I am trying to navigate from index.html to register.html, but I want to skip the select region step and go straight to the login page. Here's the code snippet I've been attem ...
Having some trouble setting up ion-scroll on a specific screen in my mobile application built with Ionic. On the Book page of my app, I'm encountering two main issues: https://i.stack.imgur.com/MnheG.png 1) The placement of the Confirm button doesn& ...
Currently, I am developing a chat bot using MeteorJS/NodeJS, which engages with approximately 2,000 active users on a daily basis. Tracking the number of individuals who interact with the bot each day is made possible by storing their activity information ...
Currently using Xcode 7.1 with OS 10.11.1, I am encountering an issue with static cells in tableviews. When the cells are smaller than the view controller, the data within the static cells (labels, text fields, etc) is not visible. Even saved data is not d ...
Just started working with Angular 2 and I've encountered a problem. I have an API that loads a JavaScript file in my project. The issue is, I need to use this JS file and cannot modify it. Essentially, this JS file has some methods that make AJAX call ...
What could be causing the global variable to change when using the function write_ACK_ONLY()? I'm passing the array rxUartBuffer to write_ACK_ONLY() as data = new Array(20), but upon checking the Log Output, it seems that the function is also modifyin ...
I designed a Dropdown menu in my project using Semantic-UI-React to allow users to choose colors. https://i.sstatic.net/PkCLa.png Here is the code snippet for the dropdown menu: import React, { Component } from 'react'; import { Dropdown } fro ...
I need to figure out a reliable way to detect when my input field has been cleared so that I can clear the associated data. Currently, I am using the logic if (searchTerm.length === 0) to check for a cleared input. However, I have also experimented with i ...