Integration Documentation

Integration with Shopify

Embed PayFaci payment form directly inline on your Shopify store pages. This provides a seamless checkout experience without popups or redirects. Every successful payment also automatically creates a matching paid order in your Shopify admin so inventory, fulfillment, and customer order-confirmation emails work exactly as they do with Shopify's native checkout.

Step 1: Connect your Shopify store to Payfaci

Before embedding the payment form, you must give Payfaci permission to create orders in your Shopify admin. Without this connection, customers can still pay through Payfaci, but the corresponding order will NOT appear in your Shopify dashboard — you would have to reconcile manually.

Plan requirement: Shopify Basic ($29/mo) or higher. The $5 Starter plan does not support Custom Apps and cannot be used for this integration.

Part A — Create a Custom App in your Shopify admin

1. In your Shopify admin, go to Settings → Apps and sales channels.
2. Click Develop apps (top right). If prompted, allow custom app development for your store.
3. Click Create an app and name it Payfaci Order Sync.
4. Open the Configuration tab. Under Admin API access scopes, check the following three scopes:

• write_orders
• read_products
• write_customers

5. Click Save, then Install app.
6. Open the API credentials tab and click Reveal token once. Copy the Admin API access token — it starts with shpat_. Save it somewhere safe; Shopify only displays it once.

Part B — Connect the store inside Payfaci

1. Log into your Payfaci dashboard and click Shopify Integration in the side menu.
2. Paste your Shopify shop domain — for example your-store.myshopify.com — and paste the Admin API access token you copied above.
3. Tick Auto-create orders in Shopify on every successful Payfaci payment. Recommended ON. When OFF, payments still process but Shopify orders are not created automatically.
4. Click Connect store.
5. Click Test connection — a green "Connected" banner with your shop name confirms the credentials work. If you see a red error, double-check the domain — no https:// prefix and no trailing slash — and re-paste the token.

Once the green "Connected" banner appears, your store is linked to Payfaci. Continue to Step 2 below to embed the payment form on your storefront.

Step 2: Add the Script

Log in to your Shopify admin panel and navigate to the "Online Store" section.

Click on "Themes" and then click on the Three dots beside the customize button then select "Edit code."

In the searchbar type in Theme.liquid then add the script below to the head tag then save:

<script src="https://payfaci.online/assets/external/shopify-inline.js"></script>

Step 3: Add Payment Container to Cart Page

Add the Payfaci payment form container to your cart page so customers see it as a full-width row directly below the cart, not squashed into the narrow cart sidebar.

How to do it:

1. In the Shopify theme editor, search for the file named "main-cart.liquid" in the search bar.
2. Open this file and find the section that starts with {%- unless cart.empty? -%}.
3. Locate the closing tag of <div class="cart-page__summary">...</div>.
4. Immediately AFTER that closing div, paste the payment container block shown below. It must be a sibling of cart-page__summary, NOT inside it.

Example Code:

Here's what the relevant part of your main-cart.liquid file should look like after adding the payment container:

{%- unless cart.empty? -%}
  <div class="cart-page__summary">
    {%- content_for 'block', id: 'cart-page-summary', type: '_cart-summary' -%}
  </div>

  <!-- PayFaci Payment — full-width row below the cart, NOT inside the narrow sidebar -->
  <div class="cart-page__payfaci">
    <div id="payfaci-payment-container"></div>
  </div>
{%- endunless -%}

Add the supporting CSS: Inside the same main-cart.liquid file, find the {% stylesheet %} block and add the rule below so the new row spans the full cart width:

.cart-page__payfaci {
  grid-column: 1 / -1;
  padding: 32px 0 16px;
  display: flex;
  justify-content: center;
}
.cart-page__payfaci > div:first-child {
  width: 100%;
  max-width: 720px;
}

What this does:

The <div id="payfaci-payment-container"></div> is the placeholder where the Payfaci payment form is rendered. By placing it in a new full-width row below the cart, the form has enough room to show all fields cleanly on desktop, tablet, and mobile.

Step 4: Embed Payment Form

