Skip to content

Commit

Permalink
Deploying to gh-pages from @ 7b958b1 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
@MeganSteenkamp
MeganSteenkamp committed Aug 26, 2024
1 parent f82f36a commit 74e615c
Showing 1 changed file with 14 additions and 11 deletions.
25 changes: 14 additions & 11 deletions guides/ecommerce-website/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
});
</script><main class="flex flex-col min-h-full w-full pt-16 md:pl-64 xl:pl-80"><div class="flex items-center max-h-72 overflow-hidden"><img src="/default-cover.svg" aria-hidden="true" class="object-cover m-0 w-full h-24 md:h-full"></div><div class="relative mx-auto desktop-gutters flex justify-center"><div class="min-w-0 max-w-2xl flex-auto px-8 pb-16 pt-8 xl:pt-16 lg:max-w-none"><article><header class="mb-9 space-y-1"><p class="type-overline text-content-primary">
Guides
</p><h1 class="font-display text-3xl tracking-tight text-slate-900">eCommerce</h1></header><astro-island uid="ZSnh9c" component-url="/_astro/Prose.8cdff347.js" component-export="default" renderer-url="/_astro/client.e0200ae5.js" props="{}" ssr="" client="load" opts="{&quot;name&quot;:&quot;Prose&quot;,&quot;value&quot;:true}" await-children=""><div class="prose prose-slate max-w-none prose-headings:font-display prose-headings:font-normal prose-h2:scroll-mt-16 prose-h2:mt-8 prose-h2:pt-8 prose-h2:border-t prose-h3:scroll-mt-20 prose-h4:scroll-mt-20 prose-lead:text-slate-500 prose-a:no-underline prose-a:text-content-primary hover:prose-a:no-underline prose-img:mb-8 prose-img:mx-auto prose-img:object-contain"><!--[--><astro-slot><p>Centrapay enables businesses to process payments with connected Centrapay assets online. To process online payments, businesses need to integrate with one of our eCommerce payment flows.</p>
</p><h1 class="font-display text-3xl tracking-tight text-slate-900">eCommerce</h1></header><astro-island uid="Zju3u6" component-url="/_astro/Prose.8cdff347.js" component-export="default" renderer-url="/_astro/client.e0200ae5.js" props="{}" ssr="" client="load" opts="{&quot;name&quot;:&quot;Prose&quot;,&quot;value&quot;:true}" await-children=""><div class="prose prose-slate max-w-none prose-headings:font-display prose-headings:font-normal prose-h2:scroll-mt-16 prose-h2:mt-8 prose-h2:pt-8 prose-h2:border-t prose-h3:scroll-mt-20 prose-h4:scroll-mt-20 prose-lead:text-slate-500 prose-a:no-underline prose-a:text-content-primary hover:prose-a:no-underline prose-img:mb-8 prose-img:mx-auto prose-img:object-contain"><!--[--><astro-slot><p>Centrapay enables businesses to process payments with connected Centrapay assets online. To process online payments, businesses need to integrate with one of our eCommerce payment flows.</p>
<div class="not-prose my-5 flex p-5 space-x-5 bg-surface-secondary rounded-lg"><svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-md text-content-secondary w-6 h-6"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 0.75C4.44365 0.75 0.75 4.44365 0.75 9C0.75 13.5563 4.44365 17.25 9 17.25C13.5563 17.25 17.25 13.5563 17.25 9C17.25 4.44365 13.5563 0.75 9 0.75ZM2.25 9C2.25 5.27208 5.27208 2.25 9 2.25C12.7279 2.25 15.75 5.27208 15.75 9C15.75 12.7279 12.7279 15.75 9 15.75C5.27208 15.75 2.25 12.7279 2.25 9ZM7.75 5.75C7.75 5.19771 8.19772 4.75 8.75 4.75C9.30228 4.75 9.75 5.19771 9.75 5.75C9.75 6.30229 9.30228 6.75 8.75 6.75C8.19772 6.75 7.75 6.30229 7.75 5.75ZM7.25 8C7.25 7.58579 7.58579 7.25 8 7.25H8.5C9.19036 7.25 9.75 7.80964 9.75 8.5V11C9.75 11.1381 9.86193 11.25 10 11.25H10.5C10.9142 11.25 11.25 11.5858 11.25 12C11.25 12.4142 10.9142 12.75 10.5 12.75H10C9.0335 12.75 8.25 11.9665 8.25 11V8.75H8C7.58579 8.75 7.25 8.41421 7.25 8Z" fill="currentColor"></path></svg><blockquote class="text-content-tertiary m-0 text-sm leading-5 font-normal flex-1"><!--[-->
<p>The Centrapay Checkout is under active development and its behavior, functionality, and availability may change without notice.</p>
<!--]--></blockquote></div>
Expand All @@ -41,6 +41,7 @@
Centrapay will provide you with the following resources to allow you to start creating <a href="/api/payment-requests" target="_self" class="group inline-flex justify-center items-center text-interactive-secondary hover:text-interactive-secondary-hover"><span class="underline"><!--[-->Payment Requests<!--]--></span><span> </span><span class="rounded-sm bg-interactive-secondary group-hover:bg-interactive-secondary-hover h-3 w-6 inline-flex justify-center items-center"><span class="text-content-inverse-primary text-[10px]"> API </span></span></a>.</p>
<ol>
<li>API Key.</li>
<li>Merchant ID.</li>
<li>Merchant Config ID.</li>
</ol>
<div class="not-prose my-5 flex p-5 space-x-5 bg-surface-secondary rounded-lg"><svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-md text-content-secondary w-6 h-6"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 0.75C4.44365 0.75 0.75 4.44365 0.75 9C0.75 13.5563 4.44365 17.25 9 17.25C13.5563 17.25 17.25 13.5563 17.25 9C17.25 4.44365 13.5563 0.75 9 0.75ZM2.25 9C2.25 5.27208 5.27208 2.25 9 2.25C12.7279 2.25 15.75 5.27208 15.75 9C15.75 12.7279 12.7279 15.75 9 15.75C5.27208 15.75 2.25 12.7279 2.25 9ZM7.75 5.75C7.75 5.19771 8.19772 4.75 8.75 4.75C9.30228 4.75 9.75 5.19771 9.75 5.75C9.75 6.30229 9.30228 6.75 8.75 6.75C8.19772 6.75 7.75 6.30229 7.75 5.75ZM7.25 8C7.25 7.58579 7.58579 7.25 8 7.25H8.5C9.19036 7.25 9.75 7.80964 9.75 8.5V11C9.75 11.1381 9.86193 11.25 10 11.25H10.5C10.9142 11.25 11.25 11.5858 11.25 12C11.25 12.4142 10.9142 12.75 10.5 12.75H10C9.0335 12.75 8.25 11.9665 8.25 11V8.75H8C7.58579 8.75 7.25 8.41421 7.25 8Z" fill="currentColor"></path></svg><blockquote class="text-content-tertiary m-0 text-sm leading-5 font-normal flex-1"><!--[-->
Expand All @@ -52,7 +53,7 @@
<div class="not-prose my-5 flex p-5 space-x-5 bg-surface-secondary rounded-lg"><svg width="18" height="18" viewbox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-md text-content-secondary w-6 h-6"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 0.75C4.44365 0.75 0.75 4.44365 0.75 9C0.75 13.5563 4.44365 17.25 9 17.25C13.5563 17.25 17.25 13.5563 17.25 9C17.25 4.44365 13.5563 0.75 9 0.75ZM2.25 9C2.25 5.27208 5.27208 2.25 9 2.25C12.7279 2.25 15.75 5.27208 15.75 9C15.75 12.7279 12.7279 15.75 9 15.75C5.27208 15.75 2.25 12.7279 2.25 9ZM7.75 5.75C7.75 5.19771 8.19772 4.75 8.75 4.75C9.30228 4.75 9.75 5.19771 9.75 5.75C9.75 6.30229 9.30228 6.75 8.75 6.75C8.19772 6.75 7.75 6.30229 7.75 5.75ZM7.25 8C7.25 7.58579 7.58579 7.25 8 7.25H8.5C9.19036 7.25 9.75 7.80964 9.75 8.5V11C9.75 11.1381 9.86193 11.25 10 11.25H10.5C10.9142 11.25 11.25 11.5858 11.25 12C11.25 12.4142 10.9142 12.75 10.5 12.75H10C9.0335 12.75 8.25 11.9665 8.25 11V8.75H8C7.58579 8.75 7.25 8.41421 7.25 8Z" fill="currentColor"></path></svg><blockquote class="text-content-tertiary m-0 text-sm leading-5 font-normal flex-1"><!--[-->
<p>This link is under development and not yet active.</p>
<!--]--></blockquote></div>
<p>Production: <code>https://service.centrapay.com/ecommerce/centrapay.js</code></p>
<p>Production: <code>https://service.centrapay.com/ecommerce/centrapay.js?merchantId={merchantId}</code></p>
</section></section><section class="heading" data-heading-rank="2"><a href="#popup-method" class="group flex items-center relative"><svg width="16" height="16" viewbox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2 mt-10 absolute right-full opacity-0 group-hover:opacity-100"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 5.75C3.90326 5.75 3.33097 5.98705 2.90901 6.40901C2.48705 6.83097 2.25 7.40326 2.25 8C2.25 8.59674 2.48705 9.16903 2.90901 9.59099C3.33097 10.0129 3.90326 10.25 4.5 10.25H6.27063C6.68484 10.25 7.02063 10.5858 7.02063 11C7.02063 11.4142 6.68484 11.75 6.27063 11.75H4.5C3.50544 11.75 2.55161 11.3549 1.84835 10.6517C1.14509 9.94839 0.75 8.99456 0.75 8C0.75 7.00544 1.14509 6.05161 1.84835 5.34835C2.55161 4.64509 3.50544 4.25 4.5 4.25H6.23156C6.64578 4.25 6.98156 4.58579 6.98156 5C6.98156 5.41421 6.64578 5.75 6.23156 5.75H4.5Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M9.01855 5C9.01855 4.58579 9.35434 4.25 9.76855 4.25H11.5001C12.4947 4.25 13.4485 4.64509 14.1518 5.34835C14.855 6.05161 15.2501 7.00544 15.2501 8C15.2501 8.99456 14.855 9.94839 14.1518 10.6517C13.4485 11.3549 12.4947 11.75 11.5001 11.75H9.72949C9.31528 11.75 8.97949 11.4142 8.97949 11C8.97949 10.5858 9.31528 10.25 9.72949 10.25H11.5001C12.0969 10.25 12.6692 10.0129 13.0911 9.59099C13.5131 9.16903 13.7501 8.59674 13.7501 8C13.7501 7.40326 13.5131 6.83097 13.0911 6.40901C12.6692 5.98705 12.0969 5.75 11.5001 5.75H9.76855C9.35434 5.75 9.01855 5.41421 9.01855 5Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M4.53345 8C4.53345 7.58579 4.86923 7.25 5.28345 7.25H10.7791C11.1933 7.25 11.5291 7.58579 11.5291 8C11.5291 8.41421 11.1933 8.75 10.7791 8.75H5.28345C4.86923 8.75 4.53345 8.41421 4.53345 8Z" fill="currentColor"></path></svg><h2 id="popup-method" class="w-full">Popup Method</h2></a>
<section class="heading" data-heading-rank="3"><h3 id="overview">Overview</h3>
<p>You can use the Popup Method to open the Centrapay Checkout in a new browser window.</p>
Expand Down Expand Up @@ -95,12 +96,12 @@

</section><section class="heading" data-heading-rank="3"><h3 id="implementation">Implementation</h3>
<div data-code-block class="flex flex-col mb-8"><div class="flex w-full rounded-t-3xl rounded-b-none border-b border-outline-inverse-opaque bg-surface-inverse-secondary shadow-sm p-4"><span class="truncate type-subtitle-2 text-sm text-content-inverse-primary">Sample Integration</span></div><div data-code class="overflow-y-auto max-h-max"><pre is:raw="" class="astro-code material-theme-darker" style="background-color:#212121;overflow-x:auto" tabindex="0"><code><span class="line"><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">&lt;</span><span style="color:#F07178">html</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">&lt;</span><span style="color:#F07178">head</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#89DDFF"> &lt;</span><span style="color:#F07178">script</span><span style="color:#89DDFF"> </span><span style="color:#C792EA">src</span><span style="color:#89DDFF">=</span><span style="color:#89DDFF">&quot;</span><span style="color:#C3E88D">https://service.centrapay.com/ecommerce/centrapay.js</span><span style="color:#89DDFF">&quot;</span><span style="color:#89DDFF">&gt;&lt;/</span><span style="color:#F07178">script</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">&lt;/</span><span style="color:#F07178">head</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">&lt;</span><span style="color:#F07178">body</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">&lt;</span><span style="color:#F07178">div</span><span style="color:#89DDFF"> </span><span style="color:#C792EA">id</span><span style="color:#89DDFF">=</span><span style="color:#89DDFF">&quot;</span><span style="color:#C3E88D">centrapay-button-container</span><span style="color:#89DDFF">&quot;</span><span style="color:#89DDFF">&gt;&lt;/</span><span style="color:#F07178">div</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#89DDFF"> &lt;</span><span style="color:#F07178">script</span><span style="color:#89DDFF"> </span><span style="color:#C792EA">type</span><span style="color:#89DDFF">=</span><span style="color:#89DDFF">&quot;</span><span style="color:#C3E88D">text/javascript</span><span style="color:#89DDFF">&quot;</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">&lt;</span><span style="color:#F07178">head</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#89DDFF"> &lt;</span><span style="color:#F07178">script</span><span style="color:#89DDFF"> </span><span style="color:#C792EA">src</span><span style="color:#89DDFF">=</span><span style="color:#89DDFF">&quot;</span><span style="color:#C3E88D">https://service.centrapay.com/ecommerce/centrapay.js?merchantId={merchantId}</span><span style="color:#89DDFF">&quot;</span><span style="color:#89DDFF">&gt;&lt;/</span><span style="color:#F07178">script</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">&lt;/</span><span style="color:#F07178">head</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">&lt;</span><span style="color:#F07178">body</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">&lt;</span><span style="color:#F07178">div</span><span style="color:#89DDFF"> </span><span style="color:#C792EA">id</span><span style="color:#89DDFF">=</span><span style="color:#89DDFF">&quot;</span><span style="color:#C3E88D">centrapay-button-container</span><span style="color:#89DDFF">&quot;</span><span style="color:#89DDFF">&gt;&lt;/</span><span style="color:#F07178">div</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#89DDFF"> &lt;</span><span style="color:#F07178">script</span><span style="color:#89DDFF"> </span><span style="color:#C792EA">type</span><span style="color:#89DDFF">=</span><span style="color:#89DDFF">&quot;</span><span style="color:#C3E88D">text/javascript</span><span style="color:#89DDFF">&quot;</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#EEFFFF"> window</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">centrapay</span><span style="color:#EEFFFF">(</span><span style="color:#89DDFF">{</span></span>
<span class="line"><span style="color:#EEFFFF"> </span><span style="color:#C792EA">async</span><span style="color:#EEFFFF"> </span><span style="color:#F07178">onClick</span><span style="color:#89DDFF">()</span><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">{</span></span>
<span class="line"><span style="color:#89DDFF"> </span><span style="color:#545454;font-style:italic">// Create Payment Request</span></span>
Expand All @@ -113,14 +114,16 @@
<span class="line"><span style="color:#F07178"> </span><span style="color:#89DDFF">}</span></span>
<span class="line"><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">}</span><span style="color:#EEFFFF">)</span><span style="color:#89DDFF">;</span></span>
<span class="line"><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">&lt;/</span><span style="color:#F07178">script</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">&lt;/</span><span style="color:#F07178">body</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">&lt;/</span><span style="color:#F07178">html</span><span style="color:#89DDFF">&gt;</span></span></code></pre></div><div class="flex justify-end py-2 px-4 bg-surface-inverse-primary rounded-b-3xl border-t border-outline-inverse-opaque"><button id="copy-button" data-copy-button class="btn type-overline py-2 px-3 bg-interactive-secondary hover:bg-interactive-secondary-hover text-content-inverse-primary transition hover:scale-105 active:scale-100 active:transition-none">
<span class="line"><span style="color:#EEFFFF"> </span><span style="color:#89DDFF">&lt;/</span><span style="color:#F07178">body</span><span style="color:#89DDFF">&gt;</span></span>
<span class="line"><span style="color:#89DDFF">&lt;/</span><span style="color:#F07178">html</span><span style="color:#89DDFF">&gt;</span></span></code></pre></div><div class="flex justify-end py-2 px-4 bg-surface-inverse-primary rounded-b-3xl border-t border-outline-inverse-opaque"><button id="copy-button" data-copy-button class="btn type-overline py-2 px-3 bg-interactive-secondary hover:bg-interactive-secondary-hover text-content-inverse-primary transition hover:scale-105 active:scale-100 active:transition-none">
Copy
</button></div></div>
<ol>
<li>Set up the SDK.
<ol>
<li>Import the Centrapay SDK using a <code>&lt;script&gt;</code> tag. This script fetches the necessary JavaScript to access the Centrapay button in the window object.</li>
<li>Import the Centrapay SDK using a <code>&lt;script&gt;</code> tag.
This script fetches the necessary JavaScript to access the Centrapay button in the window object.
Your Merchant ID must be in the query string for SDK retrieval.</li>
<li>Add a <code>div</code> with the id <code>centrapay-button-container</code> to render the ‘Pay with Centrapay’ button.</li>
</ol>
</li>
Expand Down

0 comments on commit 74e615c

Please sign in to comment.