Start accepting Stripe & PayPal payments on your website in 30 seconds
Explore the docs »
View Demo
·
Report Bug
·
View Playground
Table of Contents
Remember how we said you could get started in 30 seconds? We mean it.
In order to use Conce's Drop-in UI, you need to sign up to an account on our website.
Once you're through the setup process, you'll be provided with a Conce public key. Have this on hand when getting started.
Secondly, be sure to grab your Stripe public key and PayPal public key as well.
When it comes to installing Conce, you've got two choices. Which one you should choose largely depends on your tech-stack.
If you're using NPM or Yarn to manage your dependencies, then proceed with the second step. If you've got no idea what I'm talking about, that's okay too – option one is for you.
-
Place the following code in your HTML at the end of your
<body>tag or in<head><script src="https://unpkg.com/conce-ui@latest/conce.min.js"></script>
-
Mount when you're looking to load the UI. Place the following code after the above code snippet.
<script type="application/javascript"> window.Conce.mount({ publicKey: 'xxx', // Conce Public Key currency: 'USD', amount: 1000, stripe: { publicKey: 'pk_xxx', // Stripe Public Key }, paypal: { publicKey: 'xxx', // PayPal Public Key }, successCallback: function () { // What would you like to do, on success? console.log('success'); }, errorCallback: function (error) { // What would you like to do, if there's an error? console.log('error', error); }, }); </script>
-
Move onto Styling
-
Install Conce UI via NPM
npm install conce-ui # OR via Yarn (preferred) yarn add conce-ui -
Import in your JavaScript/TypeScript file
import { mount } from 'conce-ui';
-
Mount when you're looking to load the UI
mount({ publicKey: 'xxx', // Conce Public Key currency: 'USD', amount: 1000, stripe: { publicKey: 'pk_xxx', // Stripe Public Key }, paypal: { publicKey: 'xxx', // PayPal Public Key }, successCallback: function () { // What would you like to do, on success? console.log('success'); }, errorCallback: function (error) { // What would you like to do, if there's an error? console.log('error', error); }, });
-
Move onto Styling
By default, Conce comes unstyled (it's hella ugly). We know, that some of you will want to have a fully custom checkout experience – and that's okay!
Good news! We've also got a light theme (and more coming soon!) ready to be used in just a single line of code. It's carefully crafted, and unopinionated.
- Place the following code in your HTML in your
<head>tag<link rel="stylesheet" href="https://unpkg.com/conce-ui@latest/conce.css">
- In your CSS file
@import url("https://unpkg.com/conce-ui@latest/conce.css"); /* OR if you're using NPM or Yarn */ @import 'conce-ui/conce';
You're ready to accept PayPal and Stripe payments. Here's a list of things you won't need to do from now on. Ever.
❌ Read Stripe's rather nice documentation
❌ Read PayPal's absolutely horrid documentation (if you've ever read it, you know what I mean)
❌ Attempt to maintain your backend's compatibility with both platforms
❌ Build UI that works with both platforms
❌ Setup webhooks on both platforms
Instead...
✅ One documentation
✅ One platform to manage all your webhooks
✅ One unified webhook response
✅ One UI library to maintain
💖 Thank you for using Conce