Giter Site home page Giter Site logo

stripe-js's Introduction

Stripe.js as a CommonJS module or ES module

This package allows Stripe.js to be imported as a CommonJS module or ES module.

Note: To be PCI compliant, you must load Stripe.js directly from https://js.stripe.com. You cannot include it in a bundle or host it yourself. This package wraps the global Stripe function provided by the Stripe.js script as an ES module.

Calling loadStripe always loads the latest version of Stripe.js, regardless of which version of @stripe/stripe-js you use. Updates for this package only impact tooling around the loadStripe helper itself and the TypeScript type definitions provided for Stripe.js. Updates do not affect runtime availability of features of Stripe.js.

npm version

Minimum requirements

  • Node.js: v12.16
  • TypeScript: v.3.1.1

Installation

Use npm to install the Stripe.js module:

npm install @stripe/stripe-js

Usage

loadStripe

This function returns a Promise that resolves with a newly created Stripe object once Stripe.js has loaded. It takes the same parameters passed when directly initializing a Stripe instance. If necessary, it will load Stripe.js for you by inserting the Stripe.js script tag. If you call loadStripe in a server environment it will resolve to null.

import {loadStripe} from '@stripe/stripe-js';

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

We’ve placed a random API key in this example. Replace it with your actual publishable API keys to test this code through your Stripe account.

For more information on how to use Stripe.js, please refer to the Stripe.js API reference or learn to accept a payment with Stripe.

If you have deployed a Content Security Policy, make sure to include Stripe.js in your directives.

TypeScript support

This package includes TypeScript declarations for Stripe.js. We support projects using TypeScript versions >= 3.1.

Some methods in Stripe.js accept and return objects from the Stripe API. The type declarations in @stripe/stripe-js for these objects in will always track the latest version of the Stripe API. If you would like to use these types but are using an older version of the Stripe API, we recommend updating to the latest version, or ignoring and overriding the type definitions as necessary.

Note that we may release new minor and patch versions of @stripe/stripe-js with small but backwards-incompatible fixes to the type declarations. These changes will not affect Stripe.js itself.

Ensuring Stripe.js is available everywhere

To best leverage Stripe’s advanced fraud functionality, ensure that Stripe.js is loaded on every page, not just your checkout page. This allows Stripe to detect suspicious behavior that may be indicative of fraud as customers browse your website.

By default, this module will insert a <script> tag that loads Stripe.js from https://js.stripe.com. This happens as a side effect immediately upon importing this module. If you utilize code splitting or only include your JavaScript app on your checkout page, the Stripe.js script will only be available in parts of your site. To ensure Stripe.js is available everywhere, you can perform either of the following steps:

Import as a side effect

Import @stripe/stripe-js as a side effect in code that will be included throughout your site (e.g. your root module). This will make sure the Stripe.js script tag is inserted immediately upon page load.

import '@stripe/stripe-js';

Manually include the script tag

Manually add the Stripe.js script tag to the <head> of each page on your site. If an existing script tag is already present, this module will not insert a new one. When you call loadStripe, it will use the existing script tag.

<!-- Somewhere in your site's <head> -->
<script src="https://js.stripe.com/v3" async></script>

Importing loadStripe without side effects

If you would like to use loadStripe in your application, but defer loading the Stripe.js script until loadStripe is first called, use the alternative @stripe/stripe-js/pure import module:

// CommonJS module import
const {loadStripe} = require('@stripe/stripe-js/pure');
// ES module import
import {loadStripe} from '@stripe/stripe-js/pure';

// Stripe.js will not be loaded until `loadStripe` is called
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

Disabling advanced fraud detection signals

If you would like to disable advanced fraud detection altogether, use loadStripe.setLoadParameters:

// CommonJS module import
const {loadStripe} = require('@stripe/stripe-js/pure');
// ES module import
import {loadStripe} from '@stripe/stripe-js/pure';

loadStripe.setLoadParameters({advancedFraudSignals: false});
const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');

