Skip to content

Commit

Permalink
Add auBankAccount and BECS debit support (#8)
Browse files Browse the repository at this point in the history
* Add auBankAccount element support

* fixes

Co-authored-by: wshallum-stripe <51170180+wshallum-stripe@users.noreply.github.com>
  • Loading branch information
dweedon-stripe and wshallum-stripe authored Feb 13, 2020
1 parent 3c60c1c commit 4512967
Show file tree
Hide file tree
Showing 7 changed files with 305 additions and 16 deletions.
76 changes: 63 additions & 13 deletions tests/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ import {
StripeIdealBankElement,
StripeFpxBankElement,
StripeFpxBankElementChangeEvent,
StripeAuBankAccountElement,
StripeAuBankAccountElementChangeEvent,
StripePaymentRequestButtonElement,
StripeElementType,
} from '@stripe/stripe-js';
Expand Down Expand Up @@ -74,6 +76,12 @@ const MY_STYLE: StripeElementStyle = {
},
};

const auBankAccountElement = elements.create('auBankAccount', {});

const retrievedAuBankAccountElement: StripeAuBankAccountElement | null = elements.getElement(
'auBankAccount'
);

const cardElement: StripeCardElement = elements.create('card', {
classes: {base: '', focus: ''},
style: MY_STYLE,
Expand Down Expand Up @@ -175,9 +183,10 @@ assert<
>
>(false);

const auBankElementType: StripeElementType = 'auBankAccount';
const cardElementType: StripeElementType = 'card';
const ibanElementType: StripeElementType = 'iban';
const fpxElementType: StripeElementType = 'fpxBank';
const ibanElementType: StripeElementType = 'iban';

cardElement.mount('#bogus-container');
ibanElement.mount('#bogus-container');
Expand All @@ -192,11 +201,12 @@ cardElement
}
});

fpxBankElement.on('change', (e: StripeFpxBankElementChangeEvent) => {
if (e.error) {
console.error(e.error.message);
}
});
auBankAccountElement.on(
'change',
(e: StripeAuBankAccountElementChangeEvent) => {}
);

fpxBankElement.on('change', (e: StripeFpxBankElementChangeEvent) => {});

paymentRequestButtonElement.on(
'click',
Expand All @@ -205,6 +215,7 @@ paymentRequestButtonElement.on(
}
);

auBankAccountElement.destroy();
cardElement.destroy();
cardNumberElement.destroy();
cardCvcElement.destroy();
Expand Down Expand Up @@ -297,6 +308,24 @@ stripe.retrieveSource({id: '', client_secret: ''}).then((result) => {
console.log(result.source!.type);
});

stripe.confirmAuBecsDebitPayment('', {
payment_method: {
au_becs_debit: auBankAccountElement,
billing_details: {name: '', email: ''},
},
});

stripe.confirmAuBecsDebitPayment('', {
payment_method: {
au_becs_debit: {bsb_number: '', account_number: ''},
billing_details: {name: '', email: ''},
},
});

stripe.confirmAuBecsDebitPayment('', {payment_method: ''});

stripe.confirmAuBecsDebitPayment('');

