使用Require.js加载Stripe.js [英] Load Stripe.js with Require.js

问题描述

我无法在Require.js中加载Stripe.js.我的设置看起来像这样

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'
    }
  }
});

这实际上是可行的，也就是说，我可以在dom中看到script标签，但是当我需要它时，它是 undefined .有什么想法在这里会发生什么吗?

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?

推荐答案

条带导出的全局变量为 条带 ，带有大写字母"S". exports 需要完全匹配全局导出( )，即大小写匹配.

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

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>

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>

这篇关于使用Require.js加载Stripe.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！