All Collections
Build My Storefront
Advanced Site Customization
Create a Custom Payment Provider Integration with Stripe Checkout and Zapier
Create a Custom Payment Provider Integration with Stripe Checkout and Zapier

Build a custom integration with Stripe and Zapier when you are limited to use our native integration in extraordinary situations.

Updated over a week ago

Summary

Create Products in Stripe

Create your products (subscription plans from Uscreen) and set their prices in the Stripe Dashboard.

In Stripe, navigate to the Create a product page and create two products.

Add one price for each product, each with a monthly recurring billing period. For example:

  • Monthly product:

    • Price: Standard model | 5 USD

  • Yearly product:

    • Price: Standard model | 50 USD

Create Payment Links in Stripe

You can use Payment Links to share a checkout page that requires no coding. While you can share this link in different channels, you can also associate it to a button on the custom payment you create at Uscreen with our Landing Pages feature.

Click on + Create payment link.

Then:

  1. Select + New.

  2. Fill out the product details.

  3. Click Add product.

  4. Click Create link.

Create Payment Landing Page on Uscreen

Using our Landing Pages feature, customize any template and delete all existing blocks. Then you can add a Pricing Block.

Customize your pricing cards. Then use the Button URL field to insert the links you generated in the previous stage of this guide.

Get your Stripe API keys

Stripe can integrate with your custom payment system and authenticate your requests by using API keys. There are two types: publishable and secret, and every account is provided with separate keys for testing and running live transactions.

To implement your custom payment system, you will use the Private Key in Live Mode. We recommend reading more information about API Keys in Stripe Documentation.

Connect Stripe and Zapier

Navigate to the Stripe connection page in Zapier, and click on Add Connection.

Paste the Private Key in Live Mode from the previous step. Then click on Yes, Continue.

Set up Zapier Triggers for Stripe

Navigate to the Zapier Editor and search for Stripe. Then, select the New Charge trigger event and click Continue.

Choose the Stripe account you connected to previously and click Continue.

When setting up your trigger, disable Include Failed Charges. We only want to fire the trigger on successful charges.

Now, you can test the trigger and click Continue.

Connect Uscreen and Zapier

Go to the Integrations page on your Uscreen Admin Area. Then copy the API Key.

Navigate to the Uscreen connection page in Zapier, and click on Add Connection.

Paste the API Key from the previous step. Then click on Yes, Continue.

Set up Zapier Actions for Uscreen

Search for Uscreen. Then, select the Assign User Access trigger event and click Continue.

Choose the Uscreen account you connected to previously and click Continue.

To set up your action, we recommend using the following variables:

  1. Enter the Cust Email variable from Stripe into the Email field.

  2. Enter the Billing Details Name from Stripe into the Full Name field.

  3. Select your Subscription/Bundle

  4. Insert the time your Zap runs into any action by using the {{zap_meta_human_now}}+1mo command, where +1mo is a time modifier that adds one month to the next due date for a recurring subscription payment.

  5. Set the Charge Subscriptions Outside Of Uscreen field to True.

NOTE: When you add the {{zap_meta_human_now}} command to a field, it will show as "no data." However, the timestamp will be displayed when you test the step or when the Zap runs.

Test your new automation, and if successful, you can turn it on.

Set up redirects

This step is crucial to redirect your clients from the standard checkout and billing pages to your custom ones.

As a reference, you can use the code snippet below. Please insert it at the top of the Head Code Snippet.

<script>
function joinRedirect() {
if(document.location.href.indexOf('join') > -1) {
document.location.href = '/pages/subscribe';
}
setTimeout(() => joinRedirect(), 500)
}
joinRedirect();
</script>

You may want to replace /pages/subscribe with the URL slug of your page. Do not use /pages/join.

NOTE: Our support scope does not cover custom web development. If you require additional assistance, please check our guide about Hiring a Developer for Advanced Custom Changes.

Additionally, you may want to create an external Stripe Customer Portal.

Pitfalls

Our native payment provider integrations provide are connected to our monetization algorithms. Therefore, our sales reports, KPI calculation (such as MRR), and marketing automation features rely on our internal logic.

When using a custom payment provider integration, those features cannot be connected with your system.

Beyond Zapier

Depending on the volume of your sales, using Zapier to automate this process may increase your operation costs. We recommend evaluating if setting up a custom microservice with your web developer is more beneficial for you. Stripe provides detailed instructions to integrate with their billing system.

If you are working with a web developer to build a custom checkout workflow, this help guide covers the minimum requirements for the architecture of your payment provider integration.

Did this answer your question?