修复其他插件调用Woocommerce API支付未使用默认checkout页面，导致CyberSource Flex Microform未初始化的问题。

CyberSource Flex Microform not work？

CyberSource Flex Microform 的woocommerce plugin在使用的时候，如果未使用checkout页面进行支付调用，会发现无法输入信用卡号和安全码字段。(Fixed the issue where other plug-ins calling API payment did not use the checkout page, causing Flex Microform to not initialize.)

最近公司做一个慈善机构捐款的Wordpress项目，由于需要配合另一个捐款的插件走定制的捐款流程，未使用系统默认的Checkout页面。导致CyberSource Flex Microform一直无法初始化表单功能，最后发现是因为只有chekcout页面被注入了JS去出实话，所以其他方式调用支付表单并未初始化。只需要额外在调用的地方动态注入缺失的JS就好了。

<script defer>
	
/**
 * WooCommerce CyberSource Flex Microform handler.
 * 修复其他插件调用API支付未使用checkout页面，导致Flex Microform未初始化的问题。
 * Fixed the issue where other plug-ins calling API payment did not use the checkout page, causing Flex Microform to not  *initialize.
 * fix 2winter 
 * url 2winter.com
 * date 2024/7/10
 */
jQuery(document).ready(($) => {

	'use strict';

	let checkSVOBJHandler = setInterval(() => {

        //WC的类并未在全局都存在，需要检查。
		// console.log('检查是否WC支付类已存在！');
		if (!window.SV_WC_Payment_Form_Handler_v5_12_3) {
			return;
		} else {
			// console.log('已存在，清理定时。');
			clearInterval(checkSVOBJHandler);
		}

		// the base non-flex form handler for eChecks or credit cards with Flex disabled
		window.WC_Cybersource_Payment_Form_Handler = window.SV_WC_Payment_Form_Handler_v5_12_3;

		// dispatch loaded event
		$(document.body).trigger('wc_cybersource_payment_form_handler_loaded');

		/**
		 * CyberSource Credit Card Flex Microform Handler class
		 *
		 * Loads CyberSource Flex Microform in an iframe and intercepts the form submission to inject the token returned by CyberSource.
		 *
		 * @since 2.0.0-dev-2
		 */
		window.WC_Cybersource_Flex_Payment_Form_Handler = class WC_Cybersource_Flex_Payment_Form_Handler extends SV_WC_Payment_Form_Handler_v5_12_3 {

			/**
			 * Instantiates Payment Form Handler.
			 *
			 * @since 2.0.0
			 */
			constructor(args) {

				super(args);

				this.general_error = args.general_error;
				this.capture_context = args.capture_context;
				this.number_placeholder = args.number_placeholder;
				this.csc_placeholder = args.csc_placeholder;
				this.styles = args.styles;

				this.init_cybersource_microform();

				$(document.body).on('sv_wc_payment_form_valid_payment_data', (event, data) => {

					if (data.payment_form.id !== this.id) {
						return data.passed_validation;
					}

					// if regular validation passed
					if (data.passed_validation) {

						// if a saved method is selected, we have a token
						if (this.saved_payment_method_selected || this.get_flex_token()) {

							let token_input = this.form.find('input#wc-cybersource-credit-card-payment-token-' + this.saved_payment_method_selected)

							// these values are accessed by 3DS handler later on
							if (token_input.length) {
								this.card_expiration_month = token_input.data('card-expiration-month').toString();
								this.card_expiration_year = token_input.data('card-expiration-year').toString();
							}

							return $(document.body).triggerHandler('wc_cybersource_flex_form_submitted', { payment_form: data.payment_form }) !== false;
						}

						// block the UI
						this.form.block({ message: null, overlayCSS: { background: '#fff', opacity: 0.6 } });

						// generate a flex token
						this.create_token();

						// always return false to resubmit the form
						return false;
					}

				});

				$(document.body).on('checkout_error', () => {
					this.clear_flex_data();
				});
			}


			/**
			 * Sets the form payment fields.
			 *
			 * Initializes the Flex microform.
			 *
			 * @since 2.0.0
			 */
			set_payment_fields() {

				super.set_payment_fields();

				delete this.initializing_microform_instance;

				if (this.capture_context) {
					this.init_cybersource_microform();
				}
			}


			/**
			 * Initializes CyberSource Flex Microform.
			 *
			 * @since 2.0.0
			 */
			init_cybersource_microform() {

				// avoid calling init_cybersource_microform() again before the request to initialize the microform instance finishes
				if (this.initializing_microform_instance) {
					return;
				}

				// bail if the hosted credit card form field is already part of the page
				if (this.microform_instance && this.microform_instance.iframe && $(`#${this.microform_instance.iframe.id}`).length) {
					return;
				}

				// bail if the WooCommerce payment form is rendered
				if (!$('#wc-cybersource-credit-card-account-number-hosted').length > 0) {
					return
				}

				this.initializing_microform_instance = true;

				this.clear_flex_data();

				let flex = new Flex(this.capture_context);

				this.microform_instance = flex.microform({ styles: this.styles });

				delete this.initializing_microform_instance;

				let numberField = this.microform_instance.createField('number', { placeholder: this.number_placeholder }),
					cscField = this.microform_instance.createField('securityCode', { placeholder: this.csc_placeholder });

				// handle card type changes
				numberField.on('change', function (data) {

					let $card_number_field = $('#wc-cybersource-credit-card-account-number-hosted');

					// clear any previous card type classes
					$card_number_field.attr('class', (i, c) => {
						return c.replace(/(^|\s)card-type-\S+/g, '');
					});

					// set the card type class for display
					if (data && data.card && data.card[0] && data.card[0].name) {
						$card_number_field.addClass('card-type-' + data.card[0].name);
					}

				});

				numberField.load('#wc-cybersource-credit-card-account-number-hosted');

				if ($('#wc-cybersource-credit-card-csc-hosted').length > 0) {
					cscField.load('#wc-cybersource-credit-card-csc-hosted');
				}
			}


			/**
			 * Validates remaining credit card data (expiry and optionally csc).
			 *
			 * @since 2.0.0
			 */
			validate_card_data() {

				let errors = [];

				// validate CC fields if necessary
				if (!this.saved_payment_method_selected) {

					// validate expiration date
					const expiry = $.payment.cardExpiryVal(this.payment_fields.find('.js-sv-wc-payment-gateway-credit-card-form-expiry').val());

					// validates future date
					if (!$.payment.validateCardExpiry(expiry)) {
						errors.push(this.params.card_exp_date_invalid);
					}
				}

				if (errors.length > 0) {
					this.render_errors(errors);
					return false;
				}

				return true;
			}


			/**
			 * Creates a new flex token.
			 *
			 * @since 2.0.0
			 */
			create_token() {

				const expiry = $.payment.cardExpiryVal(this.payment_fields.find('.js-sv-wc-payment-gateway-credit-card-form-expiry').val());

				let expiration_month = String(expiry.month);
				let expiration_year = String(expiry.year);

				// Cybersource requires a leading zero
				if (expiration_month.length === 1) {
					expiration_month = '0' + expiration_month;
				}

				const options = {
					expirationMonth: expiration_month,
					expirationYear: expiration_year,
				};

				this.microform_instance.createToken(options, (error, token) => {

					if (error) {

						this.handle_token_errors(error);

					} else {

						let payload = JSON.parse(atob(token.split('.')[1]));
						let card = payload.content.paymentInformation.card

						// these values are accessed by the 3DS handler later on
						if (card) {
							this.card_type = card.number && card.number.detectedCardTypes && card.number.detectedCardTypes.length ? card.number.detectedCardTypes[0] : null
							this.card_bin = card.number && card.number.bin ? card.number.bin : null
							this.card_expiration_month = card.expirationMonth ? card.expirationMonth.value : null
							this.card_expiration_year = card.expirationYear ? card.expirationYear.value : null
						}

						if (payload.jti) {
							this.jti = payload.jti;
						}

						// at this point the token & key may be added to the form as hidden fields
						$('[name=wc-cybersource-credit-card-flex-key]').val(this.capture_context);
						$('[name=wc-cybersource-credit-card-flex-token]').val(token);

						this.form.submit();
					}

				});
			}


			/**
			 * Handles flex tokenization errors.
			 *
			 * @since 2.0.0
			 *
			 * @param error
			 */
			handle_token_errors(error) {

				let errors = [];

				console.log(error);

				if (error.details && error.details.length > 0 && error.reason === 'CREATE_TOKEN_VALIDATION_FIELDS') {

					error.details.forEach((detail, index) => {

						let message = '';

						switch (detail.location) {

							case 'number':
								message = this.params.card_number_invalid;
								break;

							case 'securityCode':
								message = this.params.cvv_length_invalid;
								break;
						}

						if (message.length) {
							errors.push(message);
						}

					});

				} else {

					errors.push(this.general_error);
				}

				this.render_errors(errors);
			}


			/**
			 * Renders errors.
			 *
			 * @since 2.0.0
			 *
			 * @param errors
			 */
			render_errors(errors) {

				this.clear_flex_data();

				super.render_errors(errors);
			}


			/**
			 * Gets the flex token if set in the form.
			 *
			 * @since 2.0.0
			 *
			 * @returns string
			 */
			get_flex_token() {

				return this.payment_fields.find('input[name=wc-cybersource-credit-card-flex-token]').val();
			}


			/**
			 * Clears any form flex data.
			 *
			 * @since 2.0.0
			 */
			clear_flex_data() {

				this.jti = null;

				$('[name=wc-cybersource-credit-card-flex-key]').val('');
				$('[name=wc-cybersource-credit-card-flex-token]').val('');
			}


		};


		// dispatch loaded event
		$(document.body).trigger('wc_cybersource_flex_payment_form_handler_loaded');

        //定义一个方法，方便其他地方使用。
		function loadCredit() {
			$(document.body).trigger('wc_cybersource_flex_payment_form_handler_loaded');
		}
	}, 2000)

});
    

	
</script>