The loadStripe.setLoadParameters function is only available when importing loadStripe from @stripe/stripe-js/pure.

Stripe.js Documentation

stripe-js's People

Contributors

alexoser-stripe avatar alic-stripe avatar arashn-stripe avatar awalker-stripe avatar bcobb-stripe avatar brendanm-stripe avatar bsharon-stripe avatar bui-stripe avatar cbala-stripe avatar christopher-stripe avatar cyuen-stripe avatar dakshshah96 avatar dependabot[bot] avatar dweedon-stripe avatar fruchtose-stripe avatar graceg-stripe avatar hofman-stripe avatar jackieosborn-stripe avatar jima-stripe avatar jsang-stripe avatar madhav-stripe avatar martinalong-stripe avatar maxwelly-stripe avatar pololi-stripe avatar richnologies avatar saiichihashimoto avatar samridh-stripe avatar schau-stripe avatar tmcquinn-stripe avatar tylersmith-stripe avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

jahau thedemodev bonomali samouss iamsdgliv laurisbernhart dakshshah96 ltrowley83 petrogad malkeybee jdivock-stripe ethernodes-org jfoliveira thatrao913 matthelonianxl cweiss-stripe damianwhite nkpart powerbi-tech etherscan-io jlh-stripe polybuildr bestiosywei sachiotomita fred-stripe notwoods tobilen fridaykaye24 kulek1 yaw-stripe imjared filipebarcos-stripe cheeliang-stripe readcast rhonig22 bgdv-hq gregjopa manny27nyc jofftiquez armsteadj1 nasirhjafri tmarek-stripe jeremyjts mbarrett-stripe marcoscannabrava mikicorl viablecell ramonsenadev shotechs vidyasagar58 vxopadel richnologies isabella232 terrorizer1980 nemikolh adamburmister-stripe nampnq esetnik hatusjc perpetua1 jettlove morganmorris1953 jeremycorbeil9 owenlow maxbric eastoak n0th1ng-else sajov tinyhouselist cyyapye manupandolfi pmanolak 3rdigen haor1 nabeel-shakeel thiru-eth nivapo95 eliasskhouryy is2ei whatistofu starsirius vvmspace furkan3ayraktar ahanusek wonderinteractive davit2001 ffmathy endless-win lucasslots suvikram michalorman zachwaterstories slauzinho teodragovic skywares-llc-nm oliver-day bgdv-ateliers egeniesse-stripe mazniak hannahp-stripe

stripe-js's Issues

Types for Subscription, Plan and Invoice missing

I had a very hacky solution in place to make the types of the node lib available in the front end. I was pleased to see that there now is this lib that provides the types. I am missing types for Subscription, Plan and Invoice.

Is it planned to add them?

New required fields in createToken function for IBAN

Summary

Hi. Is it right, that I can't create an IBAN token using stripe.createToken function without specifying account_holder_name and account_holder_type? Currently, it's possible to create this token using API without specifying those fields, it fills them with null, and it works fine. In the previous version, stripe.createToken also worked with specifying the currency field only.

Loosen script src detection

For whatever reason (probably old code samples were different) I had a trailing slash / at the end of my stripe.js URL in the <head> of my HTML document, as shown below.

<html>
    <head>
        <script src="https://js.stripe.com/v3/"></script>
    </head>
    <body></body>
</html>

Unfortunately, this causes the @stripe/stripe-js library to think there is no existing stripe.js script, so it injects a duplicate script and stripe.js ends up loading twice.

I was able to simply remove the trailing slash to fix it on my end, but it may be worth adding that as a fallback case at this part of the code:

stripe-js/src/index.ts

Line 39 in 38d45fd

document.querySelector(`script[src="${V3_URL}"]`) || injectScript();

loadStripe Promise can return null? How? 

declare module '@stripe/stripe-js' {
  const loadStripe: (
    publishableKey: string,
    options?: StripeConstructorOptions | undefined
  ) => Promise<Stripe | null>;

