Name: Allow logout Memberpress user to change Stripe payment data by email
Rating: 5 (1 reviews)
Author: Victor Barannik

Overview

Recently one of our MemberFix customers decided to close off access to the members area of their MemberPress based membership site.

Since members of this particular site receive their product via email, there is no need for a members area and therefore no real reason to grant members access.

But members still need to be able to update their payment details to keep their credit card on file current and their subscription active.

So we came up with a way to let members update their card information without logging to their Memberpress accounts.

And now you’ll learn how to do this for your site as well!

Table of Contents

What You’ll Need For This Tutorial

1 – Stripe account.

2 – Stripe API installed on your hosting.

3 – MemberPress WordPress membership plugin

Video Tutorial

Create a template with a form that will provide the update link for a particular member

Our goal with this integration was to minimize friction for the member when updating their payment details.

So we decided to create a form that will give us the link for a particular user based on his email.

1 – Create a new page template file in your theme folder.

For example name it payment_update_link.php.

Put the code below into that file:



php

<?php

/* Template Name: Payment_update_link */

get_header() ?>

<?php

//Make sure that only admin can see this page

if( current_user_can(‘administrator’) ) {

//If form was filled we display this part

if($_POST[‘user_email’]){

global $wpdb;

//SQL query to get custommer ID

$result = $wpdb->get_results(

“SELECT rd_mepr_subscriptions.subscr_id

FROM rd_mepr_subscriptions

INNER JOIN rd_users ON rd_users.ID=rd_mepr_subscriptions.user_id

WHERE rd_users.user_email = ‘”.$_POST[‘user_email’].”‘ AND rd_mepr_subscriptions.status=‘active’“);

echo ‘<div id=”payment_link_cont”>Payment update link for ‘ . $_POST[‘user_email’] . ‘ is <br/><br/> <b>https://yourwebsite.com/payment-details-update/?cusid=’.$result[0]->subscr_id.‘</b></div>’;

echo ‘<a id=”payment_link_back” href=”/payment-update-link/”>Go back</a>’;

} else {;

<label for=“user_email”>Type user’s email to get the payment update link</label>

</form>

<?php };

} else { echo ‘You are not allowed to visit this page!’; }; ?>

</div>

<?php

get_footer()?>

2 – Create a new page on your membership site and in the Page Attributes section of the document widget, find and select the template you created.

Publish the page.

This new page shows visitors a form where you enter a member’s email address.

When you submit the form it will generate a unique link specifically for that member to securely update his payment details.

Create a page template for the Stripe API form that will change member’s payment data

Now we need create a /payment-details-update/ page.

But before that we need install Stripe API to your hosting.

IMPORTANT: I highly recommend that you first create a child theme, or use the My Custom Functions WordPress plugin whenever you add custom code to your theme files. Otherwise, any time you update your theme your changes will get wiped out!

3 – Download Stripe API files from this link.

4 – Put the files to your theme folder into /your-child-theme/stripe/ folder.

5 – Then create another template (for example payment_update.php. ).

Put the code below into that file:



php

<?php

/* Template Name: Payment_update */

get_header()?>

<?php

$stripe_files = require_once(‘stripe/init.php’);

\Stripe\Stripe::setApiKey(‘/* YOUR LIVE STRIPE API SECRET KEY */’);

$cutomer_id = $_GET[‘cusid’];

if ( !$_POST[‘stripeToken’] ){

<label for=“card-element”>Enter new payment data</label>

<!– a Stripe Element will be inserted here. –>

</div>

<!– Used to display form errors –>

</div>

<button class=“btn”>Update Payment Data</button>

</form>

</div>

<?php } else {

$token = $_POST[‘stripeToken’];

$cusId = $_POST[‘cusId’];

$stripe = new \Stripe\StripeClient(

‘/* YOUR LIVE STRIPE API SECRET KEY */’

);

$update = $stripe->customers->update(

$cusId,

[‘source’ => $token]

// [‘source’ => $charge->id]

);

echo ‘<div id=”payment_update_success”><h1>Your payment data has been updated!</h1></div>’;

<?php } ?>

// Stripe API Key

var stripe = Stripe(‘/* YOUR LIVE STRIPE API KEY */’);

var elements = stripe.elements();

// Custom Styling

var style = {

base: {

color: ‘#32325d’,

lineHeight: ’24px’,

fontFamily: ‘”Helvetica Neue”, Helvetica, sans-serif’,

fontSmoothing: ‘antialiased’,

fontSize: ’16px’,

‘::placeholder’: {

color: ‘#aab7c4’

}

invalid: {

color: ‘#fa755a’,

iconColor: ‘#fa755a’

}

};

// Create an instance of the card Element

var card = elements.create(‘card’, {style: style});

// Add an instance of the card Element into the `card-element` <div>

card.mount(‘#card-element’);

// Handle real-time validation errors from the card Element.

card.addEventListener(‘change’, function(event) {

var displayError = document.getElementById(‘card-errors’);

if (event.error) {

displayError.textContent = event.error.message;

} else {

displayError.textContent = ”;

}

});

// Handle form submission

var form = document.getElementById(‘payment-form’);

form.addEventListener(‘submit’, function(event) {

event.preventDefault();

stripe.createToken(card).then(function(result) {

if (result.error) {

// Inform the user if there was an error

var errorElement = document.getElementById(‘card-errors’);

errorElement.textContent = result.error.message;

} else {

stripeTokenHandler(result.token);

}

});

// Send Stripe Token to Server

function stripeTokenHandler(token) {

// Insert the token ID into the form so it gets submitted to the server

var form = document.getElementById(‘payment-form’);

// Add Stripe Token to hidden input

var hiddenInput = document.createElement(‘input’);

hiddenInput.setAttribute(‘type’, ‘hidden’);

hiddenInput.setAttribute(‘name’, ‘stripeToken’);

hiddenInput.setAttribute(‘value’, token.id);

form.appendChild(hiddenInput);

// Add custommer id to hidden input

var hiddenCusIdInput = document.createElement(‘input’);

hiddenCusIdInput.setAttribute(‘type’, ‘hidden’);

hiddenCusIdInput.setAttribute(‘name’, ‘cusId’);

hiddenCusIdInput.setAttribute(‘value’, ‘<?php echo $cutomer_id; ?>‘);

form.appendChild(hiddenCusIdInput);

// Submit form

form.submit();

}

</script>

</div>

<?php

get_footer()?>

Now we need to link that template to your new page as we did before with payment_update_link.php in step 2.

After that, you will get a page where the member can change his payment data without logging into WordPress / MemberPress at all.

Security issues

7. Be sure you are using the https protocol when you are working with any payment data.

To do it you need to install SSL certificate.

You can find more information about SSL certificates and how to use it on this article.

That’s all!

If you want our team to do this integration for you, just visit our MemberFix services page and leave us a message!

Now let’s hear from you!

Have you ever had a situation when you needed make changes in Stripe on your website?

Tell us about it in the comments section below!

What do you think of this tutorial?

Book Title: Allow logout Memberpress user to change Stripe payment data by email

Book Description: Create a special page on your MemberPress site where the member will be able to change his Stripe payment information without logging in to the website.

Book Author: Victor Barannik

Publisher - Orgnization: MemberFix

Publisher Logo:

User Review

5 (1 vote)

Let MemberPress Members Update Payment Details Without Logging In

Overview

What You’ll Need For This Tutorial

Video Tutorial

Create a template with a form that will provide the update link for a particular member

php

Create a page template for the Stripe API form that will change member’s payment data

php

Security issues

What do you think of this tutorial?

User Review

You might also enjoy...