Shopify
payabl. Shopify Checkout install notes v0.3.2
Available payment methods: Credit cards (Visa , MasterCard, Maestro), Sofort, Trustly, EPS/Giropay, Paypal, Instant Bank transfer, Alipay, iDeal, MyBank, Paysafecard, WeChat Pay
Please follow the next steps to install payabl. as a payment method:
- Provide to payabl. Technical support [email protected] your
- myshopify.com URL
- refund notification secret (see Refund section below)
- Install payabl. as a payment method in your plugin admin store (see instruction below)
- Receive an installation link to add your payabl. account to plugin.
Install payabl. payment method
- In the Shopify admin store, go to Settings -> Payments -> Add manual payment method -> Create custom payment method and add
Pay by card & other methods (powered by payabl.)
to Custom payment method name and optionally addAfter clicking "Complete order", you will be redirected to the checkout page to safely complete your purchase.
to Additional details. If you wish, this message can be changed to accommodate your needs (for example, if a translation to a foreign language is needed). - In Settings -> Checkout scroll down to Order status page -> Additional scripts and paste this
code within:
<script>
document.addEventListener("DOMContentLoaded", e => {
const osText = document.getElementsByClassName("os-step__title")[0];
const hasPayabl = document.getElementsByClassName("payabl-content")[0];
document.getElementsByClassName("payment-method-list__item__info")[0].innerText.toLowerCase().includes("payabl")
? redirectToIframe() : osText.innerText = "";
});
async function redirectToIframe() {
const osText = document.getElementsByClassName("os-step__title")[0];
osText.innerText = "Redirecting to payment...";
await performCheckout();
}
async function performCheckout() {
console.log('Payabl check')
// console.dir(Shopify)
const order = Shopify.checkout
let customerIp = ''
await fetch('https://ifconfig.me/all.json')
.then(response => response.json())
.then(res => {
customerIp = res.ip_addr
})
order.host = Shopify.shop
order.customer_ip = customerIp
order.locale = Shopify.locale
const cardData = await fetch('https://shopify.payabl.com/api/payment/card', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
sessionId: '',
cart: order,
isOrder: true
})
})
if (cardData.ok) {
const json = await cardData.json()
if (json.result === 'err') {
Shopify.Checkout.OrderStatus.addContentBox(
`<p class="error">${json.message}</p>`
)
} else {
const jsonData = JSON.parse(json.data)
if (jsonData.start_url === '') {
const msg = 'Init payabl. payment URL error'
Shopify.Checkout.OrderStatus.addContentBox(
`<p class="error">${msg}</p>`
)
} else {
window.location.href = decodeURIComponent(jsonData.start_url)
}
}
} else {
const msg = 'Init payabl. payment error'
Shopify.Checkout.OrderStatus.addContentBox(
`<p class="error">${msg}</p>`
)
}
}
</script>
- In the shop admin, navigate to Apps and choose the custom app of your shop. Click on the Open App button and enable 'Pay with Payabl'. For live transactions, you need to also disable Sandbox Mode. Enter your merchant ID and merchant secret (provided by payabl. technical support team).

Refunds
In Settings -> Notifications scroll down to Webhooks -> Create webhook and choose:
- Event: Refund create
- Format: JSON
- URL:
https://shopify.payabl.com/api/order/refund
- Webhook API version: 2022-10
- Save.
After Save, copy the highlighted part between the 'All your webhooks will be signed with' and 'so you can verify their integrity.' and send it to the payabl. team.
Updated 17 days ago