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>

​
Embed

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

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

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

​
embedUrl
string
required

The payment_method_embed_url to embed.

​
parentDomain
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.

​
onResize
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.

​
onPaymentMethodUpdated
function

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

​
options
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:

​
applePay
boolean

Whether the buyer’s device supports Apple Pay.

​
googlePay
boolean

Whether the buyer’s device supports Google Pay.

​
enabled
boolean

Whether the buyer’s device supports any digital wallets.