This script adds the address to the billing details when Kajabi checkout form submits data to Stripe.
Kajabi by default only submits the zip code to Stripe. This script will run when the address fields are present in the checkout form and will include the address details upon submission to Stripe.
- Super tiny, < 1KB minified gzipped.
- Set and forget. No configuration required.
- Zero dependencies.
- Made by a Kajabi Hero!
- Go to Kajabi Admin Settings -> Checkout Settings
- Go to the Checkout Footer Code box andcope-paste this code:
<script async src="https://cdn.jsdelivr.net/npm/osi4kjb-stripe-add-billing-address@latest"></script>
It is strongly advised to use the script from the CDN because it is automatically updated.
You can enable or disable the script on specific offers by specifying the offer slug in the configuration.
In this example offer URL, www.yourdomain.com/offers/DcTeKx7o/checkout
, the DcTeKx7o
is the offer slug. You may combine more slugs using a comma.
Add the data-enabled-offers
attribute in the script tag as shown below.
<script async src="https://cdn.jsdelivr.net/npm/osi4kjb-stripe-add-billing-address@latest"
data-enabled-offers="zWPgUzB2,DcTeKx7o"
></script>
Here's the behavior of this configuration:
-
data-enabled-offers
not specified in script tag = Script will run on ALL offers -
data-enabled-offers
is blank = Script will run on ALL offers -
data-enabled-offers
has some slugs = Script will only run on these offers
Add the data-disabled-offers
attribute in the script tag as shown below.
<script async src="https://cdn.jsdelivr.net/npm/osi4kjb-stripe-add-billing-address@latest"
data-disabled-offers="zWPgUzB2,DcTeKx7o"
></script>
Here's the behavior of this configuration:
-
data-disabled-offers
not specified in script tag = Ignored, proceed in checkingdata-enabled-offers
-
data-disabled-offers
is blank = Ignored, proceed in checkingdata-enabled-offers
-
data-disabled-offers
has some slugs = Script will not run on these slugs regardless ofdata-enabled-offers
setting.
<!-- Only runs on Offer zWPgUzB2, disabled on DcTeKx7o, will not run with other offers --->
<script async src="https://cdn.jsdelivr.net/npm/osi4kjb-stripe-add-billing-address@latest"
data-enabled-offers="zWPgUzB2"
data-disabled-offers="DcTeKx7o"
></script>
<!-- Only runs on Offer aW3dfgvB, disabled on DcTeKx7o, also disabled on zWPgUzB2 because disable config takes precedence, and will not run with other offers --->
<script async src="https://cdn.jsdelivr.net/npm/osi4kjb-stripe-add-billing-address@latest"
data-enabled-offers="aW3dfgvB,zWPgUzB2"
data-disabled-offers="DcTeKx7o,zWPgUzB2"
></script>
<!-- Will run on all offers except DcTeKx7o and zWPgUzB2 --->
<script async src="https://cdn.jsdelivr.net/npm/osi4kjb-stripe-add-billing-address@latest"
data-enabled-offers=""
data-disabled-offers="DcTeKx7o,zWPgUzB2"
></script>
- For merchants whose Stripe accounts were registered in a country that requires the complete billing address of the customers. Stripe India accounts are an example of this.
- For other regular Stripe accounts that needs the complete address for automation. For example, when Stripe is connected to Zapier or other webhooks that needs the address to be passed on the next workflow like automated shipping or conversion tracking.
Addresses are considered personal identifiers and therefore certain jurisdictions like the EU have rules regarding sharing of information to third party processors. For most cases, addresses are not needed during payment authorizations.
However, certain countries like India requires the complete address. You may say, why not Kajabi just include the address detail for Stripe India merchants? Well, the Stripe API does not have any way to tell which country the Stripe merchant belongs and so Kajabi does not have a way to know.
- Offers with INR currency should be used by India-residents only.
- Offers with INR currency may be used by non-India residents if their card's bank issuer allows for it. Still, may or may not be successful.
- Offers with non-INR currency should be used by non-India residents only.
- Residency is usually judged using the buyer's card origin and IP address.
- In all cases, the complete address is needed.
Yes. The script only patches the code related to the billing_details
property that is sent to Stripe during form submission. You may audit the codes yourself.
If you have Stripe and Paypal enabled in your offers, the script will only work for Stripe payments.
The script only affects the codes related to your own Kajabi-linked Stripe account. It will not affect the code integration with PayPal. It will not include the address details when the form is submitted to PayPal.
If you have your own Kajabi-linked Stripe account and Kajabi Payments enabled in your offers, the script will only work for your own Stripe account's payments.
The script only affects the codes related to your own Kajabi-linked Stripe account. It will not affect the codes and routines related to Kajabi Payments even if it is based on Stripe Connect. Also, Kajabi Payments uses Kajabi's US-based Stripe account which does not need the complete address details during payment authorization.
No. The script is so tiny and compressed that it will be downloaded in an instant. It is also cached globally using a CDN so it is always available. The script also runs asynchronously and will not block rendering.
No. The script only runs in the checkout pages because it is only embedded in the Checkout Footer Code.
No. Payment Popups only works for US-based Stripe accounts. You don't need to submit the complete address to Stripe US accounts. Also, the script only runs in the checkout page and not in landing or site pages.
In the future when Payment Popups becomes available to other Stripe countries then we will make updates to this script to suit your needs.
Yes. The Embed Checkout Form Script (osi4kjb-embed-checkout-form) is a script that allows you to embed Kajabi checkout forms in any site or landing pages under the same domain. The codes do not conflict nor concern each other and therefore is compatible.
Yes. Jodee Peevor, another Kajabi Hero, created a code that allows switching of offers based on pricing using tab switchers. It works by loading the other offer's page as you click the tabs. These codes do not conflict nor concern the script and therefore is compatible.
The script must run after Kajabi's checkout codes executed. The scripts in the Checkout Footer Code runs after Kajabi's code and therefore is the ideal place to put the script.
Can I embed the actual JavaScript code as an inline script? I want to load it together with the checkout page at once.
You can but you will lose the ability to get updates. You will have to update your codes manually. I don't recommend this.
Why do I get this error in the Console: Uncaught (in promise) IntegrationError: We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted.
When the script runs it mounts the Stripe Element again with the right codes so it will submit the billing address. This detaches the old code from the Stripe Element. As a side effect, the previous event handlers of the old code can not see the Stripe Element anymore when the submit event happens. This is an expected normal occurence.
You may ask, why not unmount the old code properly before doing the fix? The reason is because the Stripe Element object is not exposed to the global space so there is no way to fire the unmount routine of the Stripe Element. Therefore it will just be mounted to the new code leaving the old code as phantoms. Again, this is an expected normal occurence.
This error does not affect how the checkout page works. It is an isolated error exception that was gracefully thrown out in the Console.
<script>
import { stripeAddBillingAddress } from 'https://cdn.jsdelivr.net/npm/osi4kjb-stripe-add-billing-address@latest/+esm';
stripeAddBillingAddress();
</script>
- Install the package using any NPM-compatible package manager
pnpm i osi4kjb-stripe-add-billing-address
- Import the function using this code
import { stripeAddBillingAddress } from 'osi4kjb-stripe-add-billing-address'
stripeAddBillingAddress()
- Run the following shell commands to clone the git repository and build the script.
git clone https://github.com/jasongodev/osi4kjb-stripe-add-billing-address.git
cd osi4kjb-stripe-add-billing-address
pnpm build
- In the
dist
folder you will see the following:
- saba.min.js: Minified script for use with browser. Self-executing.
- saba.min.js.map: Sourcemap for debugging.
- saba.mjs: ES Module script for importing in packages
Copyright 2023 Jason Go
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.