Stripe Payment

A- A+

This add-on allows your customers to pay using Stripe for your subscriptions and posts.

Installation

Navigate to your WP dashboard->User Frontend->Modules. Find Stripe and turn on the toggle button on the top right to activate this module.

Stripe Settings

After installing and activating the Stripe add-on, navigate to –

WP-Admin Dashboard → User Frontend → Settings → Payment

Now, check the bottom of the page and enter Stripe Secret Key and Publishable Key, and Stripe Signing Secret key.

Copy the Stripe Webhook endpoint.

Now, go to your Stripe account and navigate to Developers -> Webhooks. Click on Add endpoints.

Now select the necessary credentials, follow the screenshot ( select all the authorization type as event )

Just paste the Stripe Webhook endpoint.

When you click on the endpoint, you will get the Stripe Signing Secret Key.

How to get the Stripe Secret and Publishable Key

To get the Stripe keys, visit this link https://dashboard.stripe.com/account/apikeys. If you already have an Stripe account, you will get the keys instantly after login. Otherwise, create a new account to get the secret and publishable key for Stripe.

Please Note that, you have to use the Live keys to use Stripe with WP User Frontend.

How Stripe Works with WPUF

When a customer tries to buy one of your subscription packs or use pay per post system, They will be asked to complete the payment. If you enable Stripe payment gateway, they will be able to pay using their credit cards.

The following screenshots show how the payment process looks like using Stripe.

When your subscriber or customer provides their credit card information and hit the proceed button. Stripe will complete the payment and a conformation message will be shown.

The transaction does not need any approval from admin area. You can view the transaction from-

WP Admin → User Frontend → Transaction

How to Design The Stripe Card

As Card Design deprecated due to stripe latest version security issue. We facilitated stripe element design through a filter. You can follow stripe element design and enhance your custom design which is available Here.

One main difference is, you must format their design as PHP arrays due to you are calling filters which is PHP. Besides this, all CSS property is in PascalCase.

You can now customize the stripe card design using these steps.

You need to visit this link , where you will get design codes of stripe to build custom payment forms on the web.

However, the codes are in JavaScript library. You need to convert it to PHP. And also you need to send the PHP code through Array function.

Here is the code,

$css                 = [
            'style' =>
                [
                    'base'    =>
                        [
                            'backgroundColor' => 'transparent',
                            'color'           => '#32325D',
                            'fontWeight'      => 500,
                            'fontFamily'      => 'Inter UI, Open Sans, Segoe UI, sans-serif',
                            'fontSize'        => '16px',
                            'fontSmoothing'   => 'antialiased',
                            '::placeholder'   =>
                                [
                                    'color' => '#CFD7DF',
                                ],
                        ],
                    'invalid' =>
                        [
                            'color' => '#E25950',
                        ],
                ],
        ];
        $wpuf_stripe_css     = apply_filters( 'wpuf_stripe_custom_css', $css );

Now, the data in the CSS code are all dummy. You can alter them in order to match your theme.

All you need to do is call the “wpuf_stripe_custom_css” function from your child theme or your functions.php file in order to apply this CSS code and design your stripe card.