Conce-ui NPM | npm.io

Getting Started

Remember how we said you could get started in 30 seconds? We mean it.

Prerequisites

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.

Installation

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.

Using script tag (classic)

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

Via NPM or Yarn (modern)

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

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.

Using the CDN

Place the following code in your HTML in your <head> tag

<link rel="stylesheet" href="https://unpkg.com/conce-ui@latest/conce.css">

Importing into your 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';

🎉 Congrats! You're now using Conce. The no bullsh*t payment gateway.

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

@stripe/react-stripe-js @stripe/stripe-js preact preact-compat react-paypal-button-v2

@infinitebrahmanuniverse/nolb-conc @everything-registry/sub-chunk-1369 @zalastax/nolb-conc

3 years ago

3 years ago

3 years ago