Build

PubNub Functions: Use Stripe to Accept In-App Payments

4 min read Chandler Mayo on Mar 15, 2019
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

Seamlessly add in-app payment functionality with Stripe Charge and PubNub Functions.

This tutorial shows how to create a Stripe charge using PubNub Functions. Use cases for this Function include selling products or services, restricting access to a web page, selling a file, and accepting donations.

What are PubNub Functions?

PubNub Functions is a serverless environment for executing functions. PubNub Functions are JavaScript event handlers that can be executed on in-transit PubNub messages or in the request/response style of a RESTful API over HTTPS. If you are familiar with Node.js and Express, the On Request event handler development will be second nature.

Here are a few things you could use PubNub Functions to do:Functions Logo

  • Translation – Send a chat app message in English, and the recipient receives it in Spanish.
  • Secure API Calls – Trigger an alert when a secure message meets certain criteria – email, text message, tweet, mobile push, etc.
  • Network Logic – Tally up millions of votes or question answers during real-time audience interaction.
  • Serve Data – Build a globally replicated, low latency, production REST API in 5 minutes.

Advantages of PubNub Functions:

  • Reduced Cost: Pay for what you use and not for idle servers.
  • Decreased Time to Market: Focus on building your product and not managing the infrastructure to support it.
  • Reduced LatencyYour users are global. Your product should be global. PubNub operates points of presence across the globe.

Getting Started

Check out the Stripe Charge Block for a faster way to get started.

  • You’ll need a Stripe account and API keys. You don’t need to activate your account unless you plan to go beyond testing. The test keys will work fine for this project.
  • You’ll need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys from the PubNub Admin Dashboard. Sign up using the form below.

Design Pattern

  1. A user enters their payment details and a preferred username into a frontend. The payment details are sent directly to Stripe using Stripe.js. Stripe.js then tokenizes the sensitive information so that it won’t be exposed when sent to a backend to initiate a charge.
    • It is against PubNub Terms and Conditions to send credit card information including credit card numbers, CSV numbers (three-digit codes for Visa and MasterCard, four-digit code for American Express) and magnetic stripe information through the PubNub Network.
  2. The token is used by our Stripe Charge Function, hosted in PubNub Functions, to initiate a charge with Stripe.
  3. The charge is processed by Stripe and our Stripe Charge Function receives the result.
  4. The payment status is then forwarded to the frontend.

Setting up the Stripe Charge Function

Go to your PubNub Admin Dashboard and select your app. Then click on the keyset that was created for that app.

Next, click “Functions” in the sidebar and then create a new module named “Stripe”.

Create a function with the name “Stripe”, set the event type to “On Request”, and set the path to “stripe”.

Delete any code in the editor and replace it with a function to create a Stripe charge:

// DO NOT USE THIS CODE CLIENT SIDE. FOR A PUBNUB SERVERLESS ENV ONLY. 
// Set the module event type to "On Request".
// Create a token with Stripe.JS: https://stripe.com/docs/stripe-js
// Or use a test token: token=tok_visa
export default (request, response) => {
    const vault = require("vault");
    const xhr = require("xhr");
    const token = request.params.token;
    return vault.get("stripe_secret_key").then((apiKey) => {
        const http_options = {
            "method": "POST",
            "headers": {
                "Authorization": "Bearer "+apiKey,
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            "body": "amount=100&currency=usd&source="+token,
        };
        return xhr.fetch("https://api.stripe.com/v1/charges", http_options).then((resp) => {
            if (resp.status == 200) {
               // Record that the user has paid and do something.
            }
            response.status = resp.status;
            return response.send(resp);
        });
    });
};

You’ll need to add your Stripe secret key to the PubNub vault. Click on “My Secrets” in the function editor and add a key named “stripe_secret_key” with your Stripe secret key.

Edit the query string to change the currency and charge amount.

How to Test the Stripe Charge Function

Use a Stripe test token to test the function.

Use Curl from your Terminal to send a test request to the function:

  • Set the query parameter to “?token=tok_visa”
  • Use POST to make the request.
  • Replace “YOUR_SUB_KEY_HERE” with your Subscribe Key from your PubNub Admin Dashboard.

curl -X POST https://pubsub.pubnub.com/v1/blocks/sub-key/YOUR_SUB_KEY_HERE/stripe?token=tok_visa

How to Build a Frontend to Accept Stripe Charges

The easiest way to create card input form you can use with this function is by using Stripe Checkout.

What’s Next?

Here are a few ideas:

Have suggestions or questions about the content of this post? Reach out at devrel@pubnub.com.

More from PubNub

Top Trends to Engage Your App Users
InsightsSep 27, 20224 min read

Top Trends to Engage Your App Users

Take a look at the top trends that are the most effective in attracting customers and reducing churn, and how you can incorporate...

PubNub Staff

PubNub Staff

Comparing Game Engines: Unity vs Unreal vs the Rest
Real-Time Gaming BlogSep 21, 20225 min read

Comparing Game Engines: Unity vs Unreal vs the Rest

Comparing the major game engines: Unity vs Unreal Engine vs Corona SDK vs GameMaker Studio, including the benefits and cons of...

PubNub Staff

PubNub Staff

Python Socket Programming: Client, Server and Peer Libraries
BuildSep 21, 20226 min read

Python Socket Programming: Client, Server and Peer Libraries

Sockets (aka socket programming) enable programs to send and receive data, bi-directionally, at any given moment. This tutorial...

PubNub Staff

PubNub Staff