nativescript-stripe
    TypeScript icon, indicating that this package has built-in type declarations

    6.6.2 • Public • Published

    npm npm Build Status

    Installation

    Requires I0S 9.x +

    NativeScript 4x

    • tns plugin add nativescript-stripe

    NativeScript 3x

    • tns plugin add nativescript-stripe@3.3.0

    NativeScript 2x

    • tns plugin add nativescript-stripe@1.0.1

    Configure

    Android

    Stripe Android v10.2.1 SDK is being used

    iOS

    Stripe iOS 19.0.1 SDK (pod) is being used

    Angular

    To use the Custom Integration's CreditCardView in Angular, register the Angular wrapper in the main module (typically app.module.ts), as follows:

    ...
    import { CreditCardViewModule } from "nativescript-stripe/angular";
    ...
    @NgModule({
      imports: [
        ...
        CreditCardViewModule,
        ...
      ],
      ...
    })
    export class AppModule { }

    Usage

    IMPORTANT: Make sure you include xmlns:stripe="nativescript-stripe" on the Page tag

    Using from view

    <stripe:CreditCardView id="card"/>

    Add extra details to card

    JavaScript

    const ccView = page.getViewById("card");
    const cc = ccView.card;
    cc.name = "Osei Fortune";

    TypeScript

    import { CreditCardView, Card } from 'nativescript-stripe';
    const ccView:CreditCardView = page.getViewById("card");
    const cc:Card = ccView.card;
    cc.name = "Osei Fortune";

    Using from code

    import { Card } from 'nativescript-stripe';
    const cc = new Card("1111111111111111",2,18,"123");
    cc.name = "Osei Fortune";

    Standard Integration

    The demo and demo-angular folders contain demos that use the Standard Integration. They can be used as a starting point, and provide information on how to invoke the Standard Integration components. For more information, see the README in the demo folders.

    Set Stripe configuration values:

    StripeConfig.shared().backendAPI = <Your API Service>;
    StripeConfig.shared().publishableKey = <Your Stripe Key>;
    StripeConfig.shared().companyName = <Your Company Name>;
    // To support Apple Pay, set appleMerchantID.
    StripeConfig.shared().appleMerchantID = <Your Apple Merchant ID>;

    Create a Customer Session

    let customerSession = new StripeCustomerSession();

    Create a Payment Session

    let paymentSession = new StripePaymentSession(page, customerSession, price, "usd", listener);

    See Stripe Docs for more information.

    Strong Customer Authentication

    PSD2 regulations in Europe will require Strong Customer Authentication for some credit card purchases. Stripe supports this, though most of the work to make it happen is required on the backend server and in the mobile app, outside the nativescript-stripe plugin.

    To support SCA, follow the instructions for iOS and Android on using PaymentIntents instead of tokens when interacting with your backend server. The nativescript-stripe plugin has cross-platform data structures and method calls that might be helpful. In index.d.ts see:

    • PaymentMethod and related classes
    • StripePaymentIntent and related classes
    • Methods Stripe.createPaymentMethod, Stripe.retrievePaymentIntent, Stripe.confirmPaymentIntent and Stripe.confirmSetupIntent

    Handling secondary customer input

    SCA requires the customer to enter additional information with some charge cards. Stripe takes care of this if you properly handle the redirect from the StripePaymentIntent returned from the server.

    If you're using the automatic confirmation flow, confirmPaymentIntent and confirmSetupIntent will automatically manage the SCA validation by showing and validating the payment authentification.

    If you're using the manual confirmation flow, where back-end creates the PaymentIntent|SetupIntent and requires an Intent authentification from the customer, authenticatePaymentIntent and authenticateSetupIntent will allow to manage that extra step before sending back the Intent to your server.

    Status

    demo-angular now supports SetupIntent and PaymentIntent SCA integration. Any credit card verification will be automatically prompted to the user.

    Known Issues

    const enum not found

    When building with NativeScript v6, it builds using the webpack-only flow in "transpileOnly" mode. A webpack issue means that const enum values cannot be found in the final output.

    This problem is not present in Angular projects and likely won't be an issue if you do not use any of the exported enums.

    Unfortunately, the only fix I've found for this is to follow the advice in that issue and modify webpack.config.js in your app to set transpileOnly to false.

    Note: This may no longer be needed once this TypeScript bug is fixed.

    TODO

    • Android Pay
    • Apple Pay (supported by Standard Integration, not by Custom Integration)

    Install

    npm i nativescript-stripe

    DownloadsWeekly Downloads

    44

    Version

    6.6.2

    License

    Apache-2.0

    Unpacked Size

    153 kB

    Total Files

    37

    Last publish

    Collaborators

    • avatar
    • avatar