Migration

Below are the major changes for update from legacy to active ngx-stripe

Interfaces

Most of the changes in the library are because ngx-stripe will no longer maintain its own types. Instead, it will make use of the official Stripe types.

Changes in the interfaces should always be for the best, no mistach between Stripe and ngx-stripe. Always up to the date the last changes.

The main change will be in terms of naming. The following table aim to be a guide reference:

Legacy	Active
Options	StripeConstructorOptions
StripeJS	Stripe
ElementsOptions	StripeElementsOptions
Element	StripeElement
Elements	StripeElements
PaymentRequestOptions	PaymentRequestOptions
PaymentIntentResult	{ paymentIntent?: PaymentIntent; error?: StripeError; }
CardSetupResult	{ setupIntent?: SetupIntent; error?: StripeError; }
SourceData	CreateSourceData
SourceParams	RetrieveSourceParam
SourceResult	{ source?: Source; error?: StripeError }
TokenResult	{ token?: Token; error?: StripeError }
PiiData	CreateTokenPiiData
BankAccountData	CreateTokenBankAccountData
CardDataOptions	CreateTokenCardData
Account	TokenCreateParams.Account

NOTE: In legacy types were imported from ngx-stripe, while in active they are imported from @stripe/stripe-js

NOTE 2: Please if you notices any missing type, open an issue or a PR and we will try to address it as soon as possible

Stripe Service

Now the good news. The Stripe Service has been updated to include all the new APIs from StripeJS. No problems shoudl arise here, since basically what we have done is add missing methods. Nothing has been removed. Issue will be likely type related.

For more information about the API please check the docs

This is a list comparing the available methods in both legacy and active:

Legacy	Active	Notes
getStripeReference	getStripeReference	No Changes
getInstance	getInstance	Type changes only
setKey	setKey	Types changes only
changeKey	changeKey	Types changes only
elements	elements	Types changes only
Not Supported	redirectToCheckout	New
Not Supported	confirmAuBecsDebitPayment	New
Not Supported	confirmBancontactPayment	New
Not Supported	confirmCardPayment	New
Not Supported	confirmEpsPayment	New
Not Supported	confirmFpxPayment	New
Not Supported	confirmGiropayPayment	New
Not Supported	confirmIdealPayment	New
Not Supported	confirmP24Payment	New
Not Supported	confirmSepaDebitPayment	New
handleCardAction	handleCardAction	Types changes only
createPaymentMethod	createPaymentMethod	Types changes only
Not Supported	retrievePaymentIntent	New
Not Supported	confirmAuBecsDebitSetup	New
Not Supported	confirmCardSetup	New
Not Supported	confirmSepaDebitSetup	New
Not Supported	retrieveSetupIntent	New
paymentRequest	paymentRequest	Types changes only
createToken	createToken	Better type inferance
createSource	createSource	Better type inferance
retrieveSource	retrieveSource	Types changes only
handleCardPayment	handleCardPayment	deprecated
confirmPaymentIntent	confirmPaymentIntent	deprecated
handleCardSetup	handleCardSetup	deprecated
Not Supported	confirmSetupIntent	deprecated
Not Supported	handleFpxPayment	deprecated

NOTE: Deprecated functions will be part of the Service of the service as long as they remain part of stripe. No plans to remove them by our own choice.

Stripe Element Components

Until this version we only have support for CardElement. Now we are adding all the missing element avaiable. For more information about the API please check the docs

Element	Selector	Notes
CardElement	ngx-stripe-card	A flexible single-line input that collects all necessary card details.
CardNumberElement	ngx-stripe-card-number	Collects the card number.only
CardExpiryElement	ngx-stripe-card-expiry	Collects the card‘s expiration date. only
CardCvcElement	ngx-stripe-card-cvc	Collects the card‘s CVC number.only
PaymentRequestButtonElement	ngx-stripe-payment-request-button	An all-in-one checkout button backed by either Apple Pay or the Payment Request API. Refer to the Payment Request Button docs for more information. only
AuBankAccountElement	ngx-stripe-au-bank-account	Collects Australian bank account information (BSB and account number) for use with BECS Direct Debit payments.
IbanElement	ngx-stripe-iban	The International Bank Account Number (IBAN). Available for SEPA countries.
IdealBankElement	ngx-stripe-ideal-bank	The customer's bank, for use with iDEAL payments.
FpxBankElement	ngx-stripe-fpx-bank	The customer's bank, for use with FPX payments.