Venmo integration with Chargebee.js

Venmo is a US-based peer-to-peer (P2P) payment solution that allows users to transfer and receive money easily and quickly via a smartphone application. It is one of the most popular payment methods in the US.

This tutorial guides you on the following:

• Use Chargebee.js to integrate the Venmo payment method on your website to collect payments.

• Create a subscription after the user checks out post making a purchase.

Gateway prerequisites

Chargebee currently supports Venmo services via Braintree. Learn more about how to connect Venmo via Braintree.

Set up Chargebee.js

Include the Chargebee.js script on your page and initialize a Chargebee instance before you start. For the script tag, the Chargebee.init options, and the tearDown() caveat, see Set up Chargebee.js.

Create a Payment Intent

You should create a payment intent before submitting the form to authorize the payments.

payment_intent performs the essential function of tracking different events involved in a transaction. This includes:

• Automatically changing its status based on the outcome of authorization and capture events.

• Automatically refunding in case of an error post-payment.

A payment_intent can be created at your server-side using create a payment intent API and returned to the client side. The payment method handler uses the created payment_intent internally to perform authorization.

Here's the sample code to create a payment_intent.

Call Chargebee API to create a payment intent (server)

curl https://{site}.chargebee.com/api/v2/payment_intents \
  -u {fullaccess_api_key}: \
  -d amount=500 \
  -d currency_code="USD" \
  -d payment_method_type="venmo"

Call your backend to fetch the payment intent (client)

function createPaymentIntent() {
  return fetch("/payment-intents", {
    method: "POST",
    body: JSON.stringify({
      amount: 500,
      currency_code: "USD",
      payment_method_type: "venmo",
    }),
  })
    .then(function (response) {
      return response.json();
    })
    .then(function (responseJson) {
      return responseJson.payment_intent;
    });
}

Authorize payment intent

Follow these steps to integrate Venmo payments into your website.

1. Create a container in DOM to load the Venmo button

Create a DOM container to hold and display the Venmo button component.

<div id='venmo-button'></div>

2. Setup Venmo

Set up Venmo on your Checkout page using the below steps:

a. Load venmo integration

load venmo integration using cbInstance.load("venmo").

b. Set payment intent

Pass the payment_intent object to venmoHandler.setPaymentIntent(payment_intent).

c. Mount the payment button

Use the venmoHandler.mountPaymentButton function to mount the Venmo button inside the container element. This function takes the query selector for the container element as an input parameter.

cbInstance.load('venmo')
        .then((venmoHandler) => {
                return createPaymentIntent().then((intent) => {
                        venmoHandler.setPaymentIntent(intent);
                        return venmoHandler
                                .mountPaymentButton("#venmo-button")
                                .then(() => venmoHandler.handlePayment());
                });
        })
        .then((data) => console.log("success", data))
        .catch((error) => console.log("error", error));

3. Handle Payment

Use the venmoHandler.handlePayment function to initiate the transaction. The handlePayment function resolves to an authorized payment intent once the user authorizes the payment using the Venmo wallet. Learn more about the Venmo Handler.

cbInstance.load('venmo')
        .then((h) => {
                return createPaymentIntent().then((payment_intent) => {
                        h.setPaymentIntent(payment_intent);
                        return h.mountPaymentButton("#venmo-button")
                                .then(() => h.handlePayment());
                });
        })
        .then((intent) => console.log("success", intent))
        .catch((error) => console.log("error", error));

cbInstance.load('venmo')
        .then((h) => {
                return createPaymentIntent().then((payment_intent) => {
                        h.setPaymentIntent(payment_intent);
                        return h.mountPaymentButton("#venmo-button").then(() => h.handlePayment({
                                callbacks: {
                                        success: (intent) => console.log("success", intent),
                                        error: (error) => console.log("error", error),
                                }
                        }));
                });
        });

Create a subscription (server)

Pass the ID of the successfully authorized payment_intent to Chargebee’s create a subscription API.

curl  https://{site}.chargebee.com/api/v2/customers/__test__8asz8Ru9WhHOJO/subscription_for_items \
     -X POST \
     -u {site_api_key}: \
     -d payment_intent[id]="<Id of authorized payment_intent recieved in last step.>" \
     -d subscription_items[item_price_id][0]="basic-USD" \
     -d subscription_items[billing_cycles][0]=2 \
     -d subscription_items[quantity][0]=1 \
     -d subscription_items[item_price_id][1]="day-pass-USD" \
     -d subscription_items[unit_price][1]=100