Inside the same <div class="cart-page__payfaci"> block, immediately AFTER the container div, paste the script below:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    ShopifyPayfaciInline.embed({
      containerId: 'payfaci-payment-container',
      client_id: 'YOUR_CLIENT_ID',
      client_secret: 'YOUR_CLIENT_SECRET',
      currencyCode: '{{ shop.currency }}',
      amount: {{ cart.total_price | divided_by: 100.0 }},

      // Pre-fills the customer details for logged-in shoppers
      customer: {
        firstname: '{{ customer.first_name | default: "" }}',
        lastname:  '{{ customer.last_name  | default: "" }}',
        email:     '{{ customer.email      | default: "" }}',
        phone:     '{{ customer.phone      | default: "" }}',
        address:   '{{ customer.default_address.address1 | default: "" }}',
        city:      '{{ customer.default_address.city     | default: "" }}',
        state:     '{{ customer.default_address.province | default: "" }}',
        zip:       '{{ customer.default_address.zip      | default: "" }}'
      },

      // Hides Shopify's native "Check out" button on the cart page once Payfaci
      // is confirmed loaded. Customers can ONLY proceed via Payfaci. Failsafe:
      // if Payfaci doesn't load, the native button stays visible.
      hideNativeCheckout: true,

      styles: {
        height: '1200px',
        width: '100%',
        borderRadius: '12px',
        border: 'none',
        boxShadow: '0 4px 16px rgba(0, 0, 0, 0.08)'
      },

      onSuccess: function(response, instanceId) {
        console.log('Payment successful!', response);
        window.location.href = '/pages/thank-you';
      },
      onFailure: function(response, instanceId) {
        console.log('Payment failed', response);
        alert('Payment failed. Please try again.');
      },
      onCancel: function(response, instanceId) {
        console.log('Payment cancelled', response);
      },
      onReady: function(instanceId) {
        console.log('Payment form loaded', instanceId);
      }
    });
  });
</script>

Step 5: Configure Your API Keys

Replace 'YOUR_CLIENT_ID' and 'YOUR_CLIENT_SECRET' with your actual PayFaci API credentials. You can get these from your Vendor Dashboard.

Step 6: Disable Shopify's Express Checkout buttons

To stop customers from skipping the cart page (and your Payfaci form) by clicking "Buy it now", "Shop Pay", "Apple Pay", "Google Pay", or "PayPal" buttons on the product page:

1. In your Shopify admin, go to Online Store → Themes.
2. Click Customize next to your live theme.
3. In the theme editor, open the Theme Settings panel (gear icon).
4. Find the Buttons or Checkout section and uncheck "Show dynamic checkout buttons" (sometimes called "Show payment buttons" or "Express checkout buttons").
5. Click Save.

Customers must now click "Add to cart" first, where they will see your Payfaci form on the cart page.

Step 7: (Optional) Hide cart-drawer checkout button

If your theme has a slide-out cart drawer or mini-cart with its own "Check out" button, customers can checkout from there without ever reaching the cart page where Payfaci lives.

To remove that drawer checkout button:

1. In the Shopify theme editor, click Edit code.
2. In the file searchbar, type cart-drawer.liquid or cart-notification.liquid (name varies by theme).
3. Find the <button name="checkout"> or <a href="/checkout"> element inside the drawer.
4. Replace it with a "View Cart" link to /cart so customers land on the cart page where Payfaci is loaded:

<a href="/cart" class="button button--primary">View Cart</a>

Step 8: (Recommended) Add a "Pay with Payfaci" button on the product page

By default, customers must click "Add to cart" then navigate to the cart page before they see the Payfaci form. This adds an extra step that hurts conversion.

Adding a "Pay with Payfaci" button directly on the product page lets customers go from product → Payfaci payment in one click. The button silently adds the product to cart and redirects directly to the Payfaci form.

How to add it:

1. Shopify admin → Online Store → Themes → click Customize on your live theme.
2. At the top of the editor, click the page dropdown (default says "Home page") → choose Products → Default product.
3. In the left sidebar, find your Product information section → expand it to see all blocks.
4. Click Add block and choose Custom Liquid (or use an existing empty Custom Liquid block).
5. Drag the new Custom Liquid block to sit just below the Buy buttons block.
6. Click the Custom Liquid block. On the right side a textarea appears — paste the code below into it.
7. Click Save in the top-right corner of the theme editor.

Code to paste into the Custom Liquid block:

<button type="button" class="payfaci-pay-btn" onclick="payfaciQuickAdd({{ product.selected_or_first_available_variant.id }}, this)" aria-label="Pay with Payfaci">
  <svg class="payfaci-pay-btn__icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <rect x="3" y="11" width="18" height="11" rx="2"/>
    <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
  </svg>
  <span class="payfaci-pay-btn__label">Pay with Payfaci</span>
  <span class="payfaci-pay-btn__spinner" aria-hidden="true"></span>