  const Stripe: StripeConstructor;
}

Taking a look at this function, I'm not sure in what situation it's expected that the Promise would successfully return, but with null as opposed to the stripe library being in the return value. Can someone help to explain why or when this might happen and the motivations behind coding the loadStripe function to return a Promise as opposed to simply return Stripe or null?

Get version number using loadStripe

How can we determine the api version (date) when using loadStripe to load the sdk? We need to pass this to our backend for the ephemeral key creation.

Incorrect Types for PaymentRequestButtonElement

Per the examples in the hooks directory, the PaymentRequestButtonElement looks something like this:

{paymentRequest && (
        <PaymentRequestButtonElement
          onClick={(event) => {
            if (paymentMethod) {
              event.preventDefault();
              setErrorMessage(
                'You can only use the PaymentRequest button once. Refresh the page to start over.'
              );
            }
          }}
          options={{
            ...ELEMENT_OPTIONS,
            paymentRequest,
          }}
        />
      )}

After getting a TS compile error and bouncing through the types a bit, it appears the options attribute no longer excepts a paymentRequest. I'll paste a flow of definitions here:


interface PaymentRequestButtonElementProps extends ElementProps {
    /**
     * An object containing [Element configuration options](https://stripe.com/docs/js/elements_object/create_element?type=paymentRequestButton).
     */
    options?: stripeJs.StripePaymentRequestButtonElementOptions;

...

  interface StripePaymentRequestButtonElementOptions {
    classes?: StripeElementClasses;

    /**
     * An object used to customize the appearance of the Payment Request Button.
     */
    style?: {
      paymentRequestButton: {
        type?: 'default' | 'book' | 'buy' | 'donate';

        theme?: 'dark' | 'light' | 'light-outline';

        /**
         * The height of the Payment Request Button.
         */
        height?: number;
      };
    };
  }

Unmatched event overload for "change"

I'm struggling with the following. I'm working on a method for handling errors for stripe elements and for some reason, Typescript is complaining about listening for the change event.

  private handleError(
    element:
      | StripeCardExpiryElement
      | StripeCardCvcElement
      | StripeCardNumberElement,
    callback: (a: string) => string
  ) {
    element.on("escape", () => {
      callback("foo");
    });
    element.on("blur", () => {
      callback("foo");
    });
    element.on("focus", () => {
      callback("foo");
    });
    element.on("escape", () => {
      callback("foo");
    });
    element.on("change", () => {
      callback("foo");
    });
  }
  The last overload gave the following error.
    Argument of type '"change"' is not assignable to parameter of type '"escape"'.
    169 |       callback("foo");
    170 |     });
  > 171 |     element.on("change", () => {
        |                ^
    172 |       callback("foo");
    173 |     });
    174 |   }

Any ideas what I'm doing wrong? The above three types all define the signature:

  // e.g. in card-expiry.d.ts:
    on(
      eventType: 'change',
      handler: (event: StripeCardExpiryElementChangeEvent) => any
    ): StripeCardExpiryElement;

Postal code not showing in element

Summary

Operating System: macOS Catalina (10.15.16)
Browser: Firefox Developer Edition (81.0b1 (64-bit))
Other Browser: Chrome (latest)
Issue: Postal code input not showing in card element

Other information

This issue does not seem to be specific to one browser. My application is in Vue and I am creating a simple card element to add a new payment method for a user. The input field is present however, the postal code is not. I did not read any documentation that says it does not show up when using a test key so if this is the case, please update your documentation and let me know accordingly. Otherwise, that is my issue. Using this wrapper in Vue 2.6.11, the postal code input is not available.

let stripe = await loadStripe('pk_test_');
let stripeElem = stripe.elements();

this.card = stripeElem.create('card', {
  hideIcon: true,
  hidePostalCode: false,
  style: {
    base: {
      color: '#363636',
      fontSize: '22px',
      fontSmoothing: 'antialiased'
    }
  }
});
this.card.mount(this.$refs.card);

