Add Venmo To Your Solidus Store

PayPal has contributed to Solidus massively over the last few years, helping us revitalize both solidus_paypal_commerce_platform and solidus_paypal_braintree extensions. Entering into the next PayPal phase that we promised, we are excited that both extensions now support Venmo!

This latest addition to their SDK and Braintree allows another streamlined payment option for your customers at no additional cost.

Having multiple finance options is vital as it allows for a higher conversion rate. As well as this, Venmo offers some unique features.

What is Venmo?

Venmo allows customers to make payments in a mobile app effortlessly, and uniquely, the buyer has the option to split or share the purchase.

It is currently available to only US PayPal merchants and buyers. However, with its recent rise, every 1 in 5 US citizens already use it each year.

If you meet the eligibility requirements you can integrate Venmo into your store where buyers will gain the following experiences:

Mobile checkout:

• Buyer clicks the Venmo button and their mobile device switches to the Venmo app.
• Buyer sees a payment review on the Venmo app and completes it.
• Buyer gets switched back to your website to complete the payment.

Desktop checkout:

• Buyer clicks the Venmo button on the desktop to generate a QR code.
• Buyer scans the QR code from the Venmo mobile app.
• Buyer completes the payment review on the Venmo app.
• Buyer completes the payment by the website on desktop.

Simple!

How to integrate Venmo?

If you don't have solidus_paypal_braintree or solidus_paypal_commerce_platform installed and setup already - do that first and then continue with the integration. Unsure which to install?

SolidusPaypalBraintree

For this extension, Venmo is accessible to your payment page by two ways:

1. Braintree native Venmo integration; and
2. Enabling Venmo as a funding source/finance option on your PayPal buttons if you are using "checkout" paypal_flow.

The benefit of the native Braintree integration is that it supports vaulting unlike Venmo as a funding source.

First, update the extension by running bundle upgrade --conservative solidus_paypal_braintree.

Native Braintree Venmo integration

1. Enable Venmo in your Braintree account(sandbox and production).
2. Enable Venmo in the admin panel:
   • Click Braintree.
   • Tick Venmo.
   • Click Update.
3. Ensure the _venmo_button.html.erb partial is being rendered appropriately.

If your store is a SPA or uses this on checkout, you may need to set your Braintree payment method venmo_new_tab_support preference to false.

Venmo as a PayPal funding option

If PayPal is enabled already and you are using the "checkout" paypal_flow. The Braintree store PayPal messaging preference must be set to false for Venmo to be available.

1. Go to the admin panel.
2. Click Settings > Payments.
3. Click the edit icon on your Solidus PayPal Braintree payment method.
4. Tick the Enable venmo funding checkbox.
5. Click Update.

SolidusPaypalCommercePlatform

First, update the extension by running bundle upgrade --conservative solidus_paypal_commerce_platform.

1. Go to the admin panel.

2. Click Settings > Payments.

3. Click the edit icon on your Solidus PayPal Braintree payment method.

4. Set Venmo standalone to: - enabled (adds the Venmo button under other PayPal funding sources); or - render only standalone (only shows the Venmo button and hides other PayPal funding sources - only recommended when you only have US customers).

5. Untick Display credit messaging (must be disabled for Venmo to be available).

6. Click Update.

Integrated!

You should now see a Venmo button on the payment page! Either with other PayPal buttons or on its own depending on your extension and integration choice.

Testing Venmo

We recommend testing all of the following. Ensure that:

• the Venmo checkout button opens a modal;
• you can do a full transaction on checkout (see below);
• you can void and refund Venmo transactions; and
• if you are using the native Braintree Venmo integration:
  1. you can save the payment source to a user's wallet;
  2. saved Venmo wallet payment sources appear correctly; and
  3. saved Venmo payment sources can be reused for another order.

Testing a full transaction when Venmo is a PayPal funding source:

By default, PayPal looks at the buyer's IP geolocation to determine whether Venmo should be available. However, you may want to mock your country to test the Venmo integration. Thanks to the new force_buyer_country preference available to both extension's Payment Method, this is simple:

1. Go to your extension's payment method's preferences
2. Set the force buyer country preference to any [https://developer.paypal.com/docs/business/javascript-sdk/javascript-sdk-configuration/#locale](country code that PayPal allows); such as "US" or "IT".
3. Click the Update button.

This preference has no effect on production.

Testing a full transaction with Braintree's native Venmo integration:

You'll need the Venmo app in order to fully test the integration. However, if you are outside of the US, this is not an option. You can fake the tokenization by:

• Altering the venmo_button.js file to call the handleVenmoSuccess function instead of tokenizing and inserting the fake nonce appropriately; or
• Manually:
  1. Update the #venmo_payment_method_nonce hidden input value to "fake-venmo-account-nonce".
  2. Remove the disabled attribute from each .venmo-fields input.
  3. If you have enabled Credit Cards (hosted fields): - Add the disabled attribute to each .hosted-fields input. - Remove its submit button listener: $('#checkout_form_payment').off('submit').

The Future

Thanks to PayPal and Braintree SDK additions and continued support to Solidus and extensions, you will continue to see new exciting features soon! So stay tuned and continue building your incredible Solidus store!