New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@power-elements/stripe-elements

Package Overview
Dependencies
Maintainers
1
Versions
31
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@power-elements/stripe-elements - npm Package Compare versions

Comparing version 2.2.4 to 2.3.0

96

CHANGELOG.md

@@ -0,1 +1,13 @@

# [2.3.0](https://github.com/bennypowers/stripe-elements/compare/v2.2.4...v2.3.0) (2020-01-29)
### Bug Fixes
* prevent typeerror if payment is unsupported ([d9f1146](https://github.com/bennypowers/stripe-elements/commit/d9f11468f35ccc9343f7a935f3b7936327a68d0c))
### Features
* **payment-request:** add `unsupported` event ([de6555b](https://github.com/bennypowers/stripe-elements/commit/de6555b1879602481930360d491057ed7ce0485f))
## [2.2.4](https://github.com/bennypowers/stripe-elements/compare/v2.2.3...v2.2.4) (2020-01-29)

@@ -9,6 +21,86 @@

# Changelog
## [2.2.3](https://github.com/bennypowers/stripe-elements/compare/v2.2.2...v2.2.3) (2020-01-27)
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
### Bug Fixes
* fix patch-package script ([e347aaa](https://github.com/bennypowers/stripe-elements/commit/e347aaa183cef7604f00e192dd3a9da05e41f272))
## [2.2.2](https://github.com/bennypowers/stripe-elements/compare/v2.2.1...v2.2.2) (2020-01-27)
### Bug Fixes
* fix typescript typings ([f3cb81e](https://github.com/bennypowers/stripe-elements/commit/f3cb81ed864fc5f5548c9236b82d1d075c5357fc))
## [2.2.1](https://github.com/bennypowers/stripe-elements/compare/v2.2.0...v2.2.1) (2020-01-25)
### Bug Fixes
* export ts typings ([487c04c](https://github.com/bennypowers/stripe-elements/commit/487c04c17d7bebf50b6b3f8e575de6a46b8e2349))
# [2.2.0](https://github.com/bennypowers/stripe-elements/compare/v2.1.1...v2.2.0) (2020-01-25)
### Bug Fixes
* clear the element when calling `reset` ([3b8bc61](https://github.com/bennypowers/stripe-elements/commit/3b8bc61e56c9f10f46a423f5110981899b761c8d))
* improve error message for empty card ([fa17b60](https://github.com/bennypowers/stripe-elements/commit/fa17b60874f42521895bb74b424314fbadfae36a))
### Features
* add `stripe` and `error` css shadow parts. ([46013a2](https://github.com/bennypowers/stripe-elements/commit/46013a239e8aee38411fe4fcb6f802955eebdfe0))
* add stripe-payment-request element ([32cdd0d](https://github.com/bennypowers/stripe-elements/commit/32cdd0d54e1fef3e81c6c222ac1ab2cc1735d57b))
* adds ready and focused propertie; blur and focus methods ([26f6e2a](https://github.com/bennypowers/stripe-elements/commit/26f6e2af6d083cfccb6face2372a1a74318b8696))
* reflect error message to attr ([bf3df77](https://github.com/bennypowers/stripe-elements/commit/bf3df779ec1cd47d3402221b3079be77f5f96ee7))
* **stripe-elements:** add `ready` readOnly notifying prop ([279d603](https://github.com/bennypowers/stripe-elements/commit/279d6032dc5958a70b958aace24cdd5c3f318fdc))
* **stripe-elements:** adds `complete`, `empty`, & `invalid` properties ([b7c3f12](https://github.com/bennypowers/stripe-elements/commit/b7c3f12d7f833a49bc42b7a11b7255d28a706d00))
## [2.1.1](https://github.com/bennypowers/stripe-elements/compare/v2.1.0...v2.1.1) (2020-01-21)
### Bug Fixes
* events bubble ([e68f25c](https://github.com/bennypowers/stripe-elements/commit/e68f25c495d67e7d01a88d2a595b16e2770ee4b7))
* when `action` property is set auto-POSTs payment info to URL ([35f0502](https://github.com/bennypowers/stripe-elements/commit/35f0502f2546f6c7e3dbe66ae6941a744a661a4e))
# [2.1.0](https://github.com/bennypowers/stripe-elements/compare/v2.0.2...v2.1.0) (2020-01-20)
### Features
* add createPaymentMethod method ([9639e10](https://github.com/bennypowers/stripe-elements/commit/9639e1095356f59a3d2680d2dae31e93b06452c3))
* add submit method and generate attribute ([b866405](https://github.com/bennypowers/stripe-elements/commit/b866405000a819d9135a27a0d65f5dcdcbcb1a50))
## [2.0.2](https://github.com/bennypowers/stripe-elements/compare/v2.0.1...v2.0.2) (2020-01-19)
### Bug Fixes
* fix DOM rebuilding for broken light slot template ([56b6a69](https://github.com/bennypowers/stripe-elements/commit/56b6a69c8d0966b93859b40b90a670db86e79130))
## [2.0.1](https://github.com/bennypowers/stripe-elements/compare/v2.0.0...v2.0.1) (2020-01-06)
### Bug Fixes
* instantiating with a key no longer breaks tree walking ([0ab1a56](https://github.com/bennypowers/stripe-elements/commit/0ab1a5610c5f0bbf77abe71403d4a1fba349a7d3))
## [2.0.0](https://github.com/bennypowers/stripe-elements/compare/v1.1.2...v2.0.0) (2019-12-22)

@@ -15,0 +107,0 @@

10

custom-elements.json

@@ -639,3 +639,4 @@ {

"description": "Whether or not the device can make the payment request.",
"type": "object"
"type": "object",
"default": "\"undefined\""
},

@@ -813,3 +814,4 @@ {

"description": "Whether or not the device can make the payment request.",
"type": "object"
"type": "object",
"default": "\"undefined\""
},

@@ -1032,2 +1034,6 @@ {

{
"name": "unsupported",
"description": "When the element detects that the user agent cannot make a payment"
},
{
"name": "fail",

@@ -1034,0 +1040,0 @@ "description": "When a payment request fails"

2

package.json
{
"name": "@power-elements/stripe-elements",
"version": "2.2.4",
"version": "2.3.0",
"description": "Web Component wrapper for stripe elements",

@@ -5,0 +5,0 @@ "main": "index.js",

77

README.md

@@ -282,40 +282,40 @@ # Stripe Elements Web Components

| Property | Attribute | Modifiers | Type | Default | Description |
|---------------------|-----------------------|-----------|----------------------------------------------|-----------|--------------------------------------------------|
| `action` | `action` | | `string` | | If set, when Stripe returns the payment info (PaymentMethod, Source, or Token),<br />the element will POST JSON data to this URL with an object containing<br />a key equal to the value of the `generate` property. |
| `amount` | `amount` | | `number` | | The amount in the currency's subunit (e.g. cents, yen, etc.) |
| `billingDetails` | | | `stripe.BillingDetails` | {} | billing_details object sent to create the payment representation. (optional) |
| `buttonTheme` | `button-theme` | | `'dark'\|'light'\|'light-outline'` | "dark" | |
| `buttonType` | `button-type` | | `'default'\|'book'\|'buy'\|'donate'` | "default" | |
| `canMakePayment` | `can-make-payment` | readonly | `object` | null | Whether or not the device can make the payment request. |
| `clientSecret` | `client-secret` | | `string` | | The `client_secret` part of a Stripe `PaymentIntent` |
| `country` | `country` | | `string` | | The two-letter country code of your Stripe account (e.g., `US`) |
| `currency` | `currency` | | `string` | | Three character currency code (e.g., `usd`) |
| `displayItems` | `displayItems` | | `stripe.paymentRequest.DisplayItem[]` | | An array of DisplayItem objects. These objects are shown as line items in the browser’s payment interface. Note that the sum of the line item amounts does not need to add up to the total amount above. |
| `element` | `element` | readonly | `stripe.elements.Element` | null | Stripe element instance |
| `elements` | `elements` | readonly | `stripe.elements.Elements` | null | Stripe Elements instance |
| `error` | `error` | readonly | `Error\|stripe.Error` | null | Stripe or validation error |
| `focused` | `focused` | readonly | `boolean` | false | If the element is focused. |
| `generate` | `generate` | | `'payment-method'\|'source'\|'token'` | "source" | Type of payment representation to generate. |
| `hasError` | `has-error` | readonly | `boolean` | false | Whether the element has an error<br />**DEPRECATED**. Will be removed in a future version. Use `error` instead |
| `label` | `label` | | `string` | | A name that the browser shows the customer in the payment interface. |
| `paymentIntent` | `payment-intent` | readonly | `stripe.paymentIntents.PaymentIntent` | null | Stripe PaymentIntent |
| `paymentMethod` | `payment-method` | readonly | `stripe.paymentMethod.PaymentMethod` | null | Stripe PaymentMethod |
| `paymentMethodData` | | | `stripe.PaymentMethodData` | {} | Data passed to stripe.createPaymentMethod. (optional) |
| `paymentRequest` | `payment-request` | | `stripe.paymentRequest.StripePaymentRequest` | null | Stripe PaymentRequest |
| `pending` | `pending` | | `boolean` | false | If you might change the payment amount later (for example, after you have calcluated shipping costs), set this to true. Note that browsers treat this as a hint for how to display things, and not necessarily as something that will prevent submission. |
| `publishableKey` | `publishable-key` | | `string` | | Stripe Publishable Key. EG. `pk_test_XXXXXXXXXXXXXXXXXXXXXXXX` |
| `ready` | `ready` | readonly | `boolean` | false | Whether the stripe element is ready to receive focus. |
| `requestPayerEmail` | `request-payer-email` | | `boolean` | | See the requestPayerName option. |
| `requestPayerName` | `request-payer-name` | | `boolean` | | By default, the browser‘s payment interface only asks the customer for actual payment information. A customer name can be collected by setting this option to true. This collected name will appears in the PaymentResponse object.<br /><br />We highly recommend you collect at least one of name, email, or phone as this also results in collection of billing address for Apple Pay. The billing address can be used to perform address verification and block fraudulent payments. For all other payment methods, the billing address is automatically collected when available. |
| `requestPayerPhone` | `request-payer-phone` | | `boolean` | | See the requestPayerName option. |
| `requestShipping` | `request-shipping` | | `boolean` | | Collect shipping address by setting this option to true. The address appears in the PaymentResponse.<br />You must also supply a valid [ShippingOptions] to the shippingOptions property. This can be up front at the time stripe.paymentRequest is called, or in response to a shippingaddresschange event using the updateWith callback. |
| `shippingOptions` | `shippingOptions` | | `stripe.paymentRequest.ShippingOption[]` | | An array of ShippingOption objects. The first shipping option listed appears in the browser payment interface as the default option. |
| `showError` | `show-error` | | `boolean` | false | Whether to display the error message |
| `source` | `source` | readonly | `stripe.Source` | null | Stripe Source |
| `sourceData` | | | `SourceData` | {} | Data passed to stripe.createSource. (optional) |
| `stripe` | `stripe` | readonly | `stripe.Stripe` | null | Stripe instance |
| `stripeReady` | `stripe-ready` | | `boolean` | false | Whether the stripe element is ready to receive focus.<br />**DEPRECATED**. Will be removed in a future version. use `ready` instead. |
| `token` | `token` | readonly | `stripe.Token` | null | Stripe Token |
| `tokenData` | | | `stripe.TokenOptions` | {} | Data passed to stripe.createToken. (optional) |
| Property | Attribute | Modifiers | Type | Default | Description |
|---------------------|-----------------------|-----------|----------------------------------------------|-------------|--------------------------------------------------|
| `action` | `action` | | `string` | | If set, when Stripe returns the payment info (PaymentMethod, Source, or Token),<br />the element will POST JSON data to this URL with an object containing<br />a key equal to the value of the `generate` property. |
| `amount` | `amount` | | `number` | | The amount in the currency's subunit (e.g. cents, yen, etc.) |
| `billingDetails` | | | `stripe.BillingDetails` | {} | billing_details object sent to create the payment representation. (optional) |
| `buttonTheme` | `button-theme` | | `'dark'\|'light'\|'light-outline'` | "dark" | |
| `buttonType` | `button-type` | | `'default'\|'book'\|'buy'\|'donate'` | "default" | |
| `canMakePayment` | `can-make-payment` | readonly | `object` | "undefined" | Whether or not the device can make the payment request. |
| `clientSecret` | `client-secret` | | `string` | | The `client_secret` part of a Stripe `PaymentIntent` |
| `country` | `country` | | `string` | | The two-letter country code of your Stripe account (e.g., `US`) |
| `currency` | `currency` | | `string` | | Three character currency code (e.g., `usd`) |
| `displayItems` | `displayItems` | | `stripe.paymentRequest.DisplayItem[]` | | An array of DisplayItem objects. These objects are shown as line items in the browser’s payment interface. Note that the sum of the line item amounts does not need to add up to the total amount above. |
| `element` | `element` | readonly | `stripe.elements.Element` | null | Stripe element instance |
| `elements` | `elements` | readonly | `stripe.elements.Elements` | null | Stripe Elements instance |
| `error` | `error` | readonly | `Error\|stripe.Error` | null | Stripe or validation error |
| `focused` | `focused` | readonly | `boolean` | false | If the element is focused. |
| `generate` | `generate` | | `'payment-method'\|'source'\|'token'` | "source" | Type of payment representation to generate. |
| `hasError` | `has-error` | readonly | `boolean` | false | Whether the element has an error<br />**DEPRECATED**. Will be removed in a future version. Use `error` instead |
| `label` | `label` | | `string` | | A name that the browser shows the customer in the payment interface. |
| `paymentIntent` | `payment-intent` | readonly | `stripe.paymentIntents.PaymentIntent` | null | Stripe PaymentIntent |
| `paymentMethod` | `payment-method` | readonly | `stripe.paymentMethod.PaymentMethod` | null | Stripe PaymentMethod |
| `paymentMethodData` | | | `stripe.PaymentMethodData` | {} | Data passed to stripe.createPaymentMethod. (optional) |
| `paymentRequest` | `payment-request` | | `stripe.paymentRequest.StripePaymentRequest` | null | Stripe PaymentRequest |
| `pending` | `pending` | | `boolean` | false | If you might change the payment amount later (for example, after you have calcluated shipping costs), set this to true. Note that browsers treat this as a hint for how to display things, and not necessarily as something that will prevent submission. |
| `publishableKey` | `publishable-key` | | `string` | | Stripe Publishable Key. EG. `pk_test_XXXXXXXXXXXXXXXXXXXXXXXX` |
| `ready` | `ready` | readonly | `boolean` | false | Whether the stripe element is ready to receive focus. |
| `requestPayerEmail` | `request-payer-email` | | `boolean` | | See the requestPayerName option. |
| `requestPayerName` | `request-payer-name` | | `boolean` | | By default, the browser‘s payment interface only asks the customer for actual payment information. A customer name can be collected by setting this option to true. This collected name will appears in the PaymentResponse object.<br /><br />We highly recommend you collect at least one of name, email, or phone as this also results in collection of billing address for Apple Pay. The billing address can be used to perform address verification and block fraudulent payments. For all other payment methods, the billing address is automatically collected when available. |
| `requestPayerPhone` | `request-payer-phone` | | `boolean` | | See the requestPayerName option. |
| `requestShipping` | `request-shipping` | | `boolean` | | Collect shipping address by setting this option to true. The address appears in the PaymentResponse.<br />You must also supply a valid [ShippingOptions] to the shippingOptions property. This can be up front at the time stripe.paymentRequest is called, or in response to a shippingaddresschange event using the updateWith callback. |
| `shippingOptions` | `shippingOptions` | | `stripe.paymentRequest.ShippingOption[]` | | An array of ShippingOption objects. The first shipping option listed appears in the browser payment interface as the default option. |
| `showError` | `show-error` | | `boolean` | false | Whether to display the error message |
| `source` | `source` | readonly | `stripe.Source` | null | Stripe Source |
| `sourceData` | | | `SourceData` | {} | Data passed to stripe.createSource. (optional) |
| `stripe` | `stripe` | readonly | `stripe.Stripe` | null | Stripe instance |
| `stripeReady` | `stripe-ready` | | `boolean` | false | Whether the stripe element is ready to receive focus.<br />**DEPRECATED**. Will be removed in a future version. use `ready` instead. |
| `token` | `token` | readonly | `stripe.Token` | null | Stripe Token |
| `tokenData` | | | `stripe.TokenOptions` | {} | Data passed to stripe.createToken. (optional) |

@@ -349,2 +349,3 @@ #### Methods

| `token` | The Token received from stripe.com |
| `unsupported` | When the element detects that the user agent cannot make a payment |

@@ -351,0 +352,0 @@ #### CSS Shadow Parts

1

shared.js

@@ -934,2 +934,3 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';

value: function initElementListeners() {
if (!this.element) return;
this.element.addEventListener('ready', this.onReady);

@@ -936,0 +937,0 @@ this.element.addEventListener('focus', this.onFocus);

22

src/stripe-elements.test.js

@@ -496,2 +496,5 @@ /* istanbul ignore file */

beforeEach(function() { initialStripeMountId = element.stripeMountId; });
beforeEach(listenFor('ready'));
// DEPRECATED
beforeEach(listenFor('stripe-ready'));
beforeEach(setProps({ publishableKey: 'foo' }));

@@ -502,2 +505,9 @@ beforeEach(nextFrame);

it('uses a new mount point id', function() { expect(element.stripeMountId).to.be.ok.and.not.equal(initialStripeMountId); });
// DEPRECATED
it('fires `stripe-ready` event', assertFired('stripe-ready'));
it('fires `ready` event', assertFired('ready'));
describe('after `ready` event', function() {
beforeEach(awaitEvent('ready'));
it('sets `stripeReady` property', assertProps({ stripeReady: true }));
});
});

@@ -569,14 +579,2 @@

describe('when stripe fires `ready` event', function cardReady() {
beforeEach(listenFor('ready'));
beforeEach(listenFor('stripe-ready-changed'));
beforeEach(synthCardEvent('ready'));
it('fires `ready` event', assertFired('ready'));
it('fires `stripe-ready-changed` event', assertEventDetail('stripe-ready-changed', { value: true }));
describe('after `ready` event', function() {
beforeEach(awaitEvent('ready'));
it('sets `stripeReady` property', assertProps({ stripeReady: true }));
});
});
describe('when stripe fires `change` event', function cardChange() {

@@ -583,0 +581,0 @@ beforeEach(listenFor('change'));

384

src/stripe-payment-request.test.js

@@ -74,3 +74,3 @@ /* istanbul ignore file */

amount: undefined,
canMakePayment: null,
canMakePayment: undefined,
country: undefined,

@@ -302,2 +302,16 @@ currency: undefined,

describe('when the user agent is unable to make a payment', function() {
describe('with mocked Stripe.js', function withMockedStripeJs() {
beforeEach(mockStripe);
beforeEach(setupNoProps);
afterEach(restoreStripe);
describe('when setting publishable key', function() {
beforeEach(listenFor('unsupported'));
beforeEach(setProps({ publishableKey: PUBLISHABLE_KEY }));
it('fires the `unsupported` event', assertFired('unsupported'));
});
});
});
describe('when the user agent is able to make a payment', function() {

@@ -393,160 +407,201 @@ beforeEach(mockCanMakePayment);

describe('and no publishable key', function() {
beforeEach(setupNoProps);
describe('when stripe mount point is removed from DOM', function() {
beforeEach(removeStripeMount);
describe('then publishable key is set', function() {
beforeEach(setProps({ publishableKey: PUBLISHABLE_KEY }));
beforeEach(nextFrame);
it('rebuilds its DOM', function() {
const { stripeMountId } = element;
expect(element).lightDom.to.equal(expectedLightDOM({ stripeMountId }));
expect(element.stripeMount, 'mount').to.be.ok;
});
describe('without CSS custom properties applied', function() {
describe('and no publishable key', function() {
beforeEach(setupNoProps);
describe('when stripe mount point is removed from DOM', function() {
beforeEach(removeStripeMount);
describe('then publishable key is set', function() {
beforeEach(setProps({ publishableKey: PUBLISHABLE_KEY }));
beforeEach(nextFrame);
it('rebuilds its DOM', function() {
const { stripeMountId } = element;
expect(element).lightDom.to.equal(expectedLightDOM({ stripeMountId }));
expect(element.stripeMount, 'mount').to.be.ok;
});
it('uses a new id', function() {
expect(element.stripeMount.id).to.not.equal(initialStripeMountId);
});
it('uses a new id', function() {
expect(element.stripeMount.id).to.not.equal(initialStripeMountId);
});
});
});
describe('when setting publishable key', function() {
beforeEach(setProps({ publishableKey: PUBLISHABLE_KEY }));
beforeEach(listenFor('ready'));
it('fires the `ready` event', assertFired('ready'));
});
});
describe('and a valid publishable key', function() {
beforeEach(setupWithPublishableKey(PUBLISHABLE_KEY));
describe('and a valid publishable key', function() {
beforeEach(setupWithPublishableKey(PUBLISHABLE_KEY));
describe('with country and currency set', function() {
beforeEach(setProps({ country: 'CA', currency: 'cad' }));
describe('with country and currency set', function() {
beforeEach(setProps({ country: 'CA', currency: 'cad' }));
it('uses default element height value', function() {
expect(element.element.style.paymentRequestButton.height).to.equal('40px');
});
it('uses default element height value', function() {
expect(element.element.style.paymentRequestButton.height).to.equal('40px');
});
describe('with `generate` set to "source"', function() {
beforeEach(setProps({ generate: 'source' }));
it('initializes stripe instance', assertPropsOk(['stripe']));
describe('with `generate` set to "source"', function() {
beforeEach(setProps({ generate: 'source' }));
it('initializes stripe instance', assertPropsOk(['stripe']));
it('initializes elements instance', assertPropsOk(['elements']));
});
it('initializes elements instance', assertPropsOk(['elements']));
});
describe('when publishable key is changed', function publishableKeyReset() {
let initialStripeMountId;
beforeEach(function() { initialStripeMountId = element.stripeMountId; });
beforeEach(setProps({ publishableKey: 'foo' }));
beforeEach(nextFrame);
afterEach(function() { initialStripeMountId = undefined; });
it('reinitializes stripe', function() { expect(element.stripe).to.be.ok.and.not.equal(initialStripe); });
it('uses a new mount point id', function() { expect(element.stripeMountId).to.be.ok.and.not.equal(initialStripeMountId); });
});
describe('when publishable key is changed', function publishableKeyReset() {
let initialStripeMountId;
beforeEach(function() { initialStripeMountId = element.stripeMountId; });
beforeEach(setProps({ publishableKey: 'foo' }));
beforeEach(nextFrame);
afterEach(function() { initialStripeMountId = undefined; });
it('reinitializes stripe', function() { expect(element.stripe).to.be.ok.and.not.equal(initialStripe); });
it('uses a new mount point id', function() { expect(element.stripeMountId).to.be.ok.and.not.equal(initialStripeMountId); });
});
describe('when publishable key is unset', function pkReset() {
beforeEach(setProps({ publishableKey: undefined }));
beforeEach(nextFrame);
it('unsets the `stripe` property', assertProps({ stripe: null }));
it('unsets the `element` property', assertProps({ element: null }));
it('unsets the `elements` property', assertProps({ elements: null }));
});
describe('when publishable key is unset', function pkReset() {
beforeEach(setProps({ publishableKey: undefined }));
beforeEach(nextFrame);
it('unsets the `stripe` property', assertProps({ stripe: null }));
it('unsets the `element` property', assertProps({ element: null }));
it('unsets the `elements` property', assertProps({ elements: null }));
});
it('sets the `canMakePayment` property', assertProps({ canMakePayment: { applePay: true } }, { deep: true }));
it('sets the `canMakePayment` property', assertProps({ canMakePayment: { applePay: true } }, { deep: true }));
it('sets the `paymentRequest` property', assertPropsOk(['paymentRequest']));
it('sets the `paymentRequest` property', assertPropsOk(['paymentRequest']));
describe('when the paymentRequest fires the `cancel` event', function() {
beforeEach(listenFor('cancel'));
beforeEach(synthPaymentRequestEvent('cancel'));
it('fires a `cancel` event', assertFired('cancel'));
});
describe('when the paymentRequest fires the `cancel` event', function() {
beforeEach(listenFor('cancel'));
beforeEach(synthPaymentRequestEvent('cancel'));
it('fires a `cancel` event', assertFired('cancel'));
});
describe('when the paymentRequest fires the `shippingaddresschange` event', function() {
beforeEach(listenFor('shippingaddresschange'));
beforeEach(synthPaymentRequestEvent('shippingaddresschange'));
it('fires a `shippingaddresschange` event', assertFired('shippingaddresschange'));
});
describe('when the paymentRequest fires the `shippingaddresschange` event', function() {
beforeEach(listenFor('shippingaddresschange'));
beforeEach(synthPaymentRequestEvent('shippingaddresschange'));
it('fires a `shippingaddresschange` event', assertFired('shippingaddresschange'));
});
describe('when the paymentRequest fires the `shippingoptionchange` event', function() {
beforeEach(listenFor('shippingoptionchange'));
beforeEach(synthPaymentRequestEvent('shippingoptionchange'));
it('fires a `shippingoptionchange` event', assertFired('shippingoptionchange'));
});
describe('when the paymentRequest fires the `shippingoptionchange` event', function() {
beforeEach(listenFor('shippingoptionchange'));
beforeEach(synthPaymentRequestEvent('shippingoptionchange'));
it('fires a `shippingoptionchange` event', assertFired('shippingoptionchange'));
});
describe('when the paymentRequest fires the `source` event', function() {
const complete = stub();
const source = SUCCESSFUL_SOURCE;
beforeEach(listenFor('success'));
beforeEach(synthPaymentRequestEvent('source', { source, complete }));
beforeEach(nextFrame);
afterEach(complete.resetBehavior.bind(complete));
it('fires a `success` event', assertFired('success'));
it('sets the `source` property', assertProps({ source }));
it('unsets the `error` property', assertProps({ error: null }));
it('unsets the `token` property', assertProps({ token: null }));
it('unsets the `paymentMethod` property', assertProps({ paymentMethod: null }));
it('calls the complete function', assertCalled(complete));
});
describe('when the paymentRequest fires the `source` event', function() {
const complete = stub();
const source = SUCCESSFUL_SOURCE;
beforeEach(listenFor('success'));
beforeEach(synthPaymentRequestEvent('source', { source, complete }));
beforeEach(nextFrame);
afterEach(complete.resetBehavior.bind(complete));
it('fires a `success` event', assertFired('success'));
it('sets the `source` property', assertProps({ source }));
it('unsets the `error` property', assertProps({ error: null }));
it('unsets the `token` property', assertProps({ token: null }));
it('unsets the `paymentMethod` property', assertProps({ paymentMethod: null }));
it('calls the complete function', assertCalled(complete));
});
describe('when the paymentRequest fires a `source` event with an error', function() {
const complete = stub();
const error = CARD_DECLINED_ERROR;
beforeEach(listenFor('fail'));
beforeEach(synthPaymentRequestEvent('source', { error, complete }));
beforeEach(nextFrame);
afterEach(complete.resetBehavior.bind(complete));
it('fires a `fail` event', assertFired('fail'));
it('sets the `error` property', assertProps({ error }));
it('unsets the `token` property', assertProps({ token: null }));
it('unsets the `source` property', assertProps({ source: null }));
it('unsets the `paymentMethod` property', assertProps({ paymentMethod: null }));
it('calls the complete function', assertCalled(complete));
});
describe('when the paymentRequest fires a `source` event with an error', function() {
const complete = stub();
const error = CARD_DECLINED_ERROR;
beforeEach(listenFor('fail'));
beforeEach(synthPaymentRequestEvent('source', { error, complete }));
beforeEach(nextFrame);
afterEach(complete.resetBehavior.bind(complete));
it('fires a `fail` event', assertFired('fail'));
it('sets the `error` property', assertProps({ error }));
it('unsets the `token` property', assertProps({ token: null }));
it('unsets the `source` property', assertProps({ source: null }));
it('unsets the `paymentMethod` property', assertProps({ paymentMethod: null }));
it('calls the complete function', assertCalled(complete));
});
});
describe('with `generate` set to "token"', function() {
beforeEach(setProps({ generate: 'token' }));
describe('when the paymentRequest fires the `token` event', function() {
const complete = stub();
const token = SUCCESSFUL_TOKEN;
beforeEach(listenFor('success'));
beforeEach(synthPaymentRequestEvent('token', { token, complete }));
beforeEach(nextFrame);
afterEach(complete.resetBehavior.bind(complete));
it('fires a `success` event', assertFired('success'));
it('sets the `token` property', assertProps({ token }));
it('unsets the `error` property', assertProps({ error: null }));
it('unsets the `source` property', assertProps({ source: null }));
it('unsets the `paymentMethod` property', assertProps({ paymentMethod: null }));
it('calls the complete function', assertCalled(complete));
});
describe('with `generate` set to "token"', function() {
beforeEach(setProps({ generate: 'token' }));
describe('when the paymentRequest fires the `token` event', function() {
const complete = stub();
const token = SUCCESSFUL_TOKEN;
beforeEach(listenFor('success'));
beforeEach(synthPaymentRequestEvent('token', { token, complete }));
beforeEach(nextFrame);
afterEach(complete.resetBehavior.bind(complete));
it('fires a `success` event', assertFired('success'));
it('sets the `token` property', assertProps({ token }));
it('unsets the `error` property', assertProps({ error: null }));
it('unsets the `source` property', assertProps({ source: null }));
it('unsets the `paymentMethod` property', assertProps({ paymentMethod: null }));
it('calls the complete function', assertCalled(complete));
});
describe('when the paymentRequest fires a `token` event with an error', function() {
const complete = stub();
const error = CARD_DECLINED_ERROR;
beforeEach(listenFor('fail'));
beforeEach(synthPaymentRequestEvent('token', { error, complete }));
afterEach(complete.resetBehavior.bind(complete));
it('fires a `fail` event', assertFired('fail'));
it('sets the `error` property', assertProps({ error }));
it('unsets the `token` property', assertProps({ token: null }));
it('unsets the `source` property', assertProps({ source: null }));
it('unsets the `paymentMethod` property', assertProps({ paymentMethod: null }));
it('calls the complete function', assertCalled(complete));
});
describe('when the paymentRequest fires a `token` event with an error', function() {
const complete = stub();
const error = CARD_DECLINED_ERROR;
beforeEach(listenFor('fail'));
beforeEach(synthPaymentRequestEvent('token', { error, complete }));
afterEach(complete.resetBehavior.bind(complete));
it('fires a `fail` event', assertFired('fail'));
it('sets the `error` property', assertProps({ error }));
it('unsets the `token` property', assertProps({ token: null }));
it('unsets the `source` property', assertProps({ source: null }));
it('unsets the `paymentMethod` property', assertProps({ paymentMethod: null }));
it('calls the complete function', assertCalled(complete));
});
});
describe('with `generate` set to "payment-method"', function() {
beforeEach(setProps({ generate: 'payment-method' }));
describe('with `generate` set to "payment-method"', function() {
beforeEach(setProps({ generate: 'payment-method' }));
describe('when the paymentRequest fires the `paymentmethod` event', function() {
const complete = stub();
const paymentMethod = SUCCESSFUL_PAYMENT_METHOD;
beforeEach(listenFor('success'));
beforeEach(nextFrame);
beforeEach(synthPaymentRequestEvent('paymentmethod', { paymentMethod, complete }));
afterEach(complete.resetBehavior.bind(complete));
it('fires a `success` event', assertFired('success'));
it('sets the `paymentMethod` property', assertProps({ paymentMethod }));
it('unsets the `error` property', assertProps({ error: null }));
it('unsets the `source` property', assertProps({ source: null }));
it('unsets the `token` property', assertProps({ token: null }));
it('calls the complete function', assertCalled(complete));
});
describe('when the paymentRequest fires a `paymentmethod` event with an error', function() {
const complete = stub();
const error = CARD_DECLINED_ERROR;
beforeEach(listenFor('fail'));
beforeEach(synthPaymentRequestEvent('paymentmethod', { error, complete }));
beforeEach(nextFrame);
afterEach(complete.resetBehavior.bind(complete));
it('fires a `fail` event', assertFired('fail'));
it('sets the `error` property', assertProps({ error }));
it('unsets the `paymentMethod` property', assertProps({ paymentMethod: null }));
it('unsets the `source` property', assertProps({ source: null }));
it('unsets the `token` property', assertProps({ token: null }));
it('calls the complete function', assertCalled(complete));
});
describe('with `clientSecret` set', function() {
beforeEach(setProps({ clientSecret: CLIENT_SECRET }));
describe('when the paymentRequest fires the `paymentmethod` event', function() {
const complete = stub();
const paymentMethod = SUCCESSFUL_PAYMENT_METHOD;
const paymentIntent = SUCCESSFUL_PAYMENT_INTENT;
beforeEach(listenFor('success'));
beforeEach(synthPaymentRequestEvent('paymentmethod', { paymentMethod, complete }));
beforeEach(nextFrame);
beforeEach(synthPaymentRequestEvent('paymentmethod', { paymentMethod, complete }));
afterEach(complete.resetBehavior.bind(complete));
it('fires a `success` event', assertFired('success'));
it('sets the `paymentMethod` property', assertProps({ paymentMethod }));
it('sets the `paymentIntent` property', assertProps({ paymentIntent }));
it('unsets the `error` property', assertProps({ error: null }));
it('unsets the `source` property', assertProps({ source: null }));
it('unsets the `token` property', assertProps({ token: null }));
it('fires a `success` event', assertFired('success'));
it('calls the complete function', assertCalled(complete));
describe('then calling reset()', function() {
beforeEach(reset);
it('unsets all the properties', assertProps({ paymentMethod: null, paymentIntent: null, error: null, source: null, token: null }));
});
});

@@ -568,65 +623,26 @@

});
});
describe('with `clientSecret` set', function() {
beforeEach(setProps({ clientSecret: CLIENT_SECRET }));
describe('when the paymentRequest fires the `paymentmethod` event', function() {
const complete = stub();
const paymentMethod = SUCCESSFUL_PAYMENT_METHOD;
const paymentIntent = SUCCESSFUL_PAYMENT_INTENT;
beforeEach(listenFor('success'));
beforeEach(synthPaymentRequestEvent('paymentmethod', { paymentMethod, complete }));
beforeEach(nextFrame);
afterEach(complete.resetBehavior.bind(complete));
it('sets the `paymentMethod` property', assertProps({ paymentMethod }));
it('sets the `paymentIntent` property', assertProps({ paymentIntent }));
it('unsets the `error` property', assertProps({ error: null }));
it('unsets the `source` property', assertProps({ source: null }));
it('unsets the `token` property', assertProps({ token: null }));
it('fires a `success` event', assertFired('success'));
it('calls the complete function', assertCalled(complete));
describe('then calling reset()', function() {
beforeEach(reset);
it('unsets all the properties', assertProps({ paymentMethod: null, paymentIntent: null, error: null, source: null, token: null }));
});
describe('when the card will be declined', function() {
const error = CARD_DECLINED_ERROR;
beforeEach(setProps({ clientSecret: CARD_CONFIRM_ERROR_SECRET }));
describe('when the paymentRequest fires the `paymentmethod` event', function() {
const complete = stub();
const paymentMethod = SUCCESSFUL_PAYMENT_METHOD;
beforeEach(listenFor('fail'));
beforeEach(synthPaymentRequestEvent('paymentmethod', { paymentMethod, complete }));
beforeEach(nextFrame);
afterEach(complete.resetBehavior.bind(complete));
it('sets the `error` property', assertProps({ error }));
it('unsets the `paymentMethod` property', assertProps({ paymentMethod: null }));
it('unsets the `paymentIntent` property', assertProps({ paymentIntent: null }));
it('unsets the `source` property', assertProps({ source: null }));
it('unsets the `token` property', assertProps({ token: null }));
it('fires a `fail` event', assertFired('fail'));
it('calls the complete function', assertCalled(complete));
describe('then calling reset()', function() {
beforeEach(reset);
it('unsets all the properties', assertProps({ paymentMethod: null, paymentIntent: null, error: null, source: null, token: null }));
});
describe('when the paymentRequest fires a `paymentmethod` event with an error', function() {
const complete = stub();
const error = CARD_DECLINED_ERROR;
beforeEach(listenFor('fail'));
beforeEach(synthPaymentRequestEvent('paymentmethod', { error, complete }));
beforeEach(nextFrame);
afterEach(complete.resetBehavior.bind(complete));
it('fires a `fail` event', assertFired('fail'));
it('sets the `error` property', assertProps({ error }));
it('unsets the `paymentMethod` property', assertProps({ paymentMethod: null }));
it('unsets the `source` property', assertProps({ source: null }));
it('unsets the `token` property', assertProps({ token: null }));
it('calls the complete function', assertCalled(complete));
});
});
describe('when the card will be declined', function() {
const error = CARD_DECLINED_ERROR;
beforeEach(setProps({ clientSecret: CARD_CONFIRM_ERROR_SECRET }));
describe('when the paymentRequest fires the `paymentmethod` event', function() {
const complete = stub();
const paymentMethod = SUCCESSFUL_PAYMENT_METHOD;
beforeEach(listenFor('fail'));
beforeEach(synthPaymentRequestEvent('paymentmethod', { paymentMethod, complete }));
beforeEach(nextFrame);
afterEach(complete.resetBehavior.bind(complete));
it('sets the `error` property', assertProps({ error }));
it('unsets the `paymentMethod` property', assertProps({ paymentMethod: null }));
it('unsets the `paymentIntent` property', assertProps({ paymentIntent: null }));
it('unsets the `source` property', assertProps({ source: null }));
it('unsets the `token` property', assertProps({ token: null }));
it('fires a `fail` event', assertFired('fail'));
it('calls the complete function', assertCalled(complete));
describe('then calling reset()', function() {
beforeEach(reset);
it('unsets all the properties', assertProps({ paymentMethod: null, paymentIntent: null, error: null, source: null, token: null }));
});
});
});
});

@@ -633,0 +649,0 @@ });

1

src/StripeBase.js

@@ -409,2 +409,3 @@ import { LitElement, property, html } from 'lit-element';

initElementListeners() {
if (!this.element) return;
this.element.addEventListener('ready', this.onReady);

@@ -411,0 +412,0 @@ this.element.addEventListener('focus', this.onFocus);

5

src/StripePaymentRequest.js

@@ -66,2 +66,3 @@ import { property } from 'lit-element';

*
* @fires 'unsupported' - When the element detects that the user agent cannot make a payment
* @fires 'fail' - When a payment request fails

@@ -96,3 +97,4 @@ * @fires 'cancel' - When a payment request is cancelled

readOnly: true,
}) canMakePayment = null;
notify: true,
}) canMakePayment = undefined;

@@ -277,2 +279,3 @@ /**

await this.set({ paymentRequest, canMakePayment });
if (!this.canMakePayment) this.fire('unsupported');
}

@@ -279,0 +282,0 @@

7

stripe-payment-request.js

@@ -102,2 +102,3 @@ import '@babel/runtime/helpers/esm/defineProperty';

*
* @fires 'unsupported' - When the element detects that the user agent cannot make a payment
* @fires 'fail' - When a payment request fails

@@ -153,3 +154,4 @@ * @fires 'cancel' - When a payment request is cancelled

reflect: true,
readOnly: true
readOnly: true,
notify: true
})],

@@ -159,3 +161,3 @@ key: "canMakePayment",

value() {
return null;
return undefined;
}

@@ -495,2 +497,3 @@

});
if (!this.canMakePayment) this.fire('unsupported');
}

@@ -497,0 +500,0 @@ /**

1

StripePaymentRequest.d.ts

@@ -51,2 +51,3 @@ /**

*
* @fires 'unsupported' - When the element detects that the user agent cannot make a payment
* @fires 'fail' - When a payment request fails

@@ -53,0 +54,0 @@ * @fires 'cancel' - When a payment request is cancelled

shared.js.map

Sorry, the diff of this file is not supported yet

stripe-payment-request.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc