Embed in Web App

Use our web SDK to embed the buyer’s payment method form into your web application. First, add our web SDK to your document’s <head> tag:

<script src="https://checkout.sandbox.manifestfinancial.com/checkout.js"></script>

<script src="https://checkout.manifestfinancial.com/checkout.js"></script>

Embed

Now you can initialize the SDK and embed the buyer’s payment method form into an iframe on your page:

const checkout = new MCheckout();
const config = {
    iframeId,
    embedUrl,
    parentDomain,
    onResize,
    onPaymentMethodUpdated,
    options
};
checkout.embed(config);

string

required

The ID of the iframe element to embed the buyer’s payment method form into.

string

required

The payment_method_embed_url to embed.

string

required

The domain of the parent page. This page must be served over HTTPS. Please note that for Apple Pay to work, the parent domain must be added to your merchant account by Manifest. Please contact developer@manifestfinancial.com to begin verifying your domain.

function

The height of the content has changed. The new values are passed in as an object with width and height properties. Depending on your design, you may need to resize the embedded view to match the new height.

function

The buyer has successfully updated their payment method; you can navigate to the next step of your process.

object

An object of customization options to customize the buyer’s payment method form.

Example

const config = {
    iframeId: "checkout-iframe",
    embedUrl: payment_method_embed_url,
    parentDomain: "my-app.com",
    onResize: ({ width, height }) => {
        // resize your iframe, etc here
    },
    onPaymentMethodUpdated: () => {
        // update your UI here
    },
    options: {
        font: "Poppins",
        buttonBorderRadius: "22px",
        // other customization options
    }
}

checkout.embed(config);

Check Digital Wallet Support (optional)

There is an optional function that allows you to check if the buyer’s device supports digital wallets — useful if you’d like to show a different UI based on support.

checkout.checkDigitalWalletSupport().then((results) => {
    const { applePay, googlePay, enabled } = results;
    // Update your UI here
}

It returns a promise that resolves to an object with the following properties:

boolean

Whether the buyer’s device supports Apple Pay.

boolean

Whether the buyer’s device supports Google Pay.

boolean

Whether the buyer’s device supports any digital wallets.

Documentation

Sending Money

Receiving Money

Automations

Resources

Reference

Embed

Example

Check Digital Wallet Support (optional)

​Embed

​Example

​Check Digital Wallet Support (optional)

Embed

Example

Check Digital Wallet Support (optional)