How to Add/Configure Afterpay payment method in Shopify Store!

Here are some Question related to Afterpay checkout payment method Shopify.

• Getting started with Afterpay online Shopify payment method.
• Afterpay Gateway Configuration in Shopify.
• What are the requirements to add Afterpay to any Shopify Store?
• How can I add Afterpay as a payment option at checkout in Shopify ?
• Integrate Afterpay to shopify.
• How do I add Afterpay to my website?
• How do I set up Afterpay?

So .. All of your Questions Answer is here :-

Here are the steps that enable Afterpay as a payment method on Shopify store:-

1. Login to Your Shopify Store and Locate to Online Store option in left side panel.
2. Click on Settings in left side panel as shown below and then Click on Payments.
   

In New window scroll down to Alternative payment methods section.

Click on Choose alternative payment button and choose afterpay there

After Choose Afterpay .. Next step is to add Merchant id information there.

Note :- Dot not check this option “Enable test mode“.

After fill the options above.. Afterpay will be active there.

How to configure Afterpay to Shopify now..

As mentioned code in Afterpay official developer website .. copy this code to your theme.liquid file.

<!-- Begin Shopify-Afterpay JavaScript Snippet (v1.0.10) --> <script type="text/javascript"> // Overrides: // var afterpay_min = 0.00; // As per your Afterpay contract. // var afterpay_max = 2000.00; // As per your Afterpay contract. // var afterpay_cbt_enabled = false; // As per your Afterpay contract; change to true to display Cross-Border Trade artwork (for AU/NZ). // var afterpay_logo_theme = 'colour'; // Can be 'colour', 'black' or 'white'. var afterpay_modal_open_icon = true //var afterpay_product_selector = '#product-price-selector'; //var afterpay_product_selector = '#aftpay'; // var afterpay_cart_static_selector = '.cart_total_text'; // var afterpay_cart_integration_enabled = true; // var afterpay_product_integration_enabled = true; // Non-editable fields: var afterpay_shop_currency = {{ shop.currency | json }}; var afterpay_cart_currency = {{ cart.currency.iso_code | json }}; var afterpay_shop_money_format = {{ shop.money_format | json }}; var afterpay_shop_permanent_domain = {{ shop.permanent_domain | json }}; var afterpay_theme_name = {{ theme.name | json }}; var afterpay_product = {{ product | json }}; var afterpay_current_variant = {{ product.selected_or_first_available_variant | json }}; var afterpay_cart_total_price = {{ cart.total_price | json }}; var afterpay_js_snippet_version = '1.0.10'; </script> <script type="text/javascript" src="https://static.afterpay.com/shopify-afterpay-javascript.js"></script> <!-- End Shopify-Afterpay JavaScript Snippet (v1.0.10) --> <style> .afterpay-paragraph {display: block !important;} .cart .afterpay-paragraph {margin-top: 40px;} </style>

Click on Edit Code your active theme as shown below..

There are two option to add Code/Script there..

First is simply Copy that code to your theme.liquid file at the bottom of the file.

Second is using Snippets .. Follow the steps below…

Locate to Snippets section and click on Add a new snippet and give name afterpay.

Now add that copied code to this file.

Hit on save button and now open theme.liquid file and add new one line code there.

{% render ‘afterpay’ %}

Save the file and check your website product pages and cart page. Result will be like this.

On Cart Page

Now the main thing is… if you want to show the text where you want on the page ?

Actually it works as per Id and Class of element you can also add separate div structure or existing class in product-template.liquid file to show Afterpay text there.

If you have some html knowledge then you can edit the above code … added in the file.

From here you have to just remove the // from the var afterpay_product_selector line. Like below..

You can add your id or class there to show afterpay text . Now afterpay text will show after that element.

For Example .. Here i added div with id name is aftpay and now my afterpay text will show after this div id element.

The Same way you can do with Cart page.

I hope this helps you a lot.. for more help please contact with me.

Thanks 🙏

• add
• afterpay
• afterpay payment configuration
• how to
• in shopify
• method
• nst
• nst nurpur
• nst web creation
• payment
• shopify

• Share
• Tweet
• Share
• Mail