Beanie serverless integration

Use Beanie serverless integration to sell products and subscriptions defined in your Stripe Dashboard

The client-only integration has several limitations. This integration does not support associating payments with existing Customers, or customize trial periods for subscriptions. Dynamic pricing (inline ad-hoc prices) is also not supported, so the client/server integration may be a better suit for very large catalogs.

Step 1: Configure products and plans in your Stripe account

Beanie works only with the Stripe payment provider. Stripe provides a product management feature that allows you to create plans for recurring payments or products for one-time purchase. You'll be able to create these products on your Stripe Dashboard. Be sure to be in the correct environment when you create your Stripe products.

Step 2: Add Beanie to your website

To use Beanie on your website, you must add a snippet of code that includes the desired price or plan IDs. You can use the Dashboard to generate the necessary code, or you can write it yourself.

Generate in Dashboard

Serverless Beanie relies on an optional BeanieConfiguration object. Its goal is to provide a set of options to make sure your Beanie checkout page behaves as expected. Being stored on our servers, a BeanieConfiguration ensures a customer cannot mitigate a configuration and enables lots of configuration options for a serverless usage of Beanie. You can share a same configuration between different prices or plans, as the Beanie Session's behaviour is the loading of the nested configuration options along with the items sold.

In order to use Beanie in a serverless context, go to: Octobat Configuration > Collect payments > BeanieConfiguration (https://app.octobat.com/configuration/beanie_configurations). You'll be able to "add a Beanie Configuration".

Beanie Configuration

The form above allows you to change the options of your Beanie hosted payment page.

Option name	Option Description	Default Value
Success URL	The URL returned after your client pays with success	empty
Cancel URL	The URL returned after your client cancels the payment process	empty
Save payment method	Whether you need to save the payment method of the customer in the PSP's vault for future use. If value is optional, the customer will have a checkbox to decide if they want or not to save their credit card for future use. Accepted values: always, optional, never	Never
Payment method future usage	If the payment method is saved, whether it will be used when the customer is always on your website on_session, or if you may charge them when they are offline off_session	empty
Billing Address Collection	The "Required" option adds these fields to your payment form: Street City Zip State The "Auto" option displays only the country field.	Auto
Tax Calculation Option	Include or exclude the tax amount of the price. More information on this page:What is the difference between tax included vs tax excluded?	Inclusive
Multiple Evidence Collection	If "Yes", in order to calculate the correct tax rate, the evidences will be: Billing Address Country Credit Card Country IP Address Country If "No", just the Billing Address Country.	Yes
Validate Tax Number	If "Yes", check the validity of the tax number via the VIES API. If "Format", only check the regular expression of the string. NB: Depending on your choice, the customer with a correct tax number will be a business. With all consequences that it will have on the tax rate applied.	Yes
Accept Coupon?	If checked, your Beanie page will accept coupon from Stripe (Coupons) and Octobat (Coupons). Else, no coupon will be recognized.	Unchecked

Then, you'll be able to use this configuration with Beanie. Click the "Use with Beanie" button. It will display a popup.

Beanie Configurations List

Enter Stripe price IDs (for one-time charges) or Stripe plan IDs (for subscriptions) that you've created in the Step 1. Then, click the "Generate code integration" button in order to generate a snippet that you can add to your website.

Beanie Snippet Code

Copy and paste the snippet into the body of a web page to add a payment button that redirects the customer to your Beanie hosted payment page.

The snippet calls a function that when invoked redirects the customer to Beanie. When your customer successfully completes their payment, they are redirected to the success URL that you specified when calling redirectToBeanie. Typically, this is a page on your website that informs the customer that their payment was successful. The cancel URL is the page where Beanie redirects customers when they cancel the payment process.

Write it yourself

NB: With this method, you won't be able to configure Beanie options like the Dashboard allows it.

Beanie relies on octobat-beanie.js. To get started, include the following script tag on your website and it should always be loaded directly from https://cdn.jsdelivr.net:

<script src="https://cdn.jsdelivr.net/gh/0ctobat/octobat-beanie.js@latest/dist/octobat-beanie.min.js"></script>

Next, create an instance of the OctobatBeanie object by providing your publishable API key as the first parameter:

var beanie = OctobatBeanie("oc_test_pkey_9Y7wpt3ohss6iVRe3XsbUQtr");

When your customer is ready to pay, call redirectToBeanie (via a click on a link or a button for example) to begin the checkout process. Pass it an array of objects that specify the price or plan IDs and the quantity of each item that the customer wishes to purchase:

beanie.redirectToBeanie({
  items: [
    { price: 'price_123', quantity: 1 } // For one-off charges only
    // { plan: 'price_456/plan_456', quantity: 7 } => Subscriptions-only
  ],
  successUrl: 'https://example.com/success',
  cancelUrl: 'https://example.com/cancel',
})
.then(function (result) {
  if (result.error) {
    // If `redirectToBeanie` fails due to a browser or network
    // error, display the localized error message to your customer.
    var displayError = document.getElementById('error-message');
    displayError.textContent = result.error.message;
  }
}).catch(function(error) {
  // If `redirectToBeanie` can't be triggered because of invalid parameters
  // or implementation, error, display a generic error message to your customer,
  // and report the error to the console for debugging purposes, or send it to Sentry
  // Sentry.log(error)
  console.log(error)
  var displayError = document.getElementById('error-message');
  displayError.textContent = "Implementation error, please contact website administrator"
})

Important notice: Stripe new Price APIs / dashboard behaviour The items[].price key is only valid for one-time charges relative product prices. If you created a recurring-based Stripe Price, you must use the items[].plan key.

Older Stripe objects (which IDs start with sku_xxxx or plan_xxxx) are still available using respectively items[].sku and items[].plan keys.

The snippet calls a function that when invoked redirects the customer to Beanie. When your customer successfully completes their payment, they are redirected to the success URL that you specified when calling redirectToBeanie. Typically, this is a page on your website that informs the customer that their payment was successful. The cancel URL is the page where Beanie redirects customers when they cancel the payment process.