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:

  1. Provide to payabl. Technical support [email protected] your
  • myshopify.com URL
  • refund notification secret (see Refund section below)
  1. Install payabl. as a payment method in your plugin admin store (see instruction below)
  2. Receive an installation link to add your payabl. account to plugin.

Install payabl. payment method

  1. 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 add After 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).
  2. 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>

  1. 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.