The above code produces this: https://recoilnetworks.s3.amazonaws.com/general/add-payment-card.png

'betas' does not exist in type 'StripeConstructorOptions'

Summary

I'm trying to load stripe with a beta flag and I get a TS error saying the property betas does not exist on 'StripeConstructorOptions'

loadStripe(MY_KEY, { betas: ['the_beta_flag'] })

should I be setting beta flags some other way?

"Serve static assets with an efficient cache policy"

When running Lighthouse on my app I'm getting the advice above.
The details show the stripe js libs:

URL Cache TTL Transfer Size
/v3(js.stripe.com) 5 m 48 KB
…js/m-outer-c87083b….js(js.stripe.com) 5 m 1 KB

Is there a chance to increase the Cache TTL on your end?

Angular 10 build throws warning that this is a CommonJS module

Angular 10 throws a warning that this is a CommonJS or AMD module, not ES module

An Angular 10 build of my project is reporting a warning on this package as:
WARNING in .......stripe.service.ts depends on '@stripe/stripe-js/pure'. CommonJS or AMD dependencies can cause optimization bailouts. For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

I can add an exception to my angular.json file to allow this without the warning, but I'm trying to figure out why this package is throwing this warning in the first place. Is it not a true ES module?

Other information

This is how I am included the reference to Stripe in my Angular service:

import {loadStripe} from '@stripe/stripe-js/pure';
import {Stripe} from '@stripe/stripe-js';

Stripe JS removed from NPM and yarn registry?

Summary

Stripe JS doesn't appear to be in the registry anymore.

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-1.7.0.tgz
npm ERR! 404 
npm ERR! 404  '@stripe/[email protected]' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)

Support loading from within chrome-extension

Summary

I'm trying to use this loader inside a chrome-extension, but when i use a live token, it throws the error "IntegrationError: Live Stripe.js integrations must use HTTPS"

By inspecting the line throwing this error, I see that it allows protocols 'https', 'file', and 'ionic'. Is there anyway to add 'chrome-extension' to this list?

Other information

There's no type definition for createToken("account")

Summary

There's no type definition for createToken("account").
Can you please include the type definition?

import { loadStripe } from "@stripe/stripe-js";

const stripe = await loadStripe(STRIPE_PUBLIC_KEY);
if (stripe === null) return;
stripe.createToken("account", data); // <- TypeScript Error "No overload matches this call."

Other information

node modules:
"@stripe/stripe-js": "^1.3.1"
"typescript": "3.8.3"

Question: Remove navigation history before redirectToCheckout

Is there a way or a parameter to pass to redirectToCheckout so the previous page are removed from the history?

My case is:

Order Summary page --> Stripe Checkout page --> Success/Cancel page

I want to remove the order summary page before going to Stripe so the user can't go back to the order summary.

Lazy-loading stripe (option to not load on every page)

I understand from the docs and this repo's README:

To best leverage Stripe’s advanced fraud functionality, include this script on every page, not just the checkout page. This allows Stripe to detect anomalous behavior that may be indicative of fraud as customers browse your website.

By default, this module will insert a <script> tag that loads Stripe.js from https://js.stripe.com. This happens as a side effect immediately upon importing this module.

However, it isn't an option for me to include it on every page. Businesses have different rules around CSP, what we're willing to load on each page, gauging performance based on what things are loaded, etc.

Would your team consider making an option to lazily-load stripe, so that it is only included on certain pages for those that are unable to take advantage of the additional fraud detection?

I'm much prefer to use your repo than to do something hacky like this.

TS: CreatePaymentMethodCardData is missing billing_details

Hi, there is a collision between CreatePaymentMethodCardData typescript definition and your API.

CreatePaymentMethodCardData only accepts type and card although in your docs you have this example:

stripe
  .createPaymentMethod({
    type: 'card',
    card: cardElement,
    billing_details: {
      name: 'Jenny Rosen',
    },
  })

