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
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
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
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!