Load Stripe.js with Require.js

jwerre Published at Dev

jwerre

I'm having trouble loading Stripe.js with Require.js. My setup looks a bit like this

requirejs.config({
  paths: {
    'stripe': 'https://js.stripe.com/v3/?noext'
  },
  shim: {
    'stripe': {
      exports: 'stripe'
    }
  }
});

This actually does work, that is, I can see the script tag in the dom but when I require it it's undefined. Any ideas what could be happening here?

zero298

The global that stripe exports is Stripe with an uppercase "S". The exports needs to match the global export exactly, meaning case.

This works:

requirejs.config({
  paths: {
    'stripe': 'https://js.stripe.com/v3/?noext'
  },
  shim: {
    'stripe': {
      exports: 'Stripe' // Uppercase
    }
  }
});

require(['stripe'], function(s) {
  // Based on code from https://stripe.com/docs/stripe-js/elements/quickstart
  const ss = s('pk_test_g6do5S237ekq10r65BnxO6S0');
  const elements = ss.elements();
  const card = elements.create('card');
  card.mount('#card-element');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>


<div id="card-element"></div>

This doesn't:

requirejs.config({
  paths: {
    'stripe': 'https://js.stripe.com/v3/?noext'
  },
  shim: {
    'stripe': {
      exports: 'stripe' // Lowercase
    }
  }
});

require(['stripe'], function(s) {
  console.log(s); // undefined
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-11-24

Comments

0 comments

Load online js file with require in node

pre-load / pre-require directories of .js route files

How to load external script with optimized require.js?

Why doesn't node.js load the module I require?

Require.js to load all resources for an app, including Polymer

Require.js -- how to load relative to a module directory

Require.js load CDN bootstrap and CDN popper

require.js - unable to load any further modules

Require.js module(node-fetch) load for contex error

Stripe with Vue.js

Stripe with React JS

Angular.js with Stripe

How to load bootstrapped models in Backbone.js while using AMD (require.js)

JS: Switching from Stripe Checkout to Stripe Elements

CORS on Stripe https://js.stripe.com

Callbacks with Require JS

Require js error handling

Passport JS -> require(...) is not a function

Angular 2 and stripe.js

Integrating Stripe payment in React js

Load json file content in Node js/Mochausing require module passing file name dynamically

data-main attribute on <script> tag that doesn't load require.js works

MongoDB scripts and CSV files: can I use require.js to load jquery.csv?

Does app.js in ExpressJS import all re-require files again each page load?

How can I load require.js from multiple paths, without using an absolute url?

require.js alternative way to require?

Require.js#require failing locally (file:///)

Vuejs require("axios") in .js file, require is not defined

require.js require a module with index.js

TOP Ranking

Article