</button>

<script>
function payfaciQuickAdd(variantId, btnEl) {
  if (btnEl) {
    btnEl.disabled = true;
    btnEl.classList.add('is-loading');
  }
  fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ id: variantId, quantity: 1 })
  }).then(function(r) {
    if (r.ok) {
      window.location.href = '/cart#payfaci-payment-container';
    } else {
      throw new Error('add-to-cart-failed');
    }
  }).catch(function() {
    if (btnEl) {
      btnEl.disabled = false;
      btnEl.classList.remove('is-loading');
    }
    alert('Could not add to cart. Please try again.');
  });
}
</script>

<style>
  .payfaci-pay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 400px;
    min-width: 0;
    min-height: 52px;
    padding: 14px 24px;
    margin: 12px 0;
    background: linear-gradient(180deg, #9be06b 0%, #7dc24f 100%);
    color: #0c2e02;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(155, 224, 107, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.2s ease;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  .payfaci-pay-btn:hover:not(:disabled) {
    filter: brightness(1.05);
    box-shadow: 0 6px 20px rgba(155, 224, 107, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
  }
  .payfaci-pay-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(155, 224, 107, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
  .payfaci-pay-btn:focus-visible {
    outline: 3px solid rgba(12, 46, 2, 0.45);
    outline-offset: 2px;
  }
  .payfaci-pay-btn:disabled,
  .payfaci-pay-btn.is-loading {
    cursor: wait;
    opacity: 0.85;
  }
  .payfaci-pay-btn__icon { flex-shrink: 0; transition: opacity 0.15s ease; }
  .payfaci-pay-btn__label { letter-spacing: 0.02em; transition: opacity 0.15s ease; }
  .payfaci-pay-btn__spinner {
    display: none;
    position: absolute;
    width: 18px; height: 18px;
    border: 2.5px solid rgba(12, 46, 2, 0.25);
    border-top-color: #0c2e02;
    border-radius: 50%;
    animation: payfaci-spin 0.7s linear infinite;
  }
  .payfaci-pay-btn.is-loading .payfaci-pay-btn__icon,
  .payfaci-pay-btn.is-loading .payfaci-pay-btn__label { opacity: 0.35; }
  .payfaci-pay-btn.is-loading .payfaci-pay-btn__spinner { display: block; }
  @keyframes payfaci-spin { to { transform: rotate(360deg); } }
  @media (max-width: 480px) {
    .payfaci-pay-btn { font-size: 15px; padding: 14px 20px; }
  }
</style>

What this does:

• Customer clicks "Pay with Payfaci" on the product page.
• Behind the scenes, JavaScript adds the product to cart via Shopify's /cart/add.js API.
• On success, the page redirects to /cart#payfaci-payment-container — the hash auto-scrolls the customer directly to your Payfaci form, skipping the cart summary.
• Result: customer goes from product page → Payfaci payment in a single click.

Responsive Design

The payment form is fully responsive and will automatically adjust to:

• Mobile devices (up to 767px): 100% width
• Tablets (768px - 991px): adjusts within the container
• Desktop (992px and up): up to 720px wide, centered below the cart

Integrate Subscription Payment with Wordpress

To receive subscription payment with wordpress plugin, follow these steps:

Download the plugin here Download Payfaci Subscription Plugin

1. Install and activate the Wordpress plugin on your WordPress site.
2. Click on Plugin, then Select Add New, Select Upload Plugin Button, Click on Choose file to select the downloaded Payfaci Subscription plugin.
3. Once install click Activate to activate plugin
4. Navigate to Payfaci settings from the wordpress admin side menu.
5. Provide your Client ID, Client Secret, Charge Currency, Interval etc. Not sure how get your Client ID and Client Secret, Click Here to get one

Setting Up Payment Page

6. Navigate to Pages on Wordpress Dashbaord
7. Click on add new page and copy this shortcode

   [payfaci-pay-button]

8. Paste the shortcode above on the page and publish
9. The shortcode will display payment form will the user will use to pay for subscription.
10. You can use this shortcode on any wordpress content type

Then you can start receiving payments globally and the money will reflect in your Payfaci balance.