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!

What You’ll Need For This Tutorial

1 – Stripe account. 

2 – Stripe API installed on your hosting.

3 – MemberPress WordPress membership plugin

Video Tutorial

php

<?php

 

/* Template Name: Payment_update_link */

 

get_header() ?>
<div class=“row payment_link”>
<?php
//Make sure that only admin can see this page
ifcurrent_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 {;
?>
    <form action=“/payment-update-link/” method=“post”>
        <label for=“user_email”>Type user’s email to get the payment update link</label>
        <input type=“email” name=“user_email” placeholder=[email protected]/>
        <input type=“submit” name=“submit” value=“Get link”>
    </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.

Screenshot 100 - Let MemberPress Members Update Payment Details Without Logging In

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.

Screenshot 101 - Let MemberPress Members Update Payment Details Without Logging In

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()?>
<div class=“row”>
<?php

 

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

 

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

 

$cutomer_id = $_GET[‘cusid’];

 

if ( !$_POST[‘stripeToken’] ){
?>
<div id=“form_conainer”>
<form action=“/payment-details-update/” method=“post” id=“payment-form”>
  <div class=“form-row”>
    <label for=“card-element”>Enter new payment data</label>
    <div id=“card-element”>
      <!– a Stripe Element will be inserted here. –>
    </div>
    <!– Used to display form errors –>
    <div id=“card-errors”></div>
  </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 } ?>
<script src=“https://js.stripe.com/v3/”></script>
<script type=“text/javascript”>
// 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.

 

Screenshot 104 - Let MemberPress Members Update Payment Details Without Logging In

 

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!

 

 

t

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: mermberfix logo x200 1 - Let MemberPress Members Update Payment Details Without Logging In

User Review
5 (1 vote)
Share This