https://stripe.com/docs/js/payment_methods/create_payment_method#stripe_create_payment_method-paymentMethodData

So is it possible to pass billing_details or not? Thank you.

Uncaught (in promise) TypeError: Converting circular structure to JSON

I'm using stripe payment intent api for checkout in Gatsby/React app and for that I'm using stripe CardElement and whenever I call the following code it give me circular json error on JSON.stringify function.

const result = await stripe.confirmCardPayment(data.client_secret,{
            card: elements.getElement(CardElement),
            billing_details: {
                name: 'Zeeshan'
            }
        })

So apparently when we pass elements.getElement(CardElement) in card property this element has some circular reference and in postMessage of stripe it gives this error

Error:

Uncaught (in promise) TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLDivElement'
    |     property '__reactInternalInstance$0h4ka4mbvxb' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle
    at JSON.stringify (<anonymous>)
    at Me (v3:1)
    at at.value (v3:1)
    at at.value (v3:1)
    at v3:1
    at new Promise (<anonymous>)
    at er._sendCAReq (v3:1)
    at Object.confirmPaymentIntent (v3:1)
    at v3:1
    at v3:1
    at mc.<anonymous> (v3:1)
    at mc.confirmCardPayment (v3:1)
    at _callee$ (CardSection.js:25)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.next (runtime.js:118)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)

I have tried to find solution but no luck there on link on stack overflow which 4 years old, that guy was facing same issue in Angular and says its because of Stripe tries to stringy object which has circular reference.
https://stackoverflow.com/questions/36258252/stripe-json-circular-reference
In my case I'm using React but I'm unable to find right solution on how to avoid this circular reference as it only

Another reference for error which is quite recent: preactjs/preact#2252

StripeCardElement type does not inherit HTMLElement

Summary

When using the library with typescript we get the error that addEventListener is not a property of StripeCardElement which breaks the examples from the docs.

Using the code from these docs: https://stripe.com/docs/billing/subscriptions/cards
Specifically this part breaks:

const card: StripeCardElement =  elements.create('card', { style: style });
// error below, addEventListener does not exist in StripeCardElement
cardElement.addEventListener('change', callback);

Other information

Tested with stripe-js 1.5.0

Allow package to be mocked for testing

We would like to be able to mock out loadStripe during our unit tests, which run in a restricted, containerized CI/CD environment; however, simply importing loadStripe has side effects because stripePromise is created immediately when it's imported. The TypeScript doc recommends against side-effects in modules, and in this case it makes testing a pain because loadStripe cannot be mocked out. Plus it's unexpected: Intuitively, loadStripe, sounds like a function/action that loads the stripe script, when in fact it's a wrapper around Promise instance.

Unit testing would be simplified if loadStripe were a mockable function that loaded the stripe script on demand.

As a side question, using the current version of stripe (1.3.0), what is the proposed way to unit test code that depends on Stripe.js without making HTTP and XHR requests? How can this be mocked out?

Using CardNumberElement, no way to discern postcode/zipcode

If we use CardElement, the post/zip field changes automatically.

I can't see anywhere in the documentation to do that if we use separate fields. One would think that there would be a flag in the change event to indicate (similar to the card brand) this so we can change our field/validation accordingly.

CardElement hidden on iPhone

I'm opening the ticket here to hopefully make it easier to be found on Google, since I haven't found anything.

https://stripe-payments-demo.appspot.com/
Screenshot 2020-12-30 at 20 56 45

⬆️ Check "Payment information" section - the card input is hidden in Safari iPhone 8. The same behaviour I get on any iPhone and on both Chrome and Safari. Funny enough, Chrome on Android works well.

On iPad I get the same behaviour if I open the website in Slide Over mode, if full screen it works well, so maybe it's something to do with the width too?

PaymentRequest Type

The object returned by canMakePayment only allows us to detect if the paymentRequest is an Apple Pay request. If the request is not Apple Pay, how can we determine the type (Google Pay, Microsoft or browser saved card)?

