Merge pull request #1 from TomodomoCo/rcp-update-card-form

Support for Stripe Elements on update billing page

README.md

@@ -4,7 +4,7 @@ Stripe payment gateway for Restrict Content Pro, using [Stripe Elements](https:/
 
 ## Usage
 
-1. Download the zip
+1. Download the [latest release](https://github.com/TomodomoCo/rcp-stripe-elements/releases/latest)
 2. Install the plugin
 3. Activate the plugin
 4. ...

class-rcp-payment-gateway-stripe-elements.php

@@ -38,6 +38,15 @@ public function fields() {
 			),
 		) );
 
+		// Set `form_id` if on RCP Update Billing page
+		if ( rcp_elements_is_update_card_page() !== false ) {
+			$form_id = apply_filters( 'rcp_elements_update_form_id', 'rcp_update_card_form' );
+
+		// Set `form_id` if on RCP Registration page
+		} else {
+			$form_id = apply_filters( 'rcp_elements_registration_form_id', 'rcp_registration_form' );
+		}
+
 		ob_start(); ?>
 
 		<div class="form-row">
@@ -48,12 +57,13 @@ public function fields() {
 		<br>
 
 		<script>
-			var stripe, elements, card, elementsArgs;
+			var stripe, elements, card, elementsArgs, form_id;
 
 			// Load Stripe Elements
 			stripe       = Stripe('<?php echo $this->publishable_key; ?>');
 			elements     = stripe.elements();
 			elementsArgs = <?php echo json_encode( $data ); ?>;
+			form_id 	 = '<?php echo $form_id; ?>';
 
 			// Create and mount the card
 			card = elements.create( 'card', elementsArgs );
@@ -67,7 +77,7 @@ public function fields() {
 				if ( event.error ) {
 					displayError.textContent = event.error.message;
 
-					var submission_form = jQuery( '#rcp_registration_form' );
+					var submission_form = jQuery( '#' + form_id );
 					submission_form.unblock();
 
 				// No errors, pass blank string
@@ -81,7 +91,7 @@ function stripeTokenHandler( token ) {
 				var form, hiddenInput;
 
 				// Insert the token ID into the form so it gets submitted to the server
-				form        = document.getElementById( 'rcp_registration_form' );
+				form        = document.getElementById( form_id );
 				hiddenInput = document.createElement( 'input' );
 
 				// Assign attributes to hidden field
@@ -94,11 +104,27 @@ function stripeTokenHandler( token ) {
 				form.submit();
 			}
 
+			// Attempts the creation of a Stripe Token
+			function attemptStripeTokenCreation() {
+				stripe.createToken( card ).then( function( result ) {
+
+					// Errors present
+					if ( result.error ) {
+						var errorElement = document.getElementById( 'card-errors' );
+						errorElement.textContent = result.error.message;
+
+					// Token created, ready to send to server
+					} else {
+						stripeTokenHandler( result.token );
+					}
+				});
+			}
+
 			/**
 			 * 'rcp_register_form_submission' is triggered in register.js
 			 * if the form data is successfully validated.
 			 */
-			jQuery( 'body' ).off( 'rcp_register_form_submission' ).on( 'rcp_register_form_submission', function( e, response, form_id ) {
+			jQuery( 'body' ).off( 'rcp_register_form_submission' ).on( 'rcp_register_form_submission', function( e, response ) {
 
 				// Bail early if not stripe elements
 				if ( response.gateway.slug !== 'stripe_elements' ) {
@@ -110,20 +136,15 @@ function stripeTokenHandler( token ) {
 					return true;
 				}
 
-				// Create a Stripe token
-				stripe.createToken( card ).then( function( result ) {
-
-					// Errors present
-					if ( result.error ) {
-						var errorElement = document.getElementById( 'card-errors' );
-						errorElement.textContent = result.error.message;
-
-					// Token created, ready to send to server
-					} else {
-						stripeTokenHandler( result.token );
-					}
-				});
+				attemptStripeTokenCreation();
+			} );
 
+			/**
+			 * Update billing form submissions
+			 */
+			jQuery( 'body' ).on( 'click', '#' + form_id + ' #rcp_submit', {}, function( evt ) {
+				evt.preventDefault();
+				attemptStripeTokenCreation();
 			} );
 		</script>
 
@@ -132,12 +153,24 @@ function stripeTokenHandler( token ) {
 	}
 
 	/**
-	 * Load Stripe Elements JS; dequeue Stripe Checkout JS
+	 * Print form fields for this Gateway on `update billing` view in RCP
+	 *
+	 * @return string
+	 */
+	public function update_fields() {
+		parent::init();
+
+		return $this->fields();
+	}
+
+	/**
+	 * Load Stripe Elements JS
 	 *
 	 * @return void
 	 */
 	public function scripts() {
-		wp_enqueue_script( 'stripe-elements', 'https://js.stripe.com/v3/' );
+		wp_register_script( 'stripe-elements', 'https://js.stripe.com/v3/', array( 'jquery' ) );
+		wp_enqueue_script( 'stripe-elements' );
 	}
 
 	/**

rcp-stripe-elements.php

@@ -45,3 +45,54 @@ function rcp_elements_register_stripe_elements_gateway( $gateways ) {
 	return $gateways;
 }
 add_filter( 'rcp_payment_gateways', 'rcp_elements_register_stripe_elements_gateway' );
+
+/**
+ * Custom path for RCP template overrides
+ *
+ * @param array  $template_stack
+ * @param string $template_names
+ *
+ * @return array $template_stack
+ */
+function rcp_elements_custom_template_path( $template_stack, $template_names ) {
+	$template_stack[] = trailingslashit( plugin_dir_path( __FILE__ ) ) . 'templates/';
+
+	return $template_stack;
+}
+add_filter( 'rcp_template_stack', 'rcp_elements_custom_template_path', 10, 2 );
+
+/**
+ * Conditionally loads Stripe Elements JS for the `update card` page
+ *
+ * @return void
+ */
+function rcp_elements_load_scripts() {
+
+	// Bail early if scripts shouldn't be loaded
+	if ( rcp_elements_is_update_card_page() === false ) {
+		return;
+	}
+
+	$gateway = new RCP_Payment_Gateway_Stripe_Elements();
+	$gateway->scripts();
+}
+add_action( 'wp_enqueue_scripts', 'rcp_elements_load_scripts', 10, 0 );
+
+/**
+ * Checks if the current page is the RCP update card page
+ *
+ * @return bool
+ */
+function rcp_elements_is_update_card_page() {
+	global $rcp_options, $post;
+
+	if ( isset( $rcp_options['update_card'] ) ) {
+		return is_page( $rcp_options['update_card'] );
+	}
+
+	if ( ! empty( $post ) && has_shortcode( $post->post_content, 'rcp_update_card' ) ) {
+		return true;
+	}
+
+	return false;
+}

templates/card-update-form.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Card Update Form
+ *
+ * This form is displayed with the [rcp_update_card] shortcode.
+ * @link http://docs.restrictcontentpro.com/article/1608-rcpupdatecard
+ */
+?>
+
+<?php $member = new RCP_Member( get_current_user_id() ); ?>
+<form id="rcp_update_card_form" class="rcp_form" action="" method="POST">
+
+	<?php $cards = $member->get_card_details(); ?>
+
+	<?php if( ! empty( $cards ) ) : ?>
+		<h3><?php _e( 'Your Cards', 'rcp' ); ?></h3>
+		<?php foreach( $cards as $card ) : ?>
+			<fieldset class="rcp_current_cards_fieldset">
+				<p>
+					<?php if( isset( $card['name'] ) ): ?>
+					<span class="rcp_card_details_name"><?php _e( 'Name:', 'rcp' ); ?> <?php echo $card['name']; ?></span>
+					<?php endif; ?>
+
+					<span class="rcp_card_details_type"><?php _e( 'Type:', 'rcp' ); ?> <?php echo $card['type']; ?></span>
+					<span class="rcp_card_details_last4"><?php _e( 'Last 4:', 'rcp' ); ?> <?php echo $card['last4']; ?></span>
+					<span class="rcp_card_details_exp"><?php _e( 'Exp:', 'rcp' ); ?> <?php echo $card['exp_month'] . ' / ' . $card['exp_year']; ?></span>
+				</p>
+			</fieldset>
+		<?php endforeach; ?>
+	<?php endif; ?>
+
+	<?php
+		// Output `RCP_Payment_Gateway_Stripe_Elements` update fields
+		$gateway = new RCP_Payment_Gateway_Stripe_Elements();
+		echo $gateway->update_fields();
+	?>
+
+	<div class="rcp_message error">
+	</div>
+	<p id="rcp_submit_wrap">
+		<input type="hidden" name="rcp_update_card_nonce" value="<?php echo wp_create_nonce( 'rcp-update-card-nonce' ); ?>"/>
+		<input type="submit" name="rcp_submit_card_update" id="rcp_submit" value="<?php esc_attr_e( 'Update Card', 'rcp' ); ?>"/>
+	</p>
+
+</form>

templates/index.php

@@ -0,0 +1,2 @@
+<?php
+// No entry