Allow DAP Members To Update Their Card Details In Stripe

Overview

Introduction

Digital Access Pass (DAP) is used by some of our customers as a membership plugin on their WordPress websites.

One of these customers needed an option for DAP members who paid using Stripe, to update their card details directly within the members area using a nice modal popup.

Currently DAP does offer a built-in credit card update option for Stripe based members.

This is just another, nice-looking option.

We created this solution through a little custom PHP script.

Now you get to use it too! 🙂

What You’ll Need

1 – Digital Access Pass (DAP) – WordPress membership plugin

2 – PHP library for the Stripe API

Table of Contents

Video Tutorial

Create the custom WordPress PHP template

First of all we will create a WordPress template.

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!

1. You need access to your website FTP.

Just duplicate the page.php file from your theme files and name it dapstripe-page.php.

Open dapstripe-page.php and add this to the top of it:



php

<?php

Template Name: Stripe Details

2. Go to your WordPress Dashboard and click on Pages => Add New.

Name the page “Update Your Card” and select “Stripe Details” as page template.

Set the permalink to /update-your-card/ so that your page will be https://yourdomain.com/update-your-card/.

3. For this PHP solution which we propose, we will need to use PHP library for the Stripe API. You can find this library here.

Download the stripe-php-master.zip file and upload the “stripe-php-master” folder to your child theme folder using FTP.

4. Once the “stripe-php-master” folder is uploaded, we need to create a file called update_card.php.

This is the file used by the form code which we will add soon to dapstripe-page.php WP template.

Open update_card.php file and add the following code:



php

<?php
// Updates the payment method on file for a customer

require_once(dirname(__FILE__).’/stripe-php-master/init.php’);

// Live Stripe API Key
\Stripe\Stripe::setApiKey(“your Stripe Live Key”);

if (isset($_POST[‘stripeToken’])){
try {
$cu = \Stripe\Customer::update(
$customer_id, // stored in your application
[
‘source’ => $_POST[‘stripeToken’] // obtained with Checkout
]);
$success = “Your card details have been updated!”;

}
catch(\Stripe\Exception\CardException $e) {

// Use the variable $error to save any errors
// To be displayed to the customer later in the page
$body = $e->getJsonBody();
$err = $body[‘error’];
$error = $err[‘message’];

}
// Add additional error handling here as needed
}
?>

As you can see, the above code is using PHP library for the Stripe API code and also the Stripe live publishable key.

You an find this key in your Stripe account > Developers > API keys.

5. Next step is to add some php code to the dapstripe-page.php template which we have created.

Open dapstripe-page.php and just below the opening tag add the below code:



php

<?php if ($_SERVER[‘REQUEST_METHOD’] == ‘POST’)

{

global $wpdb;

$current_user = wp_get_current_user();

$current_user_email = $current_user->user_email;

// get Stripe invoice id from database

$invoice_id = $wpdb->get_var(“SELECT trans_num FROM dap_transactions WHERE payer_email = ‘$current_user_email’ AND trans_type = ‘subsc_hook'”);

require(dirname(__FILE__).’/stripe-php-master/init.php’);

// Use your test API key (switch to the live key later)

\Stripe\Stripe::setApiKey(“Your Stripe Live Key”);

if (isset($invoice_id)) {

$user_details = \Stripe\Invoice::retrieve($invoice_id);

$customer_id = $user_details[“customer”]; //this is the cus_…

};

require_once(dirname(__FILE__).’/update_card.php’);

//echo $success;

}

The above code is using the PHP library for the Stripe API and also the update_card.php which we have already created at Step 4.

It also uses your also the Stripe live publishable key.

One important thing to mention about this code is that to make the connection between Stripe and current DAP member we will need the Stripe invoice ID.

Here’s what that looks like in Stripe:

The invoice ID for each member who paid with Stripe is found in the “dap_transactions” table in WP database:

6. After the above code is added on top of dapstripe-page.php, in the same file—right where it renders the page content (before or after the_content(); WP tag)—you will need to add the below code which will actually generate a button on the page:



php

<?php

$current_user = wp_get_current_user();

$current_user_email = $current_user->user_email;

<script

src=”https://checkout.stripe.com/checkout.js” class=”stripe-button”

data-key=”Your Stripe like key”

data-image=”path/to/your/logo”

data-name=”Your Website Name”

data-panel-label=”Update Card Details”

data-label=”Update Card Details”

data-allow-remember-me=false

data-locale=”auto”

data-email=”<?php echo $current_user_email; ?>”>

</script>

</form>

The page will look like this:

Once the button is clicked it will open a pop-up:

Users just need to add the new card details and click on “Update Card Details“.

That will update their credit card in Stripe and continue charging them using that method on future payments.

You can add a link to this new page on member’s account page so that they can easily find it and use it to update their card details.

7. All is done! 🙂

8. Want our team to do this integration for you?

No problem, just visit our MemberFix product information page and send us a message!

Did you find this tutorial helpful?

User Review

100/100 (1 vote)