Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit f88f5c0

Browse filesBrowse files
jofftiquezjofftiquez
committed
feat: Add AuBankAccountElement and IbanElement components
This commit adds two new components, AuBankAccountElement and IbanElement, to the project. These components are used for handling Australian bank account and IBAN inputs respectively. They are implemented using the vue-demi library and follow the same structure as other elements in the project. The AuBankAccountElement component is responsible for rendering and managing the AU_BANK_ACCOUNT_ELEMENT_TYPE element, while the IbanElement component handles the IBAN_ELEMENT_TYPE element. Both components have similar logic for initializing the elements, mounting them to the DOM, and handling various events. This commit also includes the necessary changes to the index.js file to export the new components.
1 parent 49bb6fc commit f88f5c0
Copy full SHA for f88f5c0

File tree

4 files changed

+138
-0
lines changed
Filter options

4 files changed

+138
-0
lines changed

‎src/components/AuBankAccountElement.vue

Copy file name to clipboard
+66Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<div ref="mountPoint"/>
3+
</template>
4+
5+
<script setup>
6+
import { AU_BANK_ACCOUNT_ELEMENT_TYPE as ELEMENT_TYPE } from '../constants';
7+
import { install, ref, toRef, watch, defineEmits, defineProps, defineExpose } from 'vue-demi';
8+
9+
install();
10+
11+
const emit = defineEmits([
12+
'change',
13+
'ready',
14+
'focus',
15+
'blur',
16+
'escape',
17+
]);
18+
19+
defineExpose({
20+
getElement,
21+
updateElement,
22+
});
23+
24+
const props = defineProps({
25+
elements: {
26+
type: Object,
27+
required: true,
28+
},
29+
options: {
30+
type: Object,
31+
default: () => ({}),
32+
},
33+
});
34+
35+
const elements = toRef(props, 'elements');
36+
const options = toRef(props, 'options');
37+
38+
const mountPoint = ref(null);
39+
const element = ref(null);
40+
41+
watch(props, () => {
42+
init();
43+
});
44+
45+
function init() {
46+
if (!elements.value) return;
47+
48+
element.value = elements.value.create(ELEMENT_TYPE, options.value);
49+
element.value.mount(mountPoint.value);
50+
51+
// Handle emits
52+
element.value.on('change', (event) => emit('change', event));
53+
element.value.on('ready', () => emit('ready'));
54+
element.value.on('focus', () => emit('focus'));
55+
element.value.on('blur', () => emit('blur'));
56+
element.value.on('escape', () => emit('escape'));
57+
}
58+
59+
async function getElement() {
60+
return elements.value.getElement(ELEMENT_TYPE);
61+
}
62+
63+
async function updateElement(options) {
64+
return element.value.update(options);
65+
}
66+
</script>

‎src/components/IbanElement.vue

Copy file name to clipboard
+66Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<div ref="mountPoint"/>
3+
</template>
4+
5+
<script setup>
6+
import { IBAN_ELEMENT_TYPE as ELEMENT_TYPE } from '../constants';
7+
import { install, ref, toRef, watch, defineEmits, defineProps, defineExpose } from 'vue-demi';
8+
9+
install();
10+
11+
const emit = defineEmits([
12+
'change',
13+
'ready',
14+
'focus',
15+
'blur',
16+
'escape',
17+
]);
18+
19+
defineExpose({
20+
getElement,
21+
updateElement,
22+
});
23+
24+
const props = defineProps({
25+
elements: {
26+
type: Object,
27+
required: true,
28+
},
29+
options: {
30+
type: Object,
31+
default: () => ({}),
32+
},
33+
});
34+
35+
const elements = toRef(props, 'elements');
36+
const options = toRef(props, 'options');
37+
38+
const mountPoint = ref(null);
39+
const element = ref(null);
40+
41+
watch(props, () => {
42+
init();
43+
});
44+
45+
function init() {
46+
if (!elements.value) return;
47+
48+
element.value = elements.value.create(ELEMENT_TYPE, options.value);
49+
element.value.mount(mountPoint.value);
50+
51+
// Handle emits
52+
element.value.on('change', (event) => emit('change', event));
53+
element.value.on('ready', () => emit('ready'));
54+
element.value.on('focus', () => emit('focus'));
55+
element.value.on('blur', () => emit('blur'));
56+
element.value.on('escape', () => emit('escape'));
57+
}
58+
59+
async function getElement() {
60+
return elements.value.getElement(ELEMENT_TYPE);
61+
}
62+
63+
async function updateElement(options) {
64+
return element.value.update(options);
65+
}
66+
</script>

‎src/constants/index.js

Copy file name to clipboardExpand all lines: src/constants/index.js
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,8 @@ export const PAYMENT_ELEMENT_TYPE = 'payment';
120120
export const LINK_AUTHENTICATION_ELEMENT_TYPE = 'linkAuthentication';
121121
export const EXPRESS_CHECKOUT_ELEMENT_TYPE = 'expressCheckout';
122122
export const ADDRESS_ELEMENT_TYPE = 'address';
123+
export const AU_BANK_ACCOUNT_ELEMENT_TYPE = 'auBankAccount';
124+
export const IBAN_ELEMENT_TYPE = 'iban';
123125

124126
export const ISSUING_CARD_NUMBER_DISPLAY_ELEMENT_TYPE = 'issuingCardNumberDisplay';
125127
export const ISSUING_CARD_CVC_DISPLAY_ELEMENT_TYPE = 'issuingCardCvcDisplay';

‎src/index.js

Copy file name to clipboardExpand all lines: src/index.js
+4Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import AddressElement from './components/AddressElement.vue';
2+
import AuBankAccountElement from './components/AuBankAccountElement.vue';
23
import ExpressCheckoutElement from './components/ExpressCheckoutElement.vue';
4+
import IbanElement from './components/IbanElement.vue';
35
import IssuingElement from './components/IssuingElement.vue';
46
import LinkAuthenticationElement from './components/LinkAuthenticationElement.vue';
57
import PaymentElement from './components/PaymentElement.vue';
68
import { useStripe } from './composables/use-stripe';
79

810
export {
911
AddressElement,
12+
AuBankAccountElement,
1013
ExpressCheckoutElement,
1114
IssuingElement,
15+
IbanElement,
1216
LinkAuthenticationElement,
1317
PaymentElement,
1418
useStripe,

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.