Keeping stripe data in-house.

Summary

I want to just use stripe as an payment gateway and store all the clients card details in my database. Is it possible? if yes how?

Other information

Add "typings" to package.json

Summary

I'm using loadStripe with Angular, and Angular's build system expects packages to conform to the Angular Package Format. Part of that requirement is to specify the path to the typings file using the "typings" property in the module's package.json. @stripe/stripe-js has "types" but not "typings", and as a result AOT builds fail.

Other information

There's a StackBlitz here that demonstrates the error: https://stackblitz.com/edit/angular-kezmsy?file=src%2Fapp%2Fapp.module.ts The error can be reproduced as follows:

That results in a difficult-to-diagnose error:

ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@stripe/stripe-js/types/index' in '/home/user/Downloads/angular-kezmsy/src/app'

I also files a bug report against angular-cli, which requests that the build process support both "types" and "typings." The TS doc suggests that the two are synonymous. Here's that report: angular/angular-cli#17353

And I have a SO question with some additional context: https://stackoverflow.com/questions/60940657/angular-8-and-stripe-js-v3s-loadstripe-module-not-found-error-cant-resolve

Thanks for any help.

StripeElement declared is not exported from @stripe/stripe-js

Summary

I am attempting to use the type StripeElement in a generic component like this.

export class StripeElementComponent<T extends StripeElement>

But on build I keep getting this error

ERROR in Error: Symbol StripeElement declared in node_modules/@stripe/stripe-js/types/stripe-js/elements.d.ts is not exported from @stripe/stripe-js

Other information

import { StripeElement, StripeElementClasses, StripeElements, StripeElementStyle } from '@stripe/stripe-js';

Interface RedirectToCheckoutClientOptions in Typescript forbid One-time payments with Checkout

From https://stripe.com/docs/js/checkout/redirect_to_checkout it seems that One-time payment for checkout with client-only needs line-items and mode set to 'payment' but these definitions are not in
RedirectToCheckoutClientOptions from checkout.d.ts

So, right now, I can't use Checkout for these particular case, am I right?
And it works for a plan with plan in items[].

Versions:

Node: 12.16.2
Angular: 9.1.4
typescript 3.8.3
"@stripe/stripe-js": "^1.5.0",

Bug: "export 'Stripe' was not found in '@stripe/stripe-js'

Summary

Declared a class with a property as type Stripe, as well as other properties using the library defined types:

stripe: Stripe;
elements: StripeElements;
paymentRequest: PaymentRequest;
card: StripeCardElement;

Those types are imported at top of file:

import {
  PaymentRequest,
  Stripe,
  StripeCardElement,
  StripeElements
} from '@stripe/stripe-js';

All types except Stripe are not found at compilation time. Compilation fails with "export 'Stripe' was not found in '@stripe/stripe-js'

Other information

typescript: 3.5.3
webpack: 4.39.2

Payment method saved even though validation fails

If a card fails zip or cvc validation, and we pass save_payment_method: true the payment method will still be saved. Is this intended behaviour?

const result = await stripe.confirmCardPayment(clientSecret, {
        payment_method: paymentMethod,
        save_payment_method: true,
});

The non-element createToken overload typings are throwing an error.

Summary

Type warning/error when using createToken with tokenType of 'bank_account', 'pii', 'account', 'person'.
Most likely because they are strings.

Version: @stripe/stripe-js 1.8.0
Typescript: 3.7.5

const stripe = useStripe();

stripe.createToken('bank_account', {
  country: 'US',
  currency: 'USD',
  routing_number: '110000000',
  account_number: '000123456789',
  account_holder_name: 'Joe Smith',
  account_holder_type: 'individual',
});

Type warning: No overload matches this call.
  The last overload gave the following error.
    Argument of type '"bank_account"' is not assignable to parameter of type 'StripeCardElement | StripeCardNumberElement'.  TS2769

The typings definition for these token types:

