Collecting payment details with Beanie
Learn how Beanie can help you to collect payment details for a given customer, without collecting a payment. Beanie's setup mode is useful for adding a payment method for future payments, or updating a subscription payment method.
Follow these steps to create a hosted-Beanie page that collects payment details and automatically attach it to a given customer.
Step 1: Create a Beanie Session with setup mode on your server
For security reasons, to create a setup mode Beanie Session, you must use the Beanie client/server implementation. Use the mode
parameter, with a value of setup
when creating the BeanieSession or your server.
If you want to update the default payment method of a given customer, who already has payments, you must specify the customer
parameter, with a value of either:
Your gateway customer's unique identifier
The Octobat customer's unique identifier
You can refer to the API Reference for a full list of parameters you can use to create your BeanieSession.
Your OctobatBeanie.js needs the BeanieSession id
field from the API response to redirect to the right hosted session, so make sure it's available to the HTML/JS file you call the redirectToBeanie
from.
Step 2: Add Beanie to your website
To add Beanie on your website, you must add a Javascript snippet including the id
field from the session you created in step 1.
Firstly, include OctobatBeanie.js on your website:
Then, create an instance of a Beanie object using your publishable API key from Octobat:
When your customer is ready to update their payment method, call them redirectToBeanie
using the BeanieSession id
parameter directly fetched from the session creation API call.
Typically,redirectToBeanie
should be called as a result of an event handler, such as the click on a link or a button.
It can be a good idea to disable clicks or events on the targetted button or link to avoid double redirects.
Step 3: Retrieve the attached Payment Method on your server
After a customer successfully completes their Beanie Session, Octobat has updated its default payment method on the payment gateway, and has properly setup the payment method for future charges, such as recurring ones.
Octobat redirects the customer to the URL you specified in the success_url
parameter while creating the session.
TheGET
parameter:setup_details
is transmitted, and contains a SECRET_KEY-encoded JWT with the following payload:
You can use this dataset to reconcile data from the callback to your database.
You can get more information on how to decode a JWT-encoded token here: Learn more about JWTs.
Last updated