abowire
Version:
This is the official **Abowire Javascript SDK**, which makes it easy to connect to the Abowire **GraphQL API** and includes all the required dependencies you need.
99 lines (80 loc) • 3.05 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Abowire Web SDK - Kitchensink</title>
</head>
<body>
<style>
#test-style {
--abowire-button-width: 300px;
--abowire-button-height: 50px;
--abowire-button-border-radius: 0px;
--abowire-button-padding: 0px 0px;
}
</style>
<p>You can log into abowire with <code>Abowire.login()</code>:</p>
<button id="login-button" onclick="abowire.login()">Login with Abowire</button>
<pre id="user"></pre>
<button style="display: none" id="logout-button" onclick="abowire.logout()">Logout</button>
<p>You can customize your buttons with plain CSS:</p>
<pre>
<style>
#test-style {
--abowire-button-width: 300px;
--abowire-button-height: 50px;
--abowire-button-border-radius: 0px;
--abowire-button-padding: 0px 0px;
}
</style>
</pre
>
<p>The button can have any text you like:</p>
<pre>
<abowire-button product="free">Get started for free</abowire-button>
<abowire-button product="scale">Subscribe to Scale</abowire-button>
</pre
>
<!-- <abowire-button product="free">Get started for free</abowire-button>
<abowire-button product="scale">Subscribe to Scale</abowire-button> -->
<p>You can also customize the style of the button using CSS:</p>
<pre>
<abowire-button id="test-style" product="enterprise">Subscribe to Enterprise</abowire-button>
</pre
>
<!-- <abowire-button id="test-style" product="enterprise">Subscribe to Enterprise</abowire-button> -->
<p>
You can also render the checkout directly in the page using the
<code><abowire-checkout></code> tag:
</p>
<abowire-checkout locale="de" country="de" redirect-url="/success" step="billing" />
<pre>
<script type="text/javascript" src="/abowire.js?clientId=abowire-platform-checkout&callback=initAbowire" async></script>
</pre
>
<script>
async function initAbowire() {
const tokens = await abowire.getTokens();
console.log('tokens', tokens);
if (tokens) {
document.getElementById('login-button').setAttribute('style', 'display:none');
document.getElementById('logout-button').setAttribute('style', 'display:block');
document.getElementById('user').innerHTML = JSON.stringify(tokens.profile, null, 2);
}
}
</script>
<!-- <script
src="/abowire.js#clientId=abowire-platform-app&accountId=account_01gyfxzktxv0y6yzk636mn4p76&callback=initAbowire"
async
></script> -->
<script type="module">
import { Abowire } from '/browser.js';
const abowire = new Abowire({
clientId: 'abowire-platform-app',
accountId: 'account_01gyfxzktxv0y6yzk636mn4p76',
});
</script>
</body>
</html>