Setting up the 'nativescript-stripe' plugin in your NativeScript Vue project for seamless integration

Question

Setting up the 'nativescript-stripe' plugin in your NativeScript Vue project for seamless integration

Trying to integrate the «nativescript-stripe» plugin into my Nativescript Vue app has been a challenge. The documentation and demos on the plugin's GitHub are geared towards Angular and TypeScript, making it difficult to adapt for Vue. Can anyone provide guidance on how to properly use the StandardComponent with Vue and provide insights on the parameters required by

StripeService.createPaymentSession()

?

I attempted to set <Page ref=«cartPage»> in the template and initialize paymentSession in the mounted() method:

// Import statements
var paymentSession = {};

export default {
  mounted() {
    // Not sure if this is the correct approach
    paymentSession = StripeService.createPaymentSession(
      this.$refs.cartPage,
      this.stripeItem.price,
      new Listener(this)
    );
  },

Although my stripe.service.ts mirrors the Angular demo code, I have configured the publishableKey and backendBaseURL, and have a separate class for Listener:

// Listener class
export class Listener {
  public component;
  constructor(component) {
      this.component = component;
  }
  onCommunicatingStateChanged(_isCommunicating) {
      this.component.changeDetectionRef.detectChanges();
  }
// Code from Angular demo

Despite contemplating moving the Listener class to a separate file, that doesn't seem to be the issue currently.

Encountering the error message when running the app:

CONSOLE ERROR file:///node_modules/nativescript-vue/dist/index.js:2129:21 [Vue warn]: Error in mounted hook: "TypeError: _shared_stripe_stripe_service__WEBPACK_IMPORTED_MODULE_6__["StripeService"].createPaymentSession is not a function. (In '_shared_stripe_stripe_service__WEBPACK_IMPORTED_MODULE_6__["StripeService"].createPaymentSession(this.$refs.cartPage, this.stripeItem.price, new _shared_stripe_stripe_service__WEBPACK_IMPORTED_MODULE_6__"Listener")', '_shared_stripe_stripe_service__WEBPACK_IMPORTED_MODULE_6__["StripeService"].createPaymentSession' is undefined)"

UPDATE:

After some adjustments, I managed to get the app up and running with the following setup:

ShoppingCart.vue:

// Vue component code here

stripe.service.ts:

// Stripe service code here

However, I am currently facing an issue where nothing happens when tapping "Payment type". Despite debugging and verifying that the code is executing without errors, the action does not trigger as expected. Specifically, the method presentPaymentMethods() from the plugin seems to be running without any visible effect.

Any insights or suggestions on this would be greatly appreciated!

typescript stripe-payments nativescript nativescript-vue nativescript-plugin

Answer 1

Answer №1

Finally, after dedicating numerous hours to the task, I successfully unraveled the solution. A huge shoutout to @Manoj for the helpful tip!

stripe.service.ts:

import { StripeAddress, StripeBackendAPI, StripeConfig, StripeCustomerSession, StripePaymentListener, StripePaymentSession, StripeShippingAddressField, StripeShippingMethod } from "nativescript-stripe/standard";
import * as httpModule from "tns-core-modules/http";

// 1) To initiate this demo, visit https://dashboard.stripe.com/account/apikeys and retrieve your "Test Publishable Key" (e.g., pk_test_abcdef). Paste it below.
export const publishableKey = "pk_test_yours";

// 2) Optionally, for saving user payment details, deploy the backend from https://github.com/stripe/example-ios-backend to Heroku. Paste your Heroku URL (e.g., https://blazing-sunrise-1234.herokuapp.com ) below.
const backendBaseURL = "https://yours.herokuapp.com/";

// 3) To enable Apple Pay, create an Apple Merchant ID as per the instructions at https://stripe.com/docs/apple-pay/apps Paste it below (e.g., merchant.com.yourappname).
const appleMerchantID = "";

// Listener class
export class Listener {
  public component;
  constructor(component) {
    this.component = component;
  }
  // Additional methods here
}

// StripeService class
export class StripeService implements StripeBackendAPI {
  // Additional methods here
}

Payment.vue:

<template>
  // Vue template code here
</template>

<script>
// TypeScript code here
</script>

Ensure that TypeScript is installed using the command tns install typescript.

Answer 2

Finally, after dedicating numerous hours to the task, I successfully unraveled the solution. A huge shoutout to @Manoj for the helpful tip!

stripe.service.ts:

import { StripeAddress, StripeBackendAPI, StripeConfig, StripeCustomerSession, StripePaymentListener, StripePaymentSession, StripeShippingAddressField, StripeShippingMethod } from "nativescript-stripe/standard";
import * as httpModule from "tns-core-modules/http";

// 1) To initiate this demo, visit https://dashboard.stripe.com/account/apikeys and retrieve your "Test Publishable Key" (e.g., pk_test_abcdef). Paste it below.
export const publishableKey = "pk_test_yours";

// 2) Optionally, for saving user payment details, deploy the backend from https://github.com/stripe/example-ios-backend to Heroku. Paste your Heroku URL (e.g., https://blazing-sunrise-1234.herokuapp.com ) below.
const backendBaseURL = "https://yours.herokuapp.com/";

// 3) To enable Apple Pay, create an Apple Merchant ID as per the instructions at https://stripe.com/docs/apple-pay/apps Paste it below (e.g., merchant.com.yourappname).
const appleMerchantID = "";

// Listener class
export class Listener {
  public component;
  constructor(component) {
    this.component = component;
  }
  // Additional methods here
}

// StripeService class
export class StripeService implements StripeBackendAPI {
  // Additional methods here
}

Payment.vue:

<template>
  // Vue template code here
</template>

<script>
// TypeScript code here
</script>

Ensure that TypeScript is installed using the command tns install typescript.

Setting up the 'nativescript-stripe' plugin in your NativeScript Vue project for seamless integration

Answer №1

Similar questions

Using Typescript to inherit from several classes with constructors

Error message indicating that the function is not defined within a custom class method

Experimenting with axios.create() instance using jest

When employing CDK to configure an SNS topic Policy Statement with actions limited to ["sns:*"], the CloudFormation output may display a warning message stating "Policy statement action is not within the service scope."

Update current properties of objects

I'm looking for a way to merge the functionalities of tsc build watch and nodemon into a single Node.js

Creating a factory function through typhography

The template literal expression is invalid due to the "string | null" type when sending authorization

How can I properly containerize an Express Gatsby application with Docker?

"Dealing with conflicts between RMQ and TypeORM in a NestJS

Using Material UI Slider along with Typescript for handling onChange event with either a single number or an

Steps to configure Visual Studio Code to automatically open the original TypeScript file located in the "src" folder when a breakpoint is hit in a Node.js application

Error: Unable to retrieve the value of 'secret' as it is undefined when attempting to assign a response cookie in Express framework

Utilize a fresh function in Angular to retrieve and store data from a URL into a variable

Sending returned values from a promise to the calling function in Angular

Utilizing regular expressions to search through a .md file in JavaScript/TS and returning null

Utilizing a conditional ngIf statement in HTML or incorporating a variable within typescript for logical operations

The TypeScript compiler generates a blank JavaScript file within the WebStorm IDE

Do type declaration files for NPM packages have to be in the .d.ts format?

Differentiate between function and object types using an enum member