/**
 * Use `stripe.createToken` to convert personally identifiable information (PII) into a single-use [Token](https://stripe.com/docs/api#tokens) for account identity verification.
 *
 * @docs https://stripe.com/docs/js/tokens_sources/create_token?type=pii
 */
createToken(
  tokenType: 'pii',
  data: CreateTokenPiiData
): Promise<{token?: Token; error?: StripeError}>;

/**
 * Use `stripe.createToken` to convert bank account information into a single-use token that you safely pass to your server to use in an API call.
 *
 * @docs https://stripe.com/docs/js/tokens_sources/create_token?type=bank_account
 */
createToken(
  tokenType: 'bank_account',
  data: CreateTokenBankAccountData
): Promise<{token?: Token; error?: StripeError}>;

/**
 * Use `stripe.createToken` to create a single-use token that wraps a user’s legal entity information.
 * Use this when creating or updating a Connect account.
 * See the [account tokens documentation](https://stripe.com/docs/connect/account-tokens) to learn more.
 */
createToken(
  tokenType: 'account',
  data: TokenCreateParams.Account
): Promise<{token?: Token; error?: StripeError}>;

/**
 * Use `stripe.createToken` to create a single-use token that represents the details for a person.
 * Use this when creating or updating persons associated with a Connect account.
 * See the [documentation](https://stripe.com/docs/connect/account-tokens) to learn more.
 */
createToken(
  tokenType: 'person',
  data: TokenCreateParams.Person
): Promise<{token?: Token; error?: StripeError}>;

Stripe without elements

Hi.

Is it correct that the version 3 of stripe can not be used without elements; e.g. to create a token for a credit card?

If this is the case how is it possible to switch back to the older api (v2) and to have the correct typings? What has to be inserted in the apiVersion parameter of the loadStripe function?

Thanks in advance.
Greets Lukas

Custom placeholders for elements

Summary

Is there plan to support custom placeholders for elements? I need it since Stripe doesn't support localization for all countries.

Failed to load Stripe.js

Summary

Some of my users are getting an error thrown Failed to load Stripe.js
Sadly, I can't reproduce and I don't have more details. My page is working perfectly fine for me and some of my colleagues.

I have js.stripe.com/v3 loaded in my head tag
And loadStripe is correctly executed only once.

Here is my code:

import { useState, useEffect } from 'react'
import { loadStripe } from '@stripe/stripe-js'

const StripeJSProvider = ({ children }) => {
  const [stripe, setStripe] = useState(false)

  useEffect(() => {
    if (!stripe) {
      setStripe(loadStripe(process.env.STRIPE_KEY))
    }
  }, [stripe])

  return children({ stripe })
}

export default StripeJSProvider

And then later:

<StripeJSProvider>
      {({ stripe }) =>
        stripe ? (
          <Elements stripe={stripe}>
            <MyComponent... />
          </Elements>
        ) : (
          <PageLoader />
        )
      }
    </StripeJSProvider>

Other information

According to sentry report, it looks like it's happening only on Firefox.

Thanks for your help.

Support for importing pure entry point as ESM

Summary

We ran into an issue where stripe was making HTTP calls during our unit tests. Following the advice of this issue we started importing loadStripe from '@stripe/stripe-js/pure' in our Angular project using the following syntax:

import { loadStripe } from '@stripe/stripe-js/pure';

Now, when we build our Angular application, we get the following warning:

Warning: /Users/bobby/Desktop/bugsplat/angular-web-app/src/app/payment/services/stripe/stripe-factory.ts depends on '@stripe/stripe-js/pure'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

All the other packages we use seem to have added an ESM module that we can import so that we don't get such warnings. Can Stripe please provide an ESM version of the pure entry point so that Webpack no longer displays this warning?

Thanks!

Other information

I believe this is specific to Webpack

Refused to connect to 'https://q.stripe.com/?{query}' because it violates the following Content Security Policy directive: "connect-src 'self' https://api.stripe.com https://errors.stripe.com https://js.stripe.com".