stripe
.confirmCardPayment('', {
payment_method: {card: cardElement, billing_details: {name: ''}},
Expand Down Expand Up @@ -361,6 +390,18 @@ stripe
.handleCardAction('')
.then(({paymentIntent}: {paymentIntent?: PaymentIntent}) => {});

stripe.createPaymentMethod({
type: 'au_becs_debit',
au_becs_debit: auBankAccountElement,
billing_details: {name: 'Jenny Rosen', email: 'jenny@example.com'},
});

stripe.createPaymentMethod({
type: 'au_becs_debit',
au_becs_debit: {bsb_number: '', account_number: ''},
billing_details: {name: 'Jenny Rosen', email: 'jenny@example.com'},
});

stripe
.createPaymentMethod({
type: 'card',
Expand Down Expand Up @@ -412,6 +453,22 @@ stripe.createPaymentMethod({

stripe.retrievePaymentIntent('{PAYMENT_INTENT_CLIENT_SECRET}');

stripe.confirmAuBecsDebitSetup('', {
payment_method: {
au_becs_debit: auBankAccountElement,
billing_details: {name: '', email: ''},
},
});

stripe.confirmAuBecsDebitSetup('', {payment_method: ''});

stripe.confirmAuBecsDebitSetup('', {
payment_method: {
au_becs_debit: {bsb_number: '', account_number: ''},
billing_details: {name: '', email: ''},
},
});

stripe.confirmCardSetup('', {
payment_method: {card: cardElement, billing_details: {name: ''}},
});
Expand All @@ -433,13 +490,6 @@ stripe.confirmSepaDebitSetup('', {
},
});

stripe.confirmSepaDebitSetup('', {
payment_method: {
sepa_debit: ibanElement,
billing_details: {name: '', email: ''},
},
});

stripe.confirmSepaDebitSetup('', {payment_method: ''});

stripe.confirmSepaDebitSetup('', {
Expand Down
19 changes: 18 additions & 1 deletion types/api/PaymentMethods.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,23 @@ declare module '@stripe/stripe-js' {
}

namespace PaymentMethod {
interface AuBecsDebit {
/**
* Bank State Branch
*/
bsb_number: string | null;

/**
* Uniquely identifies this particular bank account. You can use this attribute to check whether two bank accounts are the same.
*/
fingerprint: string | null;

/**
* Last four characters of the account number.
*/
last4: string | null;
}

interface BillingDetails {
/**
* Billing address.
Expand Down Expand Up @@ -101,7 +118,7 @@ declare module '@stripe/stripe-js' {
exp_year: number;

/**
* Uniquely identifies this particular card number. You can use this attribute to check whether two customers who've signed up with you are using the same card number, for example.
* Uniquely identifies this particular card number. You can use this attribute to check whether two customers who've signed up with you are using the same card number.
*/
fingerprint?: string | null;

Expand Down
30 changes: 29 additions & 1 deletion types/stripe-js/elements.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,35 @@
///<reference path='./elements/ideal-bank.d.ts' />
///<reference path='./elements/fpx-bank.d.ts' />
///<reference path='./elements/payment-request-button.d.ts' />
///<reference path='./elements/au-bank-account.d.ts' />

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

declare module '@stripe/stripe-js' {
interface StripeElements {
/////////////////////////////
/// auBankAccount
/////////////////////////////

/**
* Requires beta access:
* Contact [Stripe support](https://support.stripe.com/) for more information.
*
* Creates an `AuBankAccountElement`.
*/
create(
elementType: 'auBankAccount',
options?: StripeAuBankAccountElementOptions
): StripeAuBankAccountElement;

/**
* Requires beta access:
* Contact [Stripe support](https://support.stripe.com/) for more information.
*
* Looks up a previously created `Element` by its type.
*/
getElement(elementType: 'auBankAccount'): StripeAuBankAccountElement | null;

/////////////////////////////
/// card
/////////////////////////////
Expand Down Expand Up @@ -151,6 +177,7 @@ declare module '@stripe/stripe-js' {
}

type StripeElementType =
| 'auBankAccount'
| 'card'
| 'cardNumber'
| 'cardExpiry'
Expand All @@ -161,13 +188,14 @@ declare module '@stripe/stripe-js' {
| 'paymentRequestButton';

type StripeElement =
| StripeAuBankAccountElement
| StripeCardElement
| StripeCardNumberElement
| StripeCardExpiryElement
| StripeCardCvcElement
| StripeFpxBankElement
| StripeIbanElement
| StripeIdealBankElement
| StripeFpxBankElement
| StripePaymentRequestButtonElement;

/**
Expand Down
78 changes: 78 additions & 0 deletions types/stripe-js/elements/au-bank-account.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
///<reference path='./base.d.ts' />

declare module '@stripe/stripe-js' {
type StripeAuBankAccountElement = StripeElementBase & {
/**
* The change event is triggered when the `Element`'s value changes.
*/
on(
eventType: 'change',
handler: (event: StripeAuBankAccountElementChangeEvent) => any
): StripeAuBankAccountElement;

/**
* Triggered when the element is fully rendered and can accept `element.focus` calls.
*/
on(eventType: 'ready', handler: () => any): StripeAuBankAccountElement;

/**
* Triggered when the element gains focus.
*/
on(eventType: 'focus', handler: () => any): StripeAuBankAccountElement;

/**
* Triggered when the element loses focus.
*/
on(eventType: 'blur', handler: () => any): StripeAuBankAccountElement;

/**
* Updates the options the `AuBankAccountElement` was initialized with.
* Updates are merged into the existing configuration.
*
* The styles of an `AuBankAccountElement` can be dynamically changed using `element.update`.
* This method can be used to simulate CSS media queries that automatically adjust the size of elements when viewed on different devices.
*/
update(options: Partial<StripeAuBankAccountElementOptions>): void;
};

interface StripeAuBankAccountElementOptions {
classes?: StripeElementClasses;

style?: StripeElementStyle;

/**
* Appearance of the icon in the Element.
*/
iconStyle?: 'default' | 'solid';

/**
* Hides the icon in the Element.
* Default is `false`.
*/
hideIcon?: boolean;

/**
* Applies a disabled state to the Element such that user input is not accepted.
* Default is false.
*/
disabled?: boolean;
}

interface StripeAuBankAccountElementChangeEvent
extends StripeElementChangeEvent {
/**
* The type of element that emitted this event.
*/
elementType: 'auBankAccount';

/**
* The bank name corresponding to the entered BSB.
*/
bankName?: string;

/**
* The branch name corresponding to the entered BSB.
*/
branchName?: string;
}
}
45 changes: 44 additions & 1 deletion types/stripe-js/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,26 @@ declare module '@stripe/stripe-js' {
/// https://stripe.com/docs/js/payment_intents
/////////////////////////////

/**
* Requires beta access:
* Contact [Stripe support](https://support.stripe.com/) for more information.
*
* Use `stripe.confirmAuBecsDebitPayment` in the [BECS Direct Debit Payments](https://stripe.com/docs/payments/payment-methods/au-becs-debit) with Payment Methods flow when the customer submits your payment form.
* When called, it will confirm the [PaymentIntent](https://stripe.com/docs/api/payment_intents) with `data` you provide.
* Note that there are some additional requirements to this flow that are not covered in this reference.
* Refer to our [integration guide](https://stripe.com/docs/payments/payment-methods/au-becs-debit-quickstart-payment-intents) for more details.
*
* When you confirm a `PaymentIntent`, it needs to have an attached [PaymentMethod](https://stripe.com/docs/api/payment_methods).
* In addition to confirming the `PaymentIntent`, this method can automatically create and attach a new PaymentMethod for you.
* If you have already attached a `PaymentMethod` you can call this method without needing to provide any additional data.
*
* @docs https://stripe.com/docs/js/payment_intents/confirm_au_becs_debit_payment
*/
confirmAuBecsDebitPayment(
clientSecret: string,
data?: ConfirmAuBecsDebitPaymentData
): Promise<{paymentIntent?: PaymentIntent; error?: StripeError}>;

/**
* Use `stripe.confirmCardPayment` when the customer submits your payment form.
* When called, it will confirm the [PaymentIntent](https://stripe.com/docs/api/payment_intents) with `data` you provide and carry out 3DS or other next actions if they are required.
Expand Down Expand Up @@ -149,13 +169,35 @@ declare module '@stripe/stripe-js' {
/// https://stripe.com/docs/js/setup_intents
/////////////////////////////

/**
* Requires beta access:
* Contact [Stripe support](https://support.stripe.com/) for more information.
*
* Use `stripe.confirmAuBecsDebitSetup` in the [BECS Direct Debit with Setup Intents](https://stripe.com/docs/payments/payment-methods/au-becs-debit-quickstart-setup-intents) flow when the customer submits your payment form.
* When called, it will confirm the `SetupIntent` with `data` you provide.
* Note that there are some additional requirements to this flow that are not covered in this reference.
* Refer to our [integration guide](https://stripe.com/docs/payments/payment-methods/au-becs-debit-quickstart-setup-intents) for more details.
*
* When you confirm a `SetupIntent`, it needs to have an attached [PaymentMethod](https://stripe.com/docs/api/payment_methods).
* In addition to confirming the `SetupIntent`, this method can automatically create and attach a new `PaymentMethod` for you.
* It can also be called with an existing `PaymentMethod`, or if you have already attached a `PaymentMethod` you can call this method without needing to provide any additional data.
*
* @docs https://stripe.com/docs/js/setup_intents/confirm_au_becs_debit_setup
*/
confirmAuBecsDebitSetup(
clientSecret: string,
data?: ConfirmAuBecsDebitSetupData
): Promise<{setupIntent?: SetupIntent; error?: StripeError}>;

/**
* Use `stripe.confirmCardSetup` in the [Setup Intents API flow](https://stripe.com/docs/payments/save-and-reuse) when the customer submits your payment form.
* When called, it will confirm the [SetupIntent](https://stripe.com/docs/api/setup_intents) with `data` you provide and carry out 3DS or other next actions if they are required.
*
* When you confirm a `SetupIntent`, it needs to have an attached [PaymentMethod](https://stripe.com/docs/api/payment_methods).
* In addition to confirming the `SetupIntent`, this method can automatically create and attach a new `PaymentMethod` for you.
* It can also be called with an existing `PaymentMethod`, or if you have already attached a `PaymentMethod` you can call this method without needing to provide any additional data.
*
* @docs https://stripe.com/docs/js/setup_intents/confirm_card_setup
*/
confirmCardSetup(
clientSecret: string,
Expand All @@ -172,7 +214,8 @@ declare module '@stripe/stripe-js' {
* When you confirm a `SetupIntent`, it needs to have an attached [PaymentMethod](https://stripe.com/docs/api/payment_methods).
* In addition to confirming the `SetupIntent`, this method can automatically create and attach a new `PaymentMethod` for you.
* It can also be called with an existing `PaymentMethod`, or if you have already attached a `PaymentMethod` you can call this method without needing to provide any additional data.
* These use cases are detailed in the sections that follow.
*
* @docs https://stripe.com/docs/js/setup_intents/confirm_sepa_debit_setup
*/
confirmSepaDebitSetup(
clientSecret: string,
Expand Down
Loading

0 comments on commit 4512967

Please sign in to comment.