airwallexCardManager.ts 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. import { createElement, Payment } from "@airwallex/components-sdk";
  2. import { AirwallexCardElements } from "@/types/checkout/type";
  3. type ElementType =
  4. | Payment.CardNumberElementType
  5. | Payment.CvcElementType
  6. | Payment.ExpiryDateElementType;
  7. class AirwallexManager {
  8. private elements: AirwallexCardElements = {};
  9. private listeners = new Map<ElementType, Map<Payment.SplitElementEventCode, boolean>>();
  10. private created = false;
  11. async init() {
  12. if (this.created) return;
  13. this.created = true;
  14. }
  15. async createElements() {
  16. if (this.elements.cardNumber) return this.elements;
  17. const cardNumber = await createElement("cardNumber");
  18. const cvc = await createElement("cvc");
  19. const expiry = await createElement("expiry");
  20. this.elements = { cardNumber, cvc, expiry };
  21. return this.elements;
  22. }
  23. mount(containerIds: {
  24. cardNumber: string;
  25. cvc: string;
  26. expiry: string;
  27. }) {
  28. this.elements.cardNumber?.mount(containerIds.cardNumber);
  29. this.elements.cvc?.mount(containerIds.cvc);
  30. this.elements.expiry?.mount(containerIds.expiry);
  31. }
  32. unmount() {
  33. this.elements.cardNumber?.unmount();
  34. this.elements.cvc?.unmount();
  35. this.elements.expiry?.unmount();
  36. }
  37. on<EventCode extends Payment.SplitElementEventCode>(el: ElementType, event: EventCode, handler: Payment.SplitElementEventHandler<EventCode>) {
  38. let eventMap = this.listeners.get(el);
  39. if (!eventMap) {
  40. eventMap = new Map<Payment.SplitElementEventCode, boolean>([[event, false]]);
  41. this.listeners.set(el, eventMap);
  42. }
  43. if(eventMap.get(event)) return; // 注册过就返回
  44. el.on(event, handler);
  45. eventMap.set(event,true);
  46. }
  47. destroy() {
  48. const { cardNumber, cvc, expiry } = this.elements;
  49. [cardNumber, cvc, expiry].forEach((el) => {
  50. if (!el) return;
  51. el.unmount();
  52. el.destroy();
  53. });
  54. this.elements = {};
  55. }
  56. getElements() {
  57. return this.elements;
  58. }
  59. }
  60. export const airwallexManager = new AirwallexManager();