
Code Snippet
The code snippet can be used on any website or CMS that allows you to insert HTML. First, create a Checkout Link as described in the previous section. The code snippet can directly be copied from there by clicking onCopy Embed Code
.
The snippet looks like this:
Purchase
link which will open an inline checkout when clicked.
You can style the trigger element any way you want, as long as you keep the data-polar-checkout
attribute.
Import Library
If you have a more advanced project in JavaScript, like a React app, adding the<script>
tag may not be an option. In this case, you can install our dedicated library.
PolarEmbedCheckout
helper class and manually call PolarEmbedCheckout.init()
. This will add the required handlers on elements having the data-polar-checkout
attribute.
Here is an example in React:
Instead of a Checkout Link, you can also use a Checkout Session URL created dynamically from the API.For this to work, make sure to set the
embed_origin
parameter correctly when creating the Checkout Session. For example, if your checkout page is served on the URL https://example.com/checkout
, you should set embed_origin
to https://example.com
.Advanced Integration
For users who need more control over the embedded checkout flow, thePolarEmbedCheckout
class provides several advanced features.
Programmatically creating an embed
Instead of using declarative triggers withdata-polar-checkout
attributes, you can programmatically create and control checkout instances:
Listening for checkout events
You can listen for checkout events to respond to user interactions:React Integration with event handling
Here’s a more complete React example that handles checkout events:Programmatically closing checkout
In some cases, you might need to programmatically close the checkout - for instance, if you detect that a user needs to take an action elsewhere in your application first:Enabling Wallet Payment Methods (Apple Pay, Google Pay, etc.)
Wallet payment methods such as Apple Pay and Google Pay are supported in the checkout with the following conditions:-
Apple Pay appears automatically in the checkout if:
- The user is on an Apple device
- The browser is Safari
- The device is connected to an Apple account with Apple Pay configured
-
Google Pay appears automatically in the checkout if:
- The user is on Google Chrome
- The browser is connected to a Google account with Google Pay configured
Enabling Wallet Payments for Embedded Checkout
By default, wallet payment methods (Apple Pay, Google Pay, etc.) are not enabled when you embed our checkout form into your website. For security reasons, your website domain needs to be manually validated before enabling these payment methods in embedded mode. To enable wallet payment methods on your embedded checkout, please email us with:- Your organization slug
- The domain you wish to allow for wallet payments