Sign Up or Login

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply
const sdkLogin = new MoonPayAuthSDK('pk_test_123', {
        devApiUrl: "http://localhost:4000",
        devAuthDomain: "http://localhost:5001",
        components: [LoginComponents.EmailOtp],
        customTheme: {
        "light": {
                "brandColor": "#7D00FF",
                "accentPrimaryColor": "#7D00FF",
                "accentSecondaryColor": "#37a970",
                "accentTertiaryColor": "#dab451",
                "accentQuaternaryColor": "#D52A3E",
                "accentLabelPrimaryColor": "#7D00FF",
                "accentLabelSecondaryColor": "#2c8759",
                "accentLabelTertiaryColor": "#be8f19",
                "accentLabelQuaternaryColor": "#d52a3e",
                "grey1Color": "#898395",
                "grey2Color": "#b0acb9",
                "grey3Color": "#bcb8c2",
                "grey4Color": "#c8c6ce",
                "grey5Color": "#e2e1e5",
                "grey6Color": "#fafafb",
                "sysBackgroundPrimaryColor": "#ffffff",
                "sysBackgroundSecondaryColor": "#f7f7f8",
                "groupBackgroundPrimaryColor": "#f7f7f8",
                "groupBackgroundSecondaryColor": "#ffffff",
                "labelPrimaryColor": "#221a39",
                "labelSecondaryColor": "#221a3999",
                "labelTertiaryColor": "#221a394d",
                "labelQuaternaryColor": "#221a392e",
                "buttonPrimaryColor": "#7D00FF",
                "buttonPrimaryHoverColor": "#6a00e6",
                "buttonLabelColor": "#ffffff",
                "dividerNonOpaqueColor": "#79788033",
                "dividerOpaqueColor": "#c6c6c8",
                "fillPrimaryColor": "#79788033",
                "fillSecondaryColor": "#79788029",
                "fillTertiaryColor": "#7876801f",
                "fillQuaternaryColor": "#76748014",
                "accentFillPrimaryColor": "#7d00ff14",
                "accentFillSecondaryColor": "#37a9701f",
                "accentFillTertiaryColor": "#dab4511f",
                "accentFillQuaternaryColor": "#d52a3e14",
                "borderColorColor": "#79788033",
                "autoTintPrimaryColor": "#000000",
                "autoTintSecondaryColor": "#ffffff"
        },
        "dark": {
                "brandColor": "#7D00FF",
                "accentPrimaryColor": "#ffffff",
                "accentSecondaryColor": "#37a970",
                "accentTertiaryColor": "#dab451",
                "accentQuaternaryColor": "#DD5565",
                "accentLabelPrimaryColor": "#c38aff",
                "accentLabelSecondaryColor": "#36a56d",
                "accentLabelTertiaryColor": "#be8f19",
                "accentLabelQuaternaryColor": "#f56172",
                "grey1Color": "#898395",
                "grey2Color": "#62606a",
                "grey3Color": "#48454d",
                "grey4Color": "#3a3a3c",
                "grey5Color": "#2d2c2e",
                "grey6Color": "#1e1c1e",
                "sysBackgroundPrimaryColor": "#1c1c1e",
                "sysBackgroundSecondaryColor": "#2c2c2e",
                "groupBackgroundPrimaryColor": "#1c1c1e",
                "groupBackgroundSecondaryColor": "#2c2c2e",
                "labelPrimaryColor": "#ffffff",
                "labelSecondaryColor": "#ebebf599",
                "labelTertiaryColor": "#ebebf54d",
                "labelQuaternaryColor": "#ebebf52e",
                "buttonPrimaryColor": "#7D00FF",
                "buttonPrimaryHoverColor": "#6a00e6",
                "buttonLabelColor": "#ffffff",
                "dividerNonOpaqueColor": "#54545899",
                "dividerOpaqueColor": "#38383a",
                "fillPrimaryColor": "#7878805c",
                "fillSecondaryColor": "#78788052",
                "fillTertiaryColor": "#7676803d",
                "fillQuaternaryColor": "#7676802e",
                "accentFillPrimaryColor": "#7676802e",
                "accentFillSecondaryColor": "#37a97024",
                "accentFillTertiaryColor": "#dab45114",
                "accentFillQuaternaryColor": "#dd56651f",
                "borderColorColor": "#54545899",
                "autoTintPrimaryColor": "#ffffff",
                "autoTintSecondaryColor": "#000000"
        }
}
      });