Summary

There is an issue with Content-Security-Policy using Stripe. There is a suspicious console error reloading checkout page or moving back from it.

Stripe JS is used (https://github.com/stripe/stripe-js/tree/v1.10.0) on client-side of our project. After using 'stripe.redirectToCheckout' (https://stripe.com/docs/js/checkout/redirect_to_checkout) and saving card we periodically can see following error in console: "refused to connect to https://q.stripe.com/?{query} because it violates the following Content Security Policy directive: connect-src 'self' https://api.stripe.com https://errors.stripe.com https://js.stripe.com".

An investigation was made and it is clear that there is a request GET https://checkout.stripe.com/pay/{cs_test} with Content-security-policy in response header with the same connect-src directive which is violated as was said in error message above. We have an assumption that https://checkout.stripe.com is trying to connect to https://q.stripe.com (this is defined as report-uri of CSP header) and violates connect-src directive. Content-security policy is not configured in our system itself, so it seems as Stripe internal issue. The question is how this can be fixed?

Other information

Browser: Google Chrome Version 87.0.4280.66 (Official Build) (64-bit) (Ubuntu)
For Firefox there are no errors, but 'q.stripe.com' requests are failed sometimes.

iDEAL confirmIdealSetup missing API

Hello, dear, Stripe contributors,

while integrating stripe for our client's platform, we've stumbled upon a piece of documentation which describes how one would be able to setup recurring iDEAL payments, but at the same time @stripe/react-stripe-js is missing API described here.

implementation code is pretty straightforward

function IDealPayment() {
  const { stripe } = useStripe();

  function submitHandler() {
    // ...
   stripe._**confirmIdealSetup**_(...); // missing
    // ...
  }

  return <Component... onSubmit={submitHandler} />
}

Am I missing something or is this feature not released yet documentation is already there?

Many thanks 🙏

3D Secure will adding to history

3D Secure will adding to history, and it result i need back twice to return previous page

i know result just because iframe update src, so how can i know when need back twice in handleActions: true

Iframe with allowpaymentrequest property does not allow express payment methods

Summary

stripe.paymentRequest does not have the same result as the native PaymentRequest when calling canMakePayment within an Iframe. The Iframe has the allowpaymentrequest attribute as specified in the documentation.

Other information

Sample stripe code

const paymentRequest = stripe.paymentRequest({
      country: 'US',
      currency: 'usd',
      total: {
        label: 'Demo total',
        amount: 0,
      },
      requestPayerName: true,
      requestPayerEmail: true,
      requestPayerPhone: true,
      requestShipping: true,
      shippingOptions: [],
    });

    paymentRequest.canMakePayment().then(result => {
      if (result) {
        // Always null
      }
    });

Sample native PaymentRequest code

new window.PaymentRequest(
      [
        {
          supportedMethods: 'https://google.com/pay',
          data: {
            ...
          }
        },
      ],
      {
        total: {
          label: 'Total',
          amount: {
            currency: 'USD',
            value: '0.00',
          },
        },
      },
    )
      .canMakePayment()
      .then(canPay => {
        // Returns true
      });

require function won't compile

Hi guys,
I've been trying to compile the function require(stripe, testkey) function for a while now in order to follow the Stripe tutorials for Node, and I've been getting the same compiler error that goes like this:

Module parse failed: Unexpected token (152:24)
[1] You may need an appropriate loader to handle this file type.
[1] | opts.auth = args.pop();
[1] | } else if (utils.isOptionsHash(arg)) {
[1] | const params = {...args.pop()};
[1] |
[1] | const extraKeys = Object.keys(params).filter(

I'm on OSX Big Sur, but I also had my friend try it on windows, and he ran into the same error.

The error says something about the loader, so I thought I'd post it here, just in case someone knows what's going on with this.

I've already installed stripe with the following commands
npm install --save stripe
npm install --save @stripe/react-stripe-js @stripe/stripe-js

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.