Overview
The Pay with PayBito app adds a hosted checkout button to your Shopify store. When a shopper clicks it, they're taken to PayBito's hosted checkout page where they can complete payment by card, Stripe, or crypto. Once the payment is confirmed, your Shopify order is marked as paid automatically — no manual reconciliation needed.
This is a server-to-server integration: your API credentials are stored securely on the app server and are never exposed to your shoppers' browsers. Setup is broken into four parts — configuring your PayBito portal, installing the app, connecting your account, and adding the button to your storefront.
This guide walks through a single, complete setup path — from creating API credentials in the PayBito portal to testing a live payment on your storefront.
Features
The Pay with PayBito app brings the following capabilities to your Shopify store:
Payment Rails
Card / Stripe / Crypto
Setup Steps
4
Order Sync
Automatic
Key Storage
Server-Side
Native theme-editor block
Add the "Pay with PayBito" button through Shopify's Theme Customizer — no code editing required. Works on product pages and the cart page.
Automatic order confirmation
PayBito notifies the app via a signed webhook the moment payment completes, and your Shopify order is marked paid without any manual step.
Flexible amount source
Configure the button to charge the current product price on product pages, or the whole cart total on the cart page.
Secure by design
Your API key and secret key live only on the app server. Shoppers never see or touch your credentials at any point in the payment flow.
Deployment Values
This deployment of the app uses the following fixed values. You'll need these while completing Parts 1–3 of the setup guide.
If the app is re-hosted on a different server, get the current outbound IP by running curl https://api.ipify.org on that server, and update the IP whitelist in Part 1.2 accordingly.
Setup Guide
Complete these four parts in order. Each part takes place in a different location — the PayBito portal, your Shopify admin, the app's onboarding page, and your theme customizer.
Part 1 — Set Up Your PayBito Pay App
Do this in your PayBito portal (e.g. portal.paybito.com).
1.1 Create an API Key
Navigate to API Keys
Go to Developers → API Keys → Create.
Grant permissions
Products/Price (Write), Create Payment (Write), Transactions, Dashboard.
Copy your credentials
Copy the Public key (pk_…), the Secret key (sk_…), and note your Merchant ID.
Live vs test: For real payments, turn TEST MODE off and create a live key. Test keys (pk_test_…) only work in the sandbox and will fail on the live path.
1.2 Whitelist the App Server's IP
Set IP Access on your key
On that API key, set IP ACCESS to include 50.18.122.204.
This is required — without it, requests are rejected with 401 Full authentication is required.
1.3 Register the Webhook
Add the endpoint
Go to Developers → Webhooks → Add Endpoint.
Endpoint URL
https://shopify-pay.paybito.com/paybito/webhook
Generate a signing secret
Copy it — you'll paste it during onboarding in Part 3.
You do not need "Domain Whitelisting" — that's for PayBito's browser Cart SDK, not this server-to-server integration.
Part 2 — Install the App on Your Shopify Store
Open the install link
Replace YOUR-STORE with your store's .myshopify.com handle:
https://shopify-pay.paybito.com/auth?shop=YOUR-STORE.myshopify.com
Approve the installation
You'll be redirected to the Connect PayBito page to continue with Part 3.
Part 3 — Connect Your PayBito Account
On the onboarding page, fill in the following fields and click Save:
| Field | What to Enter |
|---|---|
| Merchant ID | From Part 1.1 |
| API key | Your pk_… key (the form warns you if it looks like a test key) |
| Secret key | Your sk_… secret |
| Broker ID | Optional — leave blank and it's filled automatically |
| Payment app domain | Your white-label checkout domain, or blank for portal.paybito.com |
| Webhook secret | The signing secret from Part 1.3 |
| Currency | e.g. USD |
Part 4 — Add the Button and Test
4.1 Add the Block
Open the theme customizer
In Shopify admin: Online Store → Themes → Customize.
Switch the page
Switch the template dropdown to a Product page (or Cart).
Add the app block
Click Add block → open the Apps group → choose Pay with PayBito.
4.2 Configure the Block
Keep Use App Proxy ON
This should stay enabled for the button to function correctly.
Set Amount source
Current product price on product pages, or Whole cart total on the cart page.
Style it
Adjust the label, colors, and note if you like → Save.
4.3 Test It
Click the button
Open a product on your storefront and click Pay with PayBito.
Confirm the redirect
You should be redirected to …/payments/merchant/checkout/PCN####.
Complete the payment
PayBito notifies the app via the webhook → your Shopify order is marked paid.
Under the Hood
Here's what happens between a shopper clicking the button and the order being marked paid:
PayBito: /shopping/products/register
PayBito: /shopping/payment/create → PCN
{your domain}/payments/merchant/checkout/{PCN}
Your API key and secret are stored securely on the server and are never exposed to shoppers' browsers at any point in this flow.
Troubleshooting
Common issues and how to resolve them:
| Symptom | Cause & Fix |
|---|---|
| 401 Full authentication is required | The app's IP isn't whitelisted on your key, or you used a test key on the live path. Recheck Part 1.1–1.2. |
| invalid amount / amount 0.00 | Button was on a product page with an empty cart set to "Whole cart total." Set Amount source → Current product price. |
| Pay with PayBito missing from Add block → Apps | Make sure the app is installed on this store, and you're editing a section that allows app blocks (product-information or cart). |
| Redirected checkout page is blank / wrong order | Confirm your Payment app domain is correct (or blank for portal.paybito.com). |
| Order not marked paid after payment | Check the webhook is registered (Part 1.3) and the Webhook secret entered during onboarding matches. |
Frequently Asked Questions
No. Domain Whitelisting applies to PayBito's browser-based Cart SDK. This Shopify app uses a server-to-server integration, so only the IP whitelist in Part 1.2 is required.
Yes. Create a test key (pk_test_…) in the PayBito portal and complete onboarding with it. Test keys only work in the sandbox — switch to a live key before accepting real payments.
This usually means the Amount source setting doesn't match the page. Use Current product price on product pages and Whole cart total only on the cart page.
Order status updates are triggered by the PayBito webhook. Make sure the endpoint URL is registered correctly (Part 1.3), the Webhook secret matches in both places, and the app server is reachable.
Run curl https://api.ipify.org on the new server to get its outbound IP, then update the IP Access setting on your API key in the PayBito portal.
No. Your API key and secret key are stored on the app server and used only in server-to-server calls. They are never sent to or visible in the shopper's browser.
Yes. Add the app block separately on each template in the theme customizer, and set the correct Amount source for each page.
Support
If you run into any issues during installation, configuration, or day-to-day usage of the Pay with PayBito app, the support team is available to help.
Get in Touch
For technical assistance, questions about API credentials, or any other queries related to the Shopify PayBito Pay app, raise a support ticket or send a direct email.
support@paybito.comBefore Contacting Support
To help the support team resolve your issue as quickly as possible, gather the following information before reaching out:
- Your store's .myshopify.com handle
- The exact error message or unexpected behavior you are seeing
- Steps to reproduce the issue
- Whether the issue occurs with a test key, live key, or both
- Your Merchant ID (do not share your API Secret Key)
- Any relevant webhook delivery logs from the PayBito portal
Integration type: Server-to-server via App Proxy. Domain Whitelisting and the browser Cart SDK do not apply to this integration.
