refactor: Add IssuingElement component and demos

vue-stripe · jofftiquez · Nov 3, 2023 · Jan 18, 2024 · Jan 19, 2024 · Jan 19, 2024
commit a20a5aff41715f4c656aef2916ed1f6a1abfeba3
diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
@@ -54,6 +54,7 @@ export default defineConfig(({ command, mode }) => {
            { text: 'Express Checkout Element', link: '/components/express-checkout-element' },
            { text: 'Link Authentication Element', link: '/components/link-authentication-element' },
            { text: 'Address Element', link: '/components/address-element' },
+            { text: 'Issuing Elements', link: '/components/issuing-element' },
          ]
        },
        {

diff --git a/docs/components/address-element.md b/docs/components/address-element.md
@@ -1,5 +1,5 @@
 <script setup>
-import AddressElementDemo from '../demo/AddressElementDemo.vue'
+import AddressElementDemo from '../demo/AddressElementDemo.vue';
 </script>

 # The Address Element Component
@@ -37,8 +37,8 @@ const options = {
 const addressElementRef = ref(null);

 function getAddressValue () {
-  const addressElement = addressElementRef.value.getValue();
-  console.log(addressElement); // The address value
+  const addressValue = addressElementRef.value.getValue();
+  console.log(addressValue); // The address value
 };
 </script>


diff --git a/docs/components/issuing-element.md b/docs/components/issuing-element.md
@@ -0,0 +1,65 @@
+# The Issuing Element Component
+
+Issuing Elements allows you to display the sensitive data of your Issuing cards in a PCI-compliant manner.
+
+## Demo
+
+Demo coming soon.
+
+The issuing element uses a the Issuing API which can be seen [here](https://docs.stripe.com/js/issuing_elements/create?link_authentication_element_create-options=&type=issuingCardNumberDisplay). Take note that each type of Issuing Element has its own options.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { IssuingElement, useStripe } from '@vue-stripe/vue-stripe';
+
+const pk = ref(import.meta.env.VITE_VUE_STRIPE_PUBLISHABLE_KEY);
+const clientSecret = ref(import.meta.env.VITE_STRIPE_CLIENT_SECRET);
+
+const { stripe, elements, initializeElements } = useStripe(pk.value);
+
+initializeElements(clientSecret.value);
+
+const options = {};
+
+// Can be one of:
+// issuingCardNumberDisplay
+// issuingCardCvcDisplay
+// issuingCardExpiryDisplay
+// issuingCardPinDisplay
+// issuingCardCopyButton
+const elementType = 'issuingCardNumberDisplay';
+</script>
+
+<template>
+  <IssuingElement
+    :elements="elements"
+    :element-type="elementType"
+    :options="options"
+  />
+</template>
+```
+
+To get the value of the address you may use the `getValue` method of the Address Element component via a ref.
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `element-type` | `String` | `null` | `true` | The type of Issuing Element to create. Can be one of: `issuingCardNumberDisplay`, `issuingCardCvcDisplay`, `issuingCardExpiryDisplay`, `issuingCardPinDisplay`, `issuingCardCopyButton` |
+| `elements` | `Elements` | `null` | `true` | The Elements instance |
+| `options` | `Object` | `{}` | `false` | Options for creating the Issuing Element. Read more [here](https://docs.stripe.com/js/issuing_elements/create?link_authentication_element_create-options=&type=issuingCardNumberDisplay#issuing_elements_create-options). |
+
+## Events
+
+> No events are emitted by the Address Element component.
+
+## Methods
+
+> No methods are available for the Issuing Element component.
+
+## Slots
+
+> No slots are available for the Issuing Element component.
diff --git a/docs/demo/AddressElementDemo.vue b/docs/demo/AddressElementDemo.vue
@@ -19,13 +19,26 @@ initializeElements(clientSecret.value);
 const options = {
  mode: props.mode,
 };
+
+const addressElementRef = ref(null);
+const address = ref(null);
+async function onGetValue () {
+  address.value = await addressElementRef.value.getValue();
+}
 </script>

 <template>
  <div style="padding: 20px 0px 0px 0px;" class="flex flex-col w-full gap-8">
    <AddressElement
+      ref="addressElementRef"
      :elements="elements"
      :options="options"
    />
+    <br>
+    <button class="btn" @click="onGetValue">Get Address</button>
+    <div v-if="address">
+      <pre>{{ address }}</pre>
+      <button class="btn" @click="address = null">Clear</button>
+    </div>
  </div>
 </template>
diff --git a/src/components/AddressElement.vue b/src/components/AddressElement.vue
@@ -4,12 +4,10 @@

 <script setup>
 import { ADDRESS_ELEMENT_TYPE as ELEMENT_TYPE  } from '../constants';
-import { install, ref, toRef, watch, defineEmits, defineProps, defineExpose } from 'vue-demi';
+import { install, ref, toRef, watch, defineProps, defineExpose } from 'vue-demi';

 install();

-const emit = defineEmits(['change', 'ready', 'focus', 'blur', 'escape']);
-
 defineExpose({
  getElement,
  updateElement,
@@ -54,6 +52,6 @@ async function updateElement (options) {
 };

 async function getValue () {
-  return elements.value.getValue();
+  return element.value.getValue();
 };
 </script>
diff --git a/src/components/ExpressCheckoutElement.vue b/src/components/ExpressCheckoutElement.vue
@@ -8,7 +8,13 @@ import { install, ref, toRef, watch, defineEmits, defineProps, defineExpose } fr

 install();

-const emit = defineEmits(['change', 'ready', 'focus', 'blur', 'escape']);
+const emit = defineEmits([
+  'click',
+  'confirm',
+  'cancel',
+  'shippingaddresschange',
+  'shippingratechange',
+]);

 defineExpose({
  getElement,

diff --git a/src/components/IssuingElement.vue b/src/components/IssuingElement.vue
@@ -0,0 +1,41 @@
+<template>
+  <div ref="mountPoint"/>
+</template>
+
+<script setup>
+import { install, ref, toRef, watch, defineProps } from 'vue-demi';
+
+install();
+
+const props = defineProps({
+  elements: {
+    type: Object,
+  },
+  options: {
+    type: Object,
+    default: () => ({}),
+  },
+  elementType: {
+    type: String,
+    required: true,
+  },
+});
+
+const elements = toRef(props, 'elements');
+const options = toRef(props, 'options');
+const elementType = toRef(props, 'elementType');
+
+const mountPoint = ref(null);
+const element = ref(null);
+
+watch(props, () => {
+  init();
+});
+
+function init () {
+  if (!elements.value) return;
+
+  element.value = elements.value.create(elementType.value, options.value);
+  element.value.mount(mountPoint.value);
+};
+</script>
diff --git a/src/components/LinkAuthenticationElement.vue b/src/components/LinkAuthenticationElement.vue
@@ -4,12 +4,10 @@

 <script setup>
 import { LINK_AUTHENTICATION_ELEMENT_TYPE as ELEMENT_TYPE  } from '../constants';
-import { install, ref, toRef, watch, defineEmits, defineProps, defineExpose } from 'vue-demi';
+import { install, ref, toRef, watch, defineProps, defineExpose } from 'vue-demi';

 install();

-const emit = defineEmits(['change', 'ready', 'focus', 'blur', 'escape']);
-
 defineExpose({
  getElement,
 });

diff --git a/src/components/PaymentElement.vue b/src/components/PaymentElement.vue
@@ -8,7 +8,13 @@ import { install, ref, toRef, watch, defineEmits, defineProps, defineExpose } fr

 install();

-const emit = defineEmits(['change', 'ready', 'focus', 'blur', 'escape']);
+const emit = defineEmits([
+  'change',
+  'ready',
+  'focus',
+  'blur',
+  'escape',
+]);

 defineExpose({
  getElement,

diff --git a/src/constants/index.js b/src/constants/index.js
@@ -120,3 +120,9 @@ export const PAYMENT_ELEMENT_TYPE = 'payment';
 export const LINK_AUTHENTICATION_ELEMENT_TYPE = 'linkAuthentication';
 export const EXPRESS_CHECKOUT_ELEMENT_TYPE = 'expressCheckout';
 export const ADDRESS_ELEMENT_TYPE = 'address';
+
+export const ISSUING_CARD_NUMBER_DISPLAY_ELEMENT_TYPE = 'issuingCardNumberDisplay';
+export const ISSUING_CARD_CVC_DISPLAY_ELEMENT_TYPE = 'issuingCardCvcDisplay';
+export const ISSUING_CARD_EXPIRY_DISPLAY_ELEMENT_TYPE = 'issuingCardExpiryDisplay';
+export const ISSUING_CARD_PIN_DISPLAY_ELEMENT_TYPE = 'issuingCardPinDisplay';
+export const ISSUING_CARD_COPY_BUTTON_ELEMENT_TYPE = 'issuingCardCopyButton';
diff --git a/src/index.js b/src/index.js
@@ -1,12 +1,14 @@
 import AddressElement from './components/AddressElement.vue';
 import ExpressCheckoutElement from './components/ExpressCheckoutElement.vue';
+import IssuingElement from './components/IssuingElement.vue';
 import LinkAuthenticationElement from './components/LinkAuthenticationElement.vue';
 import PaymentElement from './components/PaymentElement.vue';
 import { useStripe } from './composables/use-stripe';

 export { 
  AddressElement,
  ExpressCheckoutElement,
+  IssuingElement,
  LinkAuthenticationElement,
  PaymentElement,
  useStripe,