*/}
## What is Cash App Afterpay?
Cash App Afterpay lets your customers make purchases and pay for their purchases over time. When customers pay each installment on time, using Cash App Afterpay is free.
Some customers qualify for Pay Monthly, which offers credit with interest payable between 3 to 24 months.
Cash App Afterpay is for US merchants and partners only.
If you're a merchant operating in Australia, New Zealand, or Canada, see [Afterpay](https://developers.afterpay.com/docs/api/welcome/getting-started). If you're a merchant operating in the United Kingdom, see [Clearpay](https://developers.clearpay.co.uk/clearpay-online/docs/getting-started-with-clearpay-online).
## Why use Cash App Afterpay?
**For merchants:**
* We pay you upfront and take on all credit and fraud risk
* We help raise your Average Order Value (AOV) and conversion rates by increasing purchasing power
* Customers look to Cash App Afterpay to discover new brands, providing merchants with a valuable source of new customers
**For customers:**
* We split the total order amount into four installments, taken automatically every two weeks
* It’s free and simple to join - just download the app, then set up an account in minutes. Eligibility criteria apply
* There is no interest with Pay-in-4 and no fees when customers pay on time. Customers who qualify can use Pay Monthly, where payment is spread over 3, 6, 12 or 24 months with interest.
* Customers can use their Cash App account to pay for purchases in four installments
## How is Cash App Afterpay different from Afterpay?
In the United States, Afterpay is now called Cash App Afterpay. It's available to both Afterpay and Cash App customers through a single checkout experience.
For merchants who previously offered Afterpay to US customers, Cash App Afterpay has a different logo and small changes to the Afterpay messaging on your product and checkout pages. There aren't many changes to your backend operations, payment processing, settlement, or other technical processes.
If your app uses an explicit allowlist of Afterpay domains, you
*must*
add
`api.cash.app`
and
`cash.app`
to the allowlist.
### Migrate to Cash App Afterpay
If you're an existing US merchant who needs to migrate from Afterpay to Cash App Afterpay, see instructions [here](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay).
---
# How are Cash App Pay and Cash App Afterpay different?
**Cash App Pay** is a payment method that allows customers to pay for goods or services in a single transaction.
**Cash App Afterpay** is a payment method that lets customers pay for goods or services in installments.
### Cash App Pay
Cash App Pay is a digital payment feature. It allows users to make secure, contactless payments in stores or online directly from their Cash App balance or linked bank accounts. Cash App Pay is an e-wallet primarily used on mobile devices, though it can also be accessed on a desktop or laptop.
### Cash App Afterpay
Cash App Afterpay is a buy now, pay later service that allows both Afterpay and now Cash App customers in the US to purchase goods and services online and pay in installments.
The Pay-in-4 feature allows customers to pay with four interest-free installments paid every six weeks. For example, if a customer buys a $100 product they make the first $25 installment at the time of purchase. Then they make three further \$25 payments at two-week intervals.
Cash App Afterpay is only available to US merchants. In Australia and New Zealand, our buy now, pay later solution is called Afterpay. In the United Kingdom, it is called Clearpay.
---
# Cross Border Trade
Cross Border Trade is a feature that enables you to accept Cash App Afterpay orders from international customers.
For example, if you have a US online store, you can accept orders from customers in Australia and those customers can use Cash App Afterpay.
* Click [here](https://www.afterpay.com/en-US/cross-border-trade) for an overview of Cross Border Trade for merchants
Afterpay customers can still make CBT purchases. Cash App customers that are new to Afterpay will not see options to use CBT.
## Available Countries
The available countries for Cash App Afterpay Cross Border Trade are:
* Australia
* Canada
* New Zealand
* United Kingdom (as Clearpay)
## Setup
All Cash App Afterpay merchants have Cross Border Trade enabled automatically.
## Actions
Please ensure that your store is configured to meet these requirements:
**Currency**
Check that your store currency matches your Cash App Afterpay merchant account region. For example, if you have a US Cash App Afterpay merchant account, then your store currency must be set to USD. If the two do not match, Cash App Afterpay will not work.
**Store Address**
Check that your store address matches your Cash App Afterpay merchant account region. For example, if you have a US Cash App Afterpay merchant account, then your store address must be set to United States.
For information on how to set or change your store currency or address, go to the [Platforms - Quickstart](/cash-app-afterpay/guides/platforms/platforms-quickstart) topic and choose your platform from the list.
**Shipping**
You must configure shipping methods to any countries that you want to offer CBT to. So for example, if you have a US store and offer CBT to New Zealand, you would need to configure shipping methods for New Zealand within your platform's shipping settings. If you do not do this, international customers will not be able to place an order.
## Settlements
Settlements from Cash App Afterpay are always paid in your local currency. So, if you are a US merchant, your settlements are made in US dollars.
## Restrictions and Costs
You cannot display Cash App Afterpay messaging on the product pages for currencies other than the default store currency. This is due to possible exchange rate variations, which could lead to inaccurate installment amounts.
Cash App Afterpay charges a small additional fee on Cross Border Trade transactions. For details of this fee, see your Cash App Afterpay contract or email us at:
* [na-afterpay-merchant-admin@squareup.com](mailto:na-afterpay-merchant-admin@squareup.com) - For US and Canadian merchants
---
# Support
### Where can merchants find answers to common questions?
Visit our [merchant help center](https://help.business.afterpay.com/hc/en-us) or contact your Cash App Afterpay account representative.
#### Quick links
* [Payment schedules and transaction fees](https://help.business.afterpay.com/hc/en-us/sections/6464826951705-Payment-Schedule-Transaction-Fees)
* [Refunds](https://help.business.afterpay.com/hc/en-us/sections/6464909479577-Refunds)
* [Order management](https://help.business.afterpay.com/hc/en-us/sections/6464856665113-Order-Management-Transaction-Description)
### How can a customer contact Cash App Afterpay support?
Customer support queries should be directed to [help.afterpay.com](https://help.afterpay.com/hc/en-us).
### Where can I check Cash App Afterpay's systems status?
You can view the current status of Cash App Afterpay at [https://status.afterpay.com](https://status.afterpay.com). Subscribe to receive status updates by email.
### Why is Google Analytics incorrectly attributing the referrer to Afterpay?
When customers pay with Cash App Afterpay, they are redirected to portal.afterpay.com pages during the checkout flow, before returning to your review or confirmation page. This results in Google Analytics seeing portal.afterpay.com as the last domain visited. Therefore, it attributes the referral to `portal.afterpay.com`.
To ensure that Google correctly identifies the real referral source, add `portal.afterpay.com` to your referral exclusion list.
For details on how to add Cash App Afterpay to your exclusion list see [Google's documentation.](https://support.google.com/analytics/answer/10327750?hl=en)
Use portal.afterpay.comnotafterpay.com or you'll hide all of the traffic originating from the Cash App Afterpay Shop Directory.
---
# Business Hub
The Cash App Afterpay Business Hub is where you manage your merchant account. It's a centralized workspace where you can view settlements, handle disputes, manage your team, and more. For more information about using Business Hub, see the Cash App Afterpay [Help Center](https://help.business.afterpay.com/hc/en-us).
You can log in to the Business Hub here:
[https://hub.us.afterpay.com/us](https://hub.us.afterpay.com/us)
If you have trouble logging in, try clearing your browser's session cookies and then try again.
Click [here](https://hub.us.afterpay.com/forgot-password) to reset your password.
## Credentials
As a Hub Admin (Business Hub administrator), you have secure access to your merchant credentials within the Business Hub.
Go to the Settings tab to find all the necessary information. Your direct link to the Settings tab is: [https://hub.us.afterpay.com/settings](https://hub.us.afterpay.com/settings).
Without Hub Admin permissions, you can still view the Merchant ID field.
## New user accounts
### Production
You can request for a user to be added to your Business Hub by contacting our [Merchant Admin team](https://help.afterpay.com/hc/en-au/requests/new?ticket_form_id=193406) with the following details:
* User's first name
* User's last name
* User's email address
* Level of access
For **Sandbox Business Hub** access - contact your delivery manager or Cash App Afterpay account manager.
## Role access
There are three standard user access types:
* Hub Admin
* User
* Read Only
The various access rights are described in the tables below.
**Cash App Afterpay Business Hub**
| Permissions | Hub Admin | User | Read Only |
| --------------------------------------------------- | --------- | ---- | --------- |
| Access to tax invoices | Yes | Yes | Yes |
| Access to settlement info | Yes | Yes | Yes |
| Process refunds | Yes | Yes | No |
| View orders | Yes | Yes | Yes |
| Edit orders | Yes | Yes | No |
| View shop directory | Yes | Yes | Yes |
| View and edit shop directory | Yes | Yes | No |
| View and edit team members | Yes | Yes | No |
| View banking | Yes | No | No |
| View and edit banking | Yes | No | No |
| View Afterpay IQ | Yes | Yes | Yes |
| View and edit custom access types | Yes | No | No |
| View activity logs | Yes | No | No |
| View disputes | Yes | Yes | Yes |
| Manage disputes | Yes | No | No |
| Manage Cash App Afterpay products | Yes | No | No |
| View account settings | Yes | Yes | Yes |
| Manage account settings and sensitive business data | Yes | No | No |
**In the Merchant Portal**
| Permissions | Hub Admin | User | Read Only |
| --------------------------------- | --------- | ---- | --------- |
| View and download tax invoices | Yes | Yes | Yes |
| View and download settlement info | Yes | Yes | Yes |
| View order | Yes | Yes | Yes |
| Edit orders | Yes | Yes | No |
| Process refunds | Yes | Yes | No |
| Edit shipped status | Yes | Yes | No |
## Business Hub activation email
When user accounts are created you receive an activation email.
* The activation email contains a link that is active for 45 minutes.
* You can use [Forgot My Password](https://hub.us.afterpay.com/forgot-password) if the link is no longer active.
### Activation link expired? Didn’t receive the activation email?
* Activation and ‘Forgot my Password’ emails are sent from [donotreply@afterpay.com](mailto:donotreply@afterpay.com)
* Please check your Junk or Spam mailbox
* Try adding [donotreply@afterpay.com](mailto:donotreply@afterpay.com) to your safe senders list
---
# Settlement reports
Settlement Reports explain in detail all payments made by Cash App Afterpay to you and help you to reconcile your accounts. There is one settlement report for each settlement to your bank account. Typically, there is one settlement every day that you capture a Cash App Afterpay order.
## View and download settlement reports
You can view and export your settlement files in the reconciliation tab of the [Business Hub](https://hub.us.afterpay.com/us).
You can export your settlement files using the Settlement Export option For additional download options, such as API requests, contact your account manager.
## Download tax invoices
You can also download monthly invoices for tax reporting purposes. To download a tax invoice, select **Tax invoice** button in the reconciliation tab. Configure the details of your settlement report and click **Download**.
## Settlement report fields
| Description | Type | Format | Example Value | Displayed in CSV Format |
| --------------------- | ------ | ----------------- | ---------------- | ---------------------------------------------------- |
| Settlement Date | String | See table below | See table below | See table below |
| Order Date and Time | String | dd/MM/yyyy HH:mm | 12/01/2018 10:43 | "24/06/2019 22:56" |
| Order Month | String | MMM | Jan | "Jun" |
| Order Year | String | | 2019 | "2019" |
| Afterpay Order ID | Number | 79043810 | 12345679 | "79169085" |
| Merchant Order ID | String | Merchant Supplied | 2345678 | "2345678" |
| Merchant Refund ID | String | Merchant Supplied | 9163251003631241 | "9163251003631241" |
| Order Amount | String | $00.00 or $0.00 | \$85.95 | "85.95" - with the currency symbol before the number |
| Settlement Amount | String | $00.00 or $0.00 | \$85.95 | "85.95" - with the currency symbol before the number |
| Merchant Fee excl Tax | String | $00.00 or $0.00 | \$5.46 | "5.46" - with the currency symbol before the number |
| Merchant Fee Tax | String | $00.00 or $0.00 | \$0.55 | "0.55" - with the currency symbol before the number |
| Merchant Fee incl Tax | String | $00.00 or $0.00 | \$6.00 | "6.00" - with the currency symbol before the number |
| Net Settlement Amount | String | $00.00 or $0.00 | \$79.95 | "79.95" - with the currency symbol before the number |
| Type | String | | Order | "Order" |
| Channel | String | | Online | "Online" |
| Store Name | String | | | |
| Store Id | | | | 9756 |
| Device Name | | | | "POS251" |
| Device Id | | | | 38301 |
| Afterpay Refund ID | Number | | | 4561545 |
| Refund Date and Time | String | dd/MM/yyyy HH:mm | | "24/06/2019 18:43" |
| Acquirer Terminal ID | | | | |
| Consumer Country | String | | | "US" |
---
# Migrate from Afterpay to Cash App Afterpay
If your app uses an explicit allowlist of Afterpay domains, you
*must*
add
`api.cash.app`
and
`cash.app`
to the allowlist.
## API integration
There are no changes to the APIs, so you don't need to make any changes to your backend systems. While the terminology has changed, the API endpoints are the same.
## Afterpay Messaging
We currently support two messaging products, both of which work with Cash App Afterpay.
[On-Site Messaging](../AFTERPAY-MESSAGING/Getting-Started-with-Afterpay-On-Site-Messaging.md) is our current messaging product. Our previous product is messaging from the [JavaScript Library](../AFTERPAY-MESSAGING/JavaScript-Library.md).
**On-Site Messaging**
If you use On-Site Messaging, it will be updated automatically, with advance notice sent via email.
If you use elements of Afterpay Messaging, then see the [Getting Started with Afterpay On-Site Messaging](../AFTERPAY-MESSAGING/Getting-Started-with-Afterpay-On-Site-Messaging.md) page for more information.
**JavaScript Library**
If you use the JavaScript Library for your messaging, it will be updated automatically, with advance notice sent via email.
If you use a specific version of the script, update to version
`1.x.js`
.
## Differences between Afterpay and Cash App Afterpay
* Cash App Afterpay is only available in the USA. Australia, New Zealand, and Canada use the Afterpay brand. The United Kingdom uses the Clearpay brand.
* Cash App Afterpay operates in US dollars only. [Cross Border Trade](../WELCOME/caa-cross-border-trade.md) is available.
* US customers will see *Cash App Afterpay* on your product and payment pages instead of *Afterpay*.
## Brand Assets
See the [Brand Assets](../MARKETING/Brand-Assets.md) page in this guide for new assets.
See the [Cash App Afterpay Merchant guidelines](https://www.figma.com/deck/yC8BbsBfhxkSnxrw8VtYna/Cash-App-Afterpay-%E2%80%93-Merch\[…]kF1jqQt-1\&scaling=min-zoom\&content-scaling=fixed\&page-id=0%3A1) online presentation for detailed information on how to display Cash App Afterpay.
Custom messaging updates must be reviewed by your Account Manager.
## FAQs
If you have a technical question on the migration, view our [FAQ](faq-migration.md) page.
---
# Platforms
This section is for merchants who use a platform for their integration. Find your platform in the list below for information on migration from Afterpay to Cash App Afterpay.
* [Adobe Commerce (Magento 2)](adobe-commerce-migration.md)
* [Adyen](adyen-migration.md)
* [Big Commerce](big-commerce-migration.md)
* [Ecwid](ecwid-migration.md)
* [PrestaShop](prestashop-migration.md)
* [Salesforce Commerce Cloud](salesforce-cc-migration.md)
* [Shopify](shopify-migration.md)
* [Stripe](stripe-migration.md)
* [Wix](wix-migration.md)
* [WooCommerce](woocommerce-migration.md)
Some platforms can't host Cash App Afterpay because these platforms are not available in the United States. Other platforms are not be available for Cash App Afterpay yet, but will be in the future. Contact us for more information.
---
# Adobe Commerce Migration
To use the Cash App Afterpay product with Adobe Commerce (Magento 2), upgrade your extension to the latest version. Specifically:
* Minimum v5.4.2 for Magento 2.4
* Minimum v4.3.3 for Magento 2.3
* Minimum v1.2.4 for Adobe PWA (Progressive Web Application) Studio
If you are on a lower version than these, please update. See the [Update My Adobe Commerce Extension](#update-my-adobe-commerce-extension) section below if you are not sure how to upgrade your extension to the latest version.
If you are on minimum or higher version, existing settings and configurations continue to work as before; there is no need to change them.
See the [Adobe Commerce Getting Started](/cash-app-afterpay/guides/platforms/adobe-commerce-magento) page for detailed technical information on the Cash App Afterpay integration with Adobe Commerce.
***
## Update My Adobe Commerce Extension
***
The Cash App Afterpay extension update method depends on how you, the merchant, have originally installed the Afterpay module.
If you used [Composer](https://getcomposer.org/) to install the Afterpay module, then use Composer to update it. If you used a manual process to install theAfterpay module, then use a [manual update](#manual-update) to update it.
The extension update process depends on whether you want to use [Composer](https://getcomposer.org/) to make the update, or do a [manual update](#manual-update). We recommend that you [update with Composer](#update-with-composer).
In either case, backup your system files before you start an update.
The module used to update to Cash App Afterpay is still called Afterpay. This doesn't affect any of the instructions or advice below.
### Update with Composer
In the instructions below, the
`[ADOBE-COMMERCE]`
folder refers to the root folder where Adobe Commerce/Magento is installed.
1. Open the Command Line Interface (CLI) and go to the `[ADOBE-COMMERCE]` folder on your server.
2. Run one of the following commands in the table to update the Afterpay module, depending on the Magento version:
| Magento version | Command to run |
| --------------- | --------------------------------------------------- |
| 2.4 | composer require afterpay-global/module-afterpay:^5 |
| 2.3 | composer require afterpay-global/module-afterpay:^4 |
| \< 2.3.0 | composer require afterpay-global/module-afterpay:^4 |
3. Make sure that Composer finishes the installation without errors.
4. Run the Adobe Commerce setup upgrade: `php bin/magento setup:upgrade`.
5. Run the Adobe Commerce Dependencies Injection Compile: `php bin/magento setup:di:compile`.
6. Run the Adobe Commerce Static Content deployment: `php bin/magento setup:static-content:deploy`.
7. Run the Adobe Commerce System Cache Flush: `php bin/magento cache:flush`.
### Cash App Pay Update with Composer
This section only applies if you have Cash App Pay installed together with Afterpay.
In the instructions below, the
`[CASH-APP-PAY]`
folder refers to the root folder where Cash App Pay is installed.
1. Open the Command Line Interface (CLI) and go to the `[CASH-APP-PAY]` folder on your server.
2. Run one of the following commands in the table to update the Cash App Pay module, depending on the Magento version:
| Magento version | Command to run |
| --------------- | --------------------------------------------------- |
| 2.4 | composer require afterpay-global/module-afterpay:^5 |
| 2.3 | composer require afterpay-global/module-afterpay:^4 |
| \< 2.3.0 | composer require afterpay-global/module-afterpay:^4 |
Then:
3. Make sure that Composer finishes the installation without errors.
4. Run the Adobe Commerce setup upgrade: `php bin/magento setup:upgrade`.
5. Run the Adobe Commerce Dependencies Injection Compile: `php bin/magento setup:di:compile`.
6. Run the Adobe Commerce Static Content deployment: `php bin/magento setup:static-content:deploy`.
7. Run the Adobe Commerce System Cache Flush: `php bin/magento cache:flush`.
## Manual Update
This method does not use Composer. It is more complex than using Composer, but just as effective when done correctly. Follow the instructions below.
### Remove old Afterpay files/folders
In the instructions below, the
`[ADOBE-COMMERCE]`
folder refers to the root folder where Adobe Commerce/Magento is installed.
1. Remove all the files in: `[ADOBE-COMMERCE]/app/code/Afterpay/Afterpay`. Then you are ready to download the Afterpay Extension.
### Download the Afterpay Extension
The extension is on GitHub. Do the following:
1. Go to GitHub for the link to [Magento 2](https://github.com/afterpay/afterpay-magento-2). The source code needed depends on your version of Magento. For these details, see the [Readme file](https://github.com/afterpay/afterpay-magento-2#readme).
2. Under the green *Code* heading, click **Download ZIP**. See the screenshot below:
3. Unzip your files and put them into a temporary folder.
You can install Adobe Commerce in any folder on your server. In this guide, `[ADOBE-COMMERCE]` is the name of the root folder where Adobe Commerce is installed.
#### Run the Commands
1. Copy the files from your temporary folder to the `[ADOBE-COMMERCE]/app/code/Afterpay/Afterpay` folder. The temporary folder is the one you created in Step 3 in the *Download the Afterpay Extension* section above.
2. Open the Command Line Interface (CLI) and make sure you are the owner of the `[ADOBE-COMMERCE]` folder. Run all CLI commands as the owner of the folder, not `root` and without `sudo`.
3. From the CLI, run the commands below:
| Command | Description |
| :----------------------------------------------- | :--------------------------------------------- |
| php bin/magento module:enable Afterpay\_Afterpay | Enable Afterpay extension. |
| php bin/magento setup:upgrade | Adobe Commerce setup upgrade. |
| php bin/magento setup:di:compile | Adobe Commerce dependencies injection compile. |
| php bin/magento setup:static-content:deploy | Adobe Commerce static content deployment. |
| php bin/magento cache:flush | Adobe Commerce system cache flush. |
Now you need to repeat the process for the *Cash App Pay Extension for Magento 2*:
1. Remove the existing files in the `[ADOBE-COMMERCE]/app/code/Afterpay/CashApp` folder.
2. Download and copy the files to the `[ADOBE-COMMERCE]/app/code/Afterpay/CashApp` folder. The source code path is based on the Magento version [here](https://github.com/afterpay/cash-app-pay-magento-2).
3. Open the Command Line Interface (CLI) and run the commands below:
| Command | Description |
| :---------------------------------------------- | :--------------------------------------------- |
| php bin/magento module:enable Afterpay\_CashApp | Enable the Cash App Pay extension. |
| php bin/magento setup:upgrade | Adobe Commerce setup upgrade. |
| php bin/magento setup:di:compile | Adobe Commerce dependencies injection compile. |
| php bin/magento setup:static-content:deploy | Adobe Commerce static content deployment. |
| php bin/magento cache:flush | Adobe Commerce system cache flush. |
You can find a table of the Afterpay Plugins for Adobe Commerce/Magento 2 [here](https://github.com/afterpay/afterpay-magento-2#install-manually). It also contains useful information on the manual installation process.
## Brand Assets
There are some new Cash App Afterpay brand assets to use at checkout and across your site. See the [Brand Assets](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/brand-assets) page in this guide for these new assets.
The table below has examples of the changes:
| | Afterpay | Cash App Afterpay |
| ------- | ------------------------------------------------------- | ------------------------------------------------------- |
| Logos | | |
| Buttons | | |
## Messaging
Messaging is automatically updated if you use On-Site Messaging, our current messaging product, or its predecessor that used the JavaScript library for messaging. In both cases wait for the automatic update process to occur. Monitor your email for advance notice of this automatic update.
See the table below for an example of the changes:
| Afterpay | Cash App Afterpay |
| ------------------------------------------------------- | ------------------------------------------------------- |
| | |
The automatic Messaging update includes changes to *learn more*/lightbox asset if you use that.
If you use elements of Afterpay Messaging but not the standard Onsite Messaging Widget, then update the Afterpay elements with new Cash App Afterpay elements. See the [Brand Assets](#brand-assets) section above.
Any custom messaging updates must be reviewed by your Account Manager.
## FAQs
If you have a technical question on the migration, see our [FAQs for the Migration](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/migration-fa-qs) page.
---
# Adyen Migration
Please contact your commercial contact at Adyen, or reach out to [support@adyen.com](mailto:support@adyen.com), to understand if and how this impacts your integration.
## Brand Assets
There are new Cash App Afterpay brand assets to use at checkout and across your site. See the [Brand Assets](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/brand-assets) page in this guide for these new assets.
The table below has examples of the changes:
| | Afterpay | Cash App Afterpay |
| ------- | ------------------------------------------------------- | ------------------------------------------------------- |
| Logos | | |
| Buttons | | |
## Messaging
Messaging is automatically updated if you use On-Site Messaging, our current messaging product, or its predecessor that used the JavaScript library for messaging. In both cases wait for the automatic update process to occur. Monitor your email for advance notice of this automatic update.
See the table below for an example of the changes:
| Afterpay | Cash App Afterpay |
| ------------------------------------------------------- | ------------------------------------------------------- |
| | |
The automatic Messaging update includes changes to *learn more*/lightbox asset if you use that.
If you use elements of Afterpay Messaging but not the standard Onsite Messaging Widget, then update the Afterpay elements with new Cash App Afterpay elements. See the [Brand Assets](#brand-assets) section above.
Any custom messaging updates must be reviewed by your Account Manager.
## FAQs
If you have a technical question on the migration, see our [FAQs for the Migration](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/migration-fa-qs) page.
---
# BigCommerce Migration
Contact [Merchant Support](/cash-app-afterpay/guides/welcome/getting-started/support) for information on migrating from Afterpay to Cash App Afterpay on a BigCommerce platform.
## Brand Assets
There are new Cash App Afterpay brand assets to use at checkout and across your site. See the [Brand Assets](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/brand-assets) page in this guide for these new assets.
The table below has examples of the changes:
| | Afterpay | Cash App Afterpay |
| ------- | ------------------------------------------------------- | ------------------------------------------------------- |
| Logos | | |
| Buttons | | |
## Messaging
Messaging is automatically updated if you use On-Site Messaging, our current messaging product, or its predecessor that used the JavaScript library for messaging. In both cases wait for the automatic update process to occur. Monitor your email for advance notice of this automatic update.
See the table below for an example of the changes:
| Afterpay | Cash App Afterpay |
| ------------------------------------------------------- | ------------------------------------------------------- |
| | |
The automatic Messaging update includes changes to *learn more*/lightbox asset if you use that.
If you use elements of Afterpay Messaging but not the standard Onsite Messaging Widget, then update the Afterpay elements with new Cash App Afterpay elements. See the [Brand Assets](#brand-assets) section above.
Any custom messaging updates must be reviewed by your Account Manager.
BigCommerce merchants with Afterpay Site Messaging will notice a discrepancy in the branding after the automatic migration from Afterpay to Cash App Afterpay.
As expected, Cash App Afterpay branding will appear on your product display pages/cart and during the Cash App Afterpay checkout flow. But the payment method display on your website's checkout page will still show the former Afterpay branding.
This is a temporary situation that we do not expect to last more than a few months.
## FAQs
If you have a technical question on the migration, see our [FAQs for the Migration](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/migration-fa-qs) page.
---
# Ecwid Migration
Contact [Merchant Support](/cash-app-afterpay/guides/welcome/getting-started/support) for information on migrating from Afterpay to Cash App Afterpay on an Ecwid platform.
## Brand Assets
There are new Cash App Afterpay brand assets to use at checkout and across your site. See the [Brand Assets](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/brand-assets) page in this guide for these new assets.
The table below has examples of the changes to assets:
| | Afterpay | Cash App Afterpay |
| ------- | ------------------------------------------------------- | ------------------------------------------------------- |
| Logos | | |
| Buttons | | |
## Messaging
Messaging is automatically updated if you use On-Site Messaging, our current messaging product, or its predecessor that used the JavaScript library for messaging. In both cases wait for the automatic update process to occur. Monitor your email for advance notice of this automatic update.
See the table below for an example of the changes:
| Afterpay | Cash App Afterpay |
| ------------------------------------------------------- | ------------------------------------------------------- |
| | |
The automatic Messaging update includes changes to *learn more*/lightbox asset if you use that.
If you use elements of Afterpay Messaging but not the standard Onsite Messaging Widget, then update the Afterpay elements with new Cash App Afterpay elements. See the [Brand Assets](#brand-assets) section above.
Any custom messaging updates must be reviewed by your Account Manager.
## FAQs
If you have a technical question on the migration, see our [FAQs for the Migration](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/migration-fa-qs) page.
---
# PrestaShop Migration
To migrate from Afterpay to Cash App Afterpay, update your module. When you upgrade the Afterpay module, you automatically receive the user experience benefits of Cash App Afterpay.
See the instructions below:
## Migrating to the New Cash App Afterpay Branding
There are two ways to migrate from Afterpay to Cash App Afterpay:
* [Use the PrestaShop Marketplace](#use-the-prestashop-marketplace)
* [Use the Module Manager updating tool](#use-the-module-manager-updating-tool)
We strongly recommend that you always use the latest version of the Afterpay module.
## Use the PrestaShop Marketplace
When the latest version of the Afterpay module is released on the PrestaShop Marketplace, the PrestaShop store should detect the new version. The PrestaShop store automatically shows the upgrade option.
To upgrade, to the following:
1. Go to the *Module Manager* section on the left menu bar. See the picture below:

2. Use the search bar to find the Afterpay installed module and click **Upgrade available**. See the picture below:

3. A confirmation window appears, see the picture below:

4. Ensure you have a backup of the site before any upgrade. Click **Go to maintenance page** to avoid possible cache issues. Click **Upgrade Anyway** if you have a backup of the site and are confident you can problem solve if necessary.
When the upgrade is finished you receive a confirmation message. The **Actions** button shows the regular options.
Open the Afterpay configuration *Settings* section to check that all the configurations are correct after the upgrade. See the picture below:

## Use the Module Manager Updating Tool
This is a manual update procedure you can use if you have disabled the upgrade option on your store. Do the following:
1. Go to the Module Manager Admin panel.
2. Go to the Prestashop Addons Marketplace and download the upgrade you want. We strongly recommend that you always have the latest version of the code.
3. To [download the files](https://addons.prestashop.com/en/other-payment-methods/51381-afterpay-buy-now-pay-later-always-interest-free.html) you must be logged into your PrestaShop account.
4. Open the *Module Manager* section and click **Upload a module**. See the picture below:

5. Select the previously downloaded file from your computer and upload it. See the pictures below:

6. A confirmation message appears when the module is installed.
## Brand Assets
There are new Cash App Afterpay brand assets to use at checkout and across your site. See the [Brand Assets](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/brand-assets) page in this guide for these new assets.
The table below has examples of the changes:
| | Afterpay | Cash App Afterpay |
| ------- | ------------------------------------------------------- | ------------------------------------------------------- |
| Logos | | |
| Buttons | | |
## Messaging
Messaging is automatically updated if you use On-Site Messaging, our current messaging product, or its predecessor that used the JavaScript library for messaging. In both cases wait for the automatic update process to occur. Monitor your email for advance notice of this automatic update.
See the table below for an example of the changes:
| Afterpay | Cash App Afterpay |
| ------------------------------------------------------- | ------------------------------------------------------- |
| | |
The automatic Messaging update includes changes to *learn more*/lightbox asset if you use that.
If you use elements of Afterpay Messaging but not the standard Onsite Messaging Widget, then update the Afterpay elements with new Cash App Afterpay elements. See the [Brand Assets](#brand-assets) section above.
Any custom messaging updates must be reviewed by your Account Manager.
## FAQs
If you have a technical question on the migration, see our [FAQs for the Migration](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/migration-fa-qs) page.
---
# Salesforce Commerce Cloud Migration
To migrate from Afterpay to Cash App Afterpay, update your cartridge. When you upgrade the Afterpay cartridge, you automatically receive the user experience benefits of Cash App Afterpay.
* Update the cartridge to v24.1.3 or higher
See the instructions below:
1. To use the Cash App Afterpay product with Salesforce, download the latest version of the Afterpay cartridge [here](https://github.com/afterpay/afterpay-salesforce-commerce-cloud).
2. See the [Install the Cartridge and Import the Metadata](#install-the-cartridge-and-import-the-metadata) section below to install the new cartridge and integrate it with your systems.
The SFCC cartridge and the Business Manager call Cash App Afterpay by the single word Afterpay. This doesn't affect any of the instructions or advice below.
## Install the Cartridge and Import the Metadata
To install the lastest version of the cartridge, do the following:
1. Download the cartridge
* The current version of the cartridge is available directly from [Cash App Afterpay](https://github.com/afterpay/afterpay-salesforce-commerce-cloud)
* It’s also hosted on Salesforce’s [AppExchange platform](https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3u00000R8GgbEAF\&tab=e)
2. Build the client-side Resources. These are the client-side CSS (Cascading Style Sheets) and JS (JavaScript) files that are specific to Cash App Afterpay; this is a required step.
* Confirm that `package.json` contains the correct reference to the location of the SFRA base cartridge (Only for SFRA):
3. Set the path. Set the path to the base cartridge of SFCC which is required for the Cash App Afterpay cartridge to work.
```
"paths": {
"base": "../storefront-reference-architecture/cartridges/app_storefront_base/"
},
```
4. Install/Run commands. These commands install the node in our cartridge onto your local storage and compiles the JS and CSS files residing in our cartridge.
```
$ npm install
$ npm run compile:js
$ npm run compile:scss
```
5. Import the cartridge. Use **UX Studio** to import the cartridge. Alternatively, you can also use **Node Package Manager (npm)** and run **uploadCartridge**, or the **VSCode Prophet** plugin.
Once you have completed the five steps above, you are ready to import the metadata. See the section below.
### Import the Metadata
For the Cash App Afterpay integration to work, the following object structures (metadata) must be imported and configured in the **Business Manager**. Do the following:
1. In the cartridge bundle go to the folder *metadata/afterpay-meta-import/sites*.
2. Rename the *RefArch* folder to the ID of your site. You can find the site ID in *Administration* > *Sites* > *Manage Sites* in the *Business Manager*.
3. Compress the *afterpay-meta-import* folder to generate the `afterpay-meta-import.zip` file.
4. In the *Business Manager*, go to *Administration* > *Site Development* > *Site Import & Export* and import the zipped file.
Once you have imported the metadata, you are ready to make some final checks. See the section below.
### Check For File Conflicts/Changes.
1. If you are using *SiteGenesis*, see the [SiteGenesis code changes](/cash-app-afterpay/guides/platforms/salesforce-commerce-cloud/site-genesis-code-changes) page to add Cash App Afterpay-specific code changes to your base store cartridges.
2. If you are using *SFRA*, see the [SFRA Files change review](/cash-app-afterpay/guides/platforms/salesforce-commerce-cloud/sfra-files-change-review) page to see the files that override the files in the base cartridge.
## Brand Assets
There are new Cash App Afterpay brand assets to use at checkout and across your site. See the [Brand Assets](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/brand-assets) page in this guide for these new assets.
The table below has examples of the changes:
| | Afterpay | Cash App Afterpay |
| ------- | ------------------------------------------------------- | ------------------------------------------------------- |
| Logos | | |
| Buttons | | |
## Messaging
Messaging is automatically updated if you use On-Site Messaging, our current messaging product, or its predecessor that used the JavaScript library for messaging. In both cases wait for the automatic update process to occur. Monitor your email for advance notice of this automatic update.
See the table below for an example of the changes:
| Afterpay | Cash App Afterpay |
| ------------------------------------------------------- | ------------------------------------------------------- |
| | |
The automatic Messaging update includes changes to *learn more*/lightbox asset if you use that.
If you use elements of Afterpay Messaging but not the standard Onsite Messaging Widget, then update the Afterpay elements with new Cash App Afterpay elements. See the [Brand Assets](#brand-assets) section above.
Any custom messaging updates must be reviewed by your Account Manager.
## FAQs
If you have a technical question on the migration, see our [FAQs for the Migration](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/migration-fa-qs) page.
---
# Shopify Migration
If you'realready using the **Afterpay US (New)** payment app, no action is required. The new Cash App Afterpay branding will be updated automatically. Here's how it should appear:
If you haven't migrated from the **Afterpay (New)** payment app to **Afterpay US (New)**, see [Migrate to the Afterpay US App](#migrate-to-the-afterpay-us-app) below.
While the Shopify App Store listing and app logo will reflect the new Cash App Afterpay brand, the payment app itself will continue to be called
**Afterpay US**
. If you see Afterpay US (New) under your additional payment methods, you're all set.
## Afterpay US Messaging
Messaging automatically works if you use the Afterpay On-Site Messaging app or the liquid code snippet from the Afterpay technical guide. No work is needed, as the messaging is automatically enabled.
Messaging uses settings from Afterpay Messaging. It automatically displays the correct branding per region.
## Brand Assets
There are new Cash App Afterpay brand assets to use at checkout and across your site. See the [Brand Assets](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/brand-assets) page in this guide for these new assets.
The table below has examples of the changes:
| | Afterpay | Cash App Afterpay |
| ------- | ------------------------------------------------------- | ------------------------------------------------------- |
| Logos | | |
| Buttons | | |
Any custom messaging updates must be reviewed by your Account Manager.
### Cash App Afterpay Messaging
Messaging automatically works if you use the Afterpay On-Site Messaging app, or the liquid code snippet from the Afterpay technical guide. No migration work is needed as the messaging is automatically enabled. Monitor your email for advance notice of this automatic update. The messaging uses settings from Afterpay Messaging and automatically displays the correct branding per region.
See the table below for an example of the changes:
| Afterpay | Cash App Afterpay |
| ------------------------------------------------------- | ------------------------------------------------------- |
| | |
The automatic Messaging update includes changes to *learn more*/lightbox asset if you use that.
If you use elements of Afterpay Messaging but not the standard Onsite Messaging Widget, then update the Afterpay elements with new Cash App Afterpay elements. See the [Brand Assets](#brand-assets) section above.
Any custom messaging updates must be reviewed by your Account Manager.
## Migrate to the Afterpay US app
If you haven't migrated to the Afterpay US app yet, follow these two steps:
1. Install the **Afterpay US** payment app.
2. Deactivate the **Afterpay** payment app you'd previously been using.
Before you start, make sure you meet the requirements for the migration, see
[Requirements](#requirements)
at the bottom of the page.
### Install the Afterpay US App
For this migration, you don't need your merchant credentials to configure Afterpay US.
1. Click [here](https://accounts.shopify.com/store-login?redirect=settings%2Fpayments/alternative-providers/84934657) to download the Afterpay US payment app.
2. When the **Install app** screen appears, click **Install**.
3. Once installed, Afterpay US (New) appears in your list of apps, ready to activate. Click **Activate**.
Once Afterpay US (New) appears with the green 'Active' sign next to it, your customers can immediately use Afterpay US to make payments. You don't need to do any further work to configure the app.
### Deactivate the previous Afterpay app
The final task is to deactivate the **Afterpay (New)** payment app in Shopify. Despite its name, this is the app you'd previously been using.
1. Go to **Shopify Admin**.
2. Go to **Settings**, then select **Payments**.
3. Under Additional payment methods, select **Afterpay (New)**. Make sure *not* to select **Afterpay US (New)**, which you just installed.
4. On the Afterpay (New) screen, click **Deactivate**, then click **Deactivate** again to confirm your choice.
5. Return to your list of additional payment methods. Make sure that **Afterpay US (New)** is listed as an active payment method; **Afterpay (New)** shouldn't be on the list.
In case you need to issue a refund, capture payments, or void payments that were previously made with Afterpay, we recommend that you keep the
**Afterpay (New)**
payment app in your system. After you deactivate the app, don't uninstall it.
## New payment method name
The Afterpay US payment app uses a new payment method name: **Afterpay US (New)**.
If your store has post-order processes that rely on the payment method name—like Shopify Flows or custom reporting—update any references from **Afterpay (New)** to **Afterpay US (New)**.
This only applies to merchants with custom backend systems that use the payment method name to trigger workflows.
## FAQs
If you have a technical question on the migration, see our [FAQs for the Migration](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/migration-fa-qs) page or below for Shopify-specific FAQs.
#### Refunds - I’m having trouble completing a refund, what should I do?
If the payment was taken on the Afterpay payment gateway and you have uninstalled the app, you must reinstall the app. Follow [these instructions](/cash-app-afterpay/guides/platforms/shopify) to install the Afterpay app. You will not need to configure your Afterpay app again.
Please do not activate the Afterpay app (leave it deactivated).
#### Cross Border Trade (CBT) - are all customers available to use Cross Border Trade on my Shopify store?
Cross Border Trade is available to Afterpay customers. It is not yet available to Cash App customers new to Afterpay.
Before the customer checks out, they see the appropriate brand for your shop's region. When the customer checks out, they see the appropriate brand based on the region associated with their Afterpay account.
For example, if your store is set in US, and your customer is based in the Canada, they will see the following brands:
* On your Shopify store: Cash App Afterpay
* During Afterpay checkout: Afterpay
#### Help! I accidentally uninstalled the Afterpay (New) app.
If you uninstalled the Afterpay (New) payment app when migrating to the Afterpay US app, you must reinstall Afterpay (New) to manage outstanding Afterpay orders placed before the migration.
Follow these steps:
1. Use this link to log in to your Shopify account and reinstall the app: [Reinstall Afterpay (New) App](https://accounts.shopify.com/store-login?redirect=settings%2Fpayments/alternative-providers/1057655)
2. Once you reinstall the app, don't activate it. Reinstalling without activating lets you manage transactions that occurred before you migrated.
3. Now that the app is reinstalled, you can issue refunds for pre-migration Afterpay orders, capture payments for pending transactions, and void payments as needed.
To avoid any issues with managing pre-migration Afterpay orders, we recommend keeping the Afterpay (New) app installed on your Shopify store.
#### Afterpay appears twice at checkout
If Afterpay appears twice at checkout (as shown above), make sure to deactivate the **Afterpay (New)** app. Only the **Afterpay US (New)** app should be active. Follow the instructions to [deactivate the previous Afterpay app](#deactivate-the-previous-afterpay-app).
#### Update the Afterpay Banner
If you use the banner as part of your messaging, follow the instructions below to update it:
1. On Shopify, open the code editor to edit the theme files.
2. In theme.liquid, delete `{% section 'afterpay-banner' %}`.
3. Delete the afterpay-banner.liquid file.
4. Follow the steps [here](/cash-app-afterpay/guides/platforms/shopify/add-a-cash-app-afterpay-banner-to-shopify) to add the Cash App Afterpay banner to your theme.
#### Requirements
To avoid issues installing the new Afterpay US payment app, check that you have Shopify installed and working.
Make sure that your company or organization meets the following requirements:
Your business address is in one of the the following:
* Australia
* Canada
* Hong Kong SAR
* New Zealand
* United Kingdom
* United States
You must ship to the United States.
You must accept the currency USD (United States Dollars).
---
# Stripe Migration
Please follow the instructions provided by Stripe [here](https://support.stripe.com/questions/afterpay-is-now-branded-as-cash-app-afterpay-in-the-us).
## Brand Assets
There are new Cash App Afterpay brand assets to use at checkout and across your site. See the [Brand Assets](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/brand-assets) page in this guide for these new assets.
The table below has examples of the changes:
| | Afterpay | Cash App Afterpay |
| ------- | ------------------------------------------------------- | ------------------------------------------------------- |
| Logos | | |
| Buttons | | |
## Messaging
See the table below for an example of the changes:
| Afterpay | Cash App Afterpay |
| ------------------------------------------------------- | ------------------------------------------------------- |
| | |
## FAQs
If you have a technical question on the migration, see our [FAQs for the Migration](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/migration-fa-qs) page.
---
# Wix Migration
No action is needed. The brand updates automatically appear when the migration from Afterpay to Cash App Afterpay occurs. See the [FAQ](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/migration-fa-qs) for when this migration will occur.
*Cash App Afterpay*
may appear as
*Afterpay*
on the administration page of the Wix website.
## Brand Assets
There are new Cash App Afterpay brand assets to use at checkout and across your site. See the [Brand Assets](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/brand-assets) page in this guide for these new assets.
The table below has examples of the changes:
| | Afterpay | Cash App Afterpay |
| ------- | ------------------------------------------------------- | ------------------------------------------------------- |
| Logos | | |
| Buttons | | |
## Messaging
Messaging is automatically updated if you use On-Site Messaging, our current messaging product, or its predecessor that used the JavaScript library for messaging. In both cases wait for the automatic update process to occur. Monitor your email for advance notice of this automatic update.
See the table below for an example of the changes:
| Afterpay | Cash App Afterpay |
| ------------------------------------------------------- | ------------------------------------------------------- |
| | |
The automatic Messaging update includes changes to *learn more*/lightbox asset if you use that.
If you use elements of Afterpay Messaging but not the standard Onsite Messaging Widget, then update the Afterpay elements with new Cash App Afterpay elements. See the [Brand Assets](#brand-assets) section above.
Any custom messaging updates must be reviewed by your Account Manager.
## FAQs
If you have a technical question on the migration, see our [FAQs for the Migration](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/migration-fa-qs) page.
---
# WooCommerce Migration
To use the Cash App Afterpay product with WooCommerce, update the *Afterpay Gateway for WooCommerce* extension to the latest version, minimum v3.8.7
If you are on a lower version than this, please update. See the [Update Plugin](#update-plugin) section below if you're not sure how to upgrade your plugin to the latest version.
If you are on the minimum or higher version, existing settings and configurations continue to work as before; there is no need to change them.
## Update Plugin
To update the 'Afterpay Gateway for WooCommerce' plugin, please follow the below steps.
The Cash App Afterpay plugin is called the Afterpay Gateway for WooCommerce. This doesn't affect any of the instructions or advice below.
As updates for the **Afterpay Gateway for WooCommerce** plugin are released, notifications appear in WordPress Admin.
A number appears in WordPress Admin next to the Plugins link, it shows the number of plugin updates available.

We strongly recommend that you backup website files and data before you do an update.
### Upgrade Instructions
1. Go to the **WordPress Admin Dashboard**.
2. Go to **Plugins** > **Installed Plugins**.
3. Find the **Afterpay Gateway for WooCommerce** in the plugin list.
> The version update notification is displayed, with links to the release details, and to update the plugin.
4. Click the **update now** link.

5. The **Afterpay Gateway for WooCommerce** plugin now starts to update.

6. Once complete, the notification bar turns green and the text changes to **Updated!**.

## Brand Assets
There are new Cash App Afterpay brand assets to use at checkout and across your site. See the [Brand Assets](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/brand-assets) page in this guide for these new assets.
The table below has examples of the changes:
| | Afterpay | Cash App Afterpay |
| ------- | ------------------------------------------------------- | ------------------------------------------------------- |
| Logos | | |
| Buttons | | |
Any custom messaging updates must be reviewed by your Account Manager.
## Messaging
Messaging is automatically updated if you use On-Site Messaging, our current messaging product, or its predecessor that used the JavaScript library for messaging. In both cases wait for the automatic update process to occur. Monitor your email for advance notice of this automatic update.
See the table below for an example of the changes:
| Afterpay | Cash App Afterpay |
| ------------------------------------------------------- | ------------------------------------------------------- |
| | |
The automatic Messaging update includes changes to *learn more*/lightbox asset if you use that.
If you use elements of Afterpay Messaging but not the standard Onsite Messaging Widget, then update the Afterpay elements with new Cash App Afterpay elements. See the [Brand Assets](#brand-assets) section above.
Any custom messaging updates must be reviewed by your Account Manager.
## FAQs
If you have a technical question on the migration, see our [FAQs for the Migration](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/migration-fa-qs) page.
---
# SDK Migration Guide
This guide is relevant for merchants using the [iOS](https://github.com/afterpay/sdk-ios) and [Android](https://github.com/afterpay/sdk-android) native app SDKs for their current Afterpay integration.
All merchant-owned surfaces featuring “Afterpay” will need to be updated to reflect the new “Cash App Afterpay” brand. This includes the product detail page, cart, checkout, FAQs, emails, and any other pages using Afterpay branding.
## What do I need to do?
### Afterpay checkout
No action is needed. The brand updates will automatically appear within Afterpay checkout when Afterpay is migrated to Cash App Afterpay.
### UI messaging elements
The native Afterpay SDK provides its own UI elements that merchants can use ([iOS](https://afterpay.github.io/sdk-ios/ui-components/) and [Android](https://afterpay.github.io/sdk-android/ui-components/)). These UI elements are embedded in the app's codebase and can't be controlled dynamically from Cash App Afterpay's backend.
The steps to migrate from Afterpay branding to Cash App Afterpay branding depends on whether you use Afterpay's UI elements or your own custom UI elements.
#### Afterpay UI elements
If you use Afterpay UI elements, update your SDK to version 4.8+ on Android and version 5.8+ on iOS to access the rebranded assets.
When you update, you'll see new names that refer to both the Afterpay themes and the Cash App Afterpay themes. A mapping of the themes and their assets are in the table below.
| Legacy Afterpay theme | Afterpay asset | New Cash App Afterpay theme | New Cash App Afterpay asset |
| --------------------- | ------------------------------------------------------- | --------------------------- | ------------------------------------------------------- |
| mintOnBlack | | Default | |
| blackOnMint | | Alt | |
| blackOnWhite | | Light Monochrome | |
| whiteOnBlack | | Dark Monochrome | |
##### Cash App Afterpay regions
If your region migrated to the new Cash App Afterpay themes, then the SDK will use the new Cash App Afterpay assets. You must select your preferred theme.
**Asset changes**
* The "Place order" button is replaced by a "Continue with" button. All other button types are the same.
* For the Price Breakdown component, the US region now only supports the Lockup logo type ([iOS](https://afterpay.github.io/sdk-ios/ui-components/price-breakdown/#logo-type) and [Android](https://afterpay.github.io/sdk-android/ui-components/price-breakdown/#logo-type)). Both the Compact Badge and Badge logo types are no longer supported in the US region.
##### Afterpay regions
If your region uses the Afterpay themes, you'll still need to select the appropriate Cash App Afterpay theme that corresponds to the Afterpay asset. However, there will be no changes to the UI and all logos will remain supported.
#### Custom UI elements
If you use custom UI elements, update your custom assets with our rebranded versions [here](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/brand-assets).
### Need help?
If you have any questions, please contact your Account Manager.
---
# FAQs for the Migration
If your app uses an explicit allowlist of Afterpay domains, you
*must*
add
`api.cash.app`
and
`cash.app`
to the allowlist.
## Migration Requirements
Afterpay is becoming more easily accessible to Cash App users as part of Afterpay's integration with Cash App.
This means we're changing the Afterpay logo where it appears on your site to attract the 50M Cash App users\* who do not use Afterpay while retaining your current Afterpay shoppers.
The new Afterpay assets for your site incorporate proven messaging and design to acquire Cash App users and continue transacting with Afterpay users.
Merchants who update Afterpay throughout their site will benefit from incremental sales and new customers from our total network.
*\* Definitions & Source: A Cash App active is defined as a monthly transacting active user with at least one transaction monthly. Actives eligible for Afterpay include account owners who are 18+ and non-business accounts as of 2024.*
No. Cash App for Business is a product that enables small, often single proprietor businesses to set up a business profile to accept Cash App payments.
No. This update gives you access to Cash App customers through the existing Afterpay experience. You just need to update the brand - no other changes are needed.
Merchants with existing integrations will receive seamless updates, and Afterpay will complete all certifications before updates are made. We expect merchants will have minimal or no involvement with these changes, depending on how merchants displayed Afterpay.
The checkout experience will not change for the existing Afterpay customers. These customers will use the same login credentials, see the same checkout experience, and continue to service all orders via Afterpay.
Yes, we will make the necessary changes on your behalf if you use [Afterpay Messaging](/cash-app-afterpay/guides/afterpay-messaging/getting-started). Please contact your Account Manager for specific questions.
Our Support Hub is available to help you take advantage of the new brand. Please view our Support Hub [here](https://help.business.afterpay.com/hc/en-us).
Yes, we recommend coupling any site rebranding work with implementing Dynamic Messaging. Please speak to your Merchant Delivery partner for guidance.
## Customer Support Questions
Customers are the people that buy your goods or services. These are some questions they may ask.
No, customers won't automatically get a Cash App account when they sign up for Cash App Afterpay.
No. When you pay with Cash App, you can use your balance. If you do not have enough money then you can pay with a linked debit card instead.
Cash App Afterpay customers' payment instruments (cards) are unchanged.
Yes, this change does not change the way Cash App's customers use Cash App to send, bank, and invest.
No, Cash App Afterpay is only available to customers over the age of 18.
There are three key touchpoints to show your customers:
* Product details
* Shopping cart
* Checkout pages
See our [Cash App Afterpay Merchant Guidelines](https://www.figma.com/deck/yC8BbsBfhxkSnxrw8VtYna/Cash-App-Afterpay-%E2%80%93-Merch\[…]kF1jqQt-1\&scaling=min-zoom\&content-scaling=fixed\&page-id=0%3A1) guidelines to learn about the customer experience.
See our [Cash App Afterpay Merchant Guidelines](https://www.figma.com/deck/yC8BbsBfhxkSnxrw8VtYna/Cash-App-Afterpay-%E2%80%93-Merch\[…]kF1jqQt-1\&scaling=min-zoom\&content-scaling=fixed\&page-id=0%3A1) guidelines to learn about the customer experience.
Throughout 2025, both Afterpay and Cash App will make this update clear to our combined 58M monthly transacting active customers. We will also launch scaled awareness campaigns to excite and attract even more customers for our merchants.
## Merchant Support Questions
This section has questions that merchants may ask.
Cash App Pay and Cash App Afterpay will remain two separate products and integrations. See the [What is Cash App Pay and What is Cash App Afterpay?](/cash-app-afterpay/guides/welcome/getting-started/cash-app-pay-vs-cash-app-afterpay) page for details about the two products.
Cash App Pay is not affected by this change.
If you currently use Afterpay, your branding changes to Cash App Afterpay. See the [Migrate from Afterpay to Cash App Afterpay](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay) page for specific information about your integration method and how to update your branding from Afterpay to Cash App Afterpay.
Yes. All orders are still being processed by Afterpay and will be reflected in the Business Hub.
The change is only applicable to the US (not inclusive of US territories). The experience will not change outside of the US, and the existing Afterpay brand will remain in place outside the US.
Yes.
There is access to the same analytics that you have today. All Afterpay orders are captured and reported in Hub/Portal/IQ.
No, we do not expect a decline in AOV thanks to our proprietary data and underwriting.
See our [Migration Guides](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay) for all integration details related to this update.
You'll receive emails about important updates on what is changing and when. Please make sure your contact information is up to date in your Merchant Hub.
We're making this change to serve the total customer network of Afterpay and Cash App. Today, 50 million *Cash App actives* do not use Afterpay. This change allows Afterpay's merchants to seamlessly transact with meaningfully more customers than ever before.
This change has been thoroughly tested and proven to attract new Cash App users while also retaining existing Afterpay users.
*\* Definitions & Source: A Cash App active is defined as a monthly transacting active user with at least one transaction monthly. Actives eligible for Afterpay include account owners who are 18+ and non-business accounts as of 2024.*
Cash App Afterpay customers can still make CBT purchases. Cash App customers that are new to Cash App Afterpay will not see options to use CBT.
No, there is no effect on disputes.
Yes. Express Checkout continues to work the same as before.
No, the URL stays the same: [https://portal.afterpay.com/us/login-email](https://portal.afterpay.com/us/login-email)
OAuth continues to work the same as before.
The change is only applicable to the US (not inclusive of US territories). The experience will not change outside of the US, and the existing Afterpay brand will remain in place outside the US.
No. Pay Monthly continues to be available to Cash App Afterpay customers.
We recommend moving to the new brand as soon as possible.
No, there is no effect on refunds.
No, there is no effect on settlements.
This depends on your integration method. See the documentation specific to your integration method to learn about the rollout.
No, this is not possible today.
We use the customer data provided during the Create Checkout API call.
We recommend making any changes needed by March 17, 2025.
---
# Brand Assets
There are links to a variety of visual assets on this page. Use them to inform your customers that Cash App Afterpay is available as a payment method.
To increase brand awareness, we recommend using brand assets with Cash green. See the [Cash App Afterpay Merchant guidelines](https://www.figma.com/deck/yC8BbsBfhxkSnxrw8VtYna/Cash-App-Afterpay-%E2%80%93-Merchant-Guidelines?node-id=1-61\&viewport=-67%2C-97%2C0.47\&t=oY1HyyBF6E1NB35m-1\&scaling=min-zoom\&content-scaling=fixed\&page-id=0%3A1) online presentation for much more information on how to display and present Cash App Afterpay.
## Logos
Our embeddable code snippets are designed to optimize your checkout experience. For implementation best practices, see our
[Merchant Guidelines](https://www.figma.com/deck/yC8BbsBfhxkSnxrw8VtYna/Cash-App-Afterpay-%E2%80%93-Merchant-Guidelines?node-id=1-61&viewport=-67%2C-97%2C0.47&t=oY1HyyBF6E1NB35m-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1)
.
### Logo Lockup
| Green Black | Green White |
| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| | |
| `html ` | `html` |
| Black | White |
| ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| | |
| `html` | `html` |
### Payment Badge
#### Rounded
***
`html`
***
`html`
***
`html`
***
`html`
#### Squared
***
`html`
***
`html`
***
`html`
***
`html`
#### Alternative
***
`html`
***
`html`
## Afterpay Messaging
Afterpay Messaging informs your customers—as they browse—that pay by installments with Afterpay is available. This helps to improve your conversion rates and average order value.
Visit our [Messaging Guide](/cash-app-afterpay/guides/afterpay-messaging/getting-started) to learn about implementation.
## Buttons
Our embeddable code snippets are designed to optimize your checkout experience. For implementation best practices, see our
[Merchant Guidelines](https://www.figma.com/deck/yC8BbsBfhxkSnxrw8VtYna/Cash-App-Afterpay-%E2%80%93-Merchant-Guidelines?node-id=1-61&viewport=-67%2C-97%2C0.47&t=oY1HyyBF6E1NB35m-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1)
.
### Button Styles
#### Rectangular
| Black Green | Green Black |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| | |
| `html` | `html` |
| Black White | White Black |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| | |
| `html` | `html` |
#### Rounded
| Black Green | Green Black |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| | |
| `html` | `html` |
| Black White | White Black |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| | |
| `html` | `html` |
### Button Types
| Checkout With | Continue With |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| | |
| `html` | `html` |
| Pay With | Buy With |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| | |
| `html` | `html` |
| Checkout With - Green | Continue With - Green |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| | |
| `html` | `html` |
| Pay With - Green | Buy With - Green |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| | |
| `html` | `html` |
## Marketing Assets
Coming soon!
## Download
**We strongly recommended going code-first.** Our embeddable code snippets are designed to optimize your checkout experience.
To download our brand assets, [click here](https://static.afterpaycdn.com/en-US/integration/\$ap-brand-assets.zip).
---
# On-Site Messaging Migration
Your existing Afterpay messaging will automatically map to the new Cash App Afterpay branding. The themes will transition automatically based on your current selections. All existing integration code will continue to work; no action is required unless you want to change themes.
These changes only apply to merchants in the US.
Background color detection afffects some asset themes. If background color dependency is marked "Yes," it means you'll see a light variant on a light background, and a dark variant on a dark background.
### Messaging assets mapping
Badge configurations also apply to the compact badge
| Asset Type | Configuration | Afterpay Theme | Before | Cash App Afterpay Theme | After | Background Color Dependency |
| ---------------------- | ----------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------- |
| Default Lockup | `"logoType": "lockup"` | Black lockup | | Mono light | | No |
| Lockup - Mint | `"logoType": "lockup", "lockupTheme": "mint"` | Mint lockup | | Color - Light variant OR Dark variant | or | Yes |
| Lockup - White | `"logoType": "lockup", "lockupTheme": "white"` | White lockup | | Mono dark | | No |
| Lockup - Black | `"logoType": "lockup", "lockupTheme": "black"` | Black lockup | | Mono light | | No |
| Badge Default | `"logoType": "badge"` | Black on mint badge | | Color - Light variant OR Dark variant | or | Yes |
| Badge - Black on Mint | `"logoType": "badge", "badgeTheme": "black-on-mint"` | Black on mint badge | | Color - Light variant OR Dark variant | or | Yes |
| Badge - Mint on Black | `"logoType": "badge", "badgeTheme": "mint-on-black"` | Mint on black badge | | Color - Light variant OR Dark variant | or | Yes |
| Badge - White on Black | `"logoType": "badge", "badgeTheme": "white-on-black"` | White on black badge | | Mono - Dark variant OR Light variant | or | Yes |
| Badge - Black on White | `"logoType": "badge", "badgeTheme": "black-on-white"` | Black on white badge | | Mono - Dark variant OR Light variant | or | Yes |
### Modal assets mapping
| Asset Type | Configuration | Afterpay Modal | Before | Cash App Afterpay Modal | After | Background Color Dependency |
| ----------- | ----------------------- | -------------- | ------------------------------------------------------- | -------------------------------- | ------------------------------------------------------- | --------------------------- |
| Mint Modal | `"modalTheme": "mint"` | Mint Modal | | Standard Cash App Afterpay Modal | | No |
| White Modal | `"modalTheme": "white"` | White Modal | | Standard Cash App Afterpay Modal | | No |
### Icon assets mapping
| Asset Type | Configuration | Afterpay Icon | Before | Cash App Afterpay Icon | After | Background Color Dependency |
| ---------- | --------------------- | ------------- | ------------------------------------------------------- | ---------------------- | ------------------------------------------------------- | --------------------------- |
| Icon | `"data-type": "icon"` | Afterpay Icon | | Cash App Afterpay Icon | | No |
---
# Platforms - Quickstart
If your app uses an explicit allowlist of Afterpay domains, you
*must*
add
`api.cash.app`
and
`cash.app`
to the allowlist.
**How can I add Cash App Afterpay to my store?**
***
If you are an Afterpay merchant, see the [Migration page](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay) for information on the migration from Afterpay to Cash App Afterpay.
Cash App Afterpay is integrated with many popular e-commerce platforms. Get up and running quickly, without having to write any code with our e-commerce plugins.
**Are You a Developer?**
If you are building a custom integration, see the [API Quickstart](/cash-app-afterpay/guides/api-development/api-quickstart) page for details.
## Step 1 - Choose Your platform
You need a platform that manages your payments. Cash App Afterpay is available on many of these platforms. Common platforms include Shopify, Magento and WooCommerce. If you don't find your platform you can still integrate with Cash App Afterpay. See the [API Quickstart](/cash-app-afterpay/guides/api-development/api-quickstart) page for details.
## Step 2 - Set Up Your Cash App Afterpay Merchant Account
Sign up for a merchant account at [get.afterpay.com](https://get.afterpay.com/app/).
## Step 3 - Connect Your Cash App Afterpay Account
Once your merchant account has been created, you can copy and paste your credentials into your platform plugin.
If you have a development environment you can connect your sandbox credentials to your plugin for testing.
## Step 4 - Cash App Afterpay is Live!
Your customers can now use Cash App Afterpay at checkout. Join our shop directory so that we can send you highly qualified leads, and watch your sales grow!
---
# Adobe Commerce - Getting Started
If you are an Afterpay merchant, see the [Migration page](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/platforms/adobe-commerce-magento-migration) for information on the migration from Afterpay to Cash App Afterpay.
To integrate Cash App Afterpay with Adobe Commerce, follow the instructions below.
**What are the requirements for the Cash App Afterpay Adobe Commerce Extension?**
***
Cash App Afterpay is available for **Adobe Commerce (Magento 2)** merchants with a store address in the United States only.
[Express Checkout](../../../docs/EXPRESS-CHECKOUT/What-is-Express-Checkout.md) is available with Version 3.4.0 and above.
The Cash App Pay Extension for Adobe Commerce/Magento 2 is only available to US merchants. See the [Adobe Commerce - Install Extension](AC-Install-Extension.md) topic for more details.
### Adobe Commerce Version
The Cash App Afterpay Extension for Adobe Commerce (Magento) is compatible with version 2.2 or greater.
### Store Currency
The Cash App Afterpay Extension relies on a dedicated Website Scope used for each market region (country) with a corresponding Base Currency set in Adobe Commerce Admin.
To set the Base Currency, go to\
**Stores** → **Configuration** → **Currency Setup** and set the currency to:
* United States Dollars (USD)
## Next Step
Now install the extension; follow the instructions on the [Install Extension](AC-Install-Extension.md) page.
---
# Adobe Commerce - Install Extension
**How Can I Install and Enable the Adobe Commerce Extension?**
***
## Overview
There are two ways to install and enable the Adobe Commerce Cash App Afterpay Extension:
* Use [Composer](https://getcomposer.org) to automatically download and install the files it gets from [Packagist](https://packagist.org/). We recommend this method
* Do a manual install
Both these ways involve locating and installing the Cash App Afterpay Extension for Adobe Commerce (Magento 2). Composer does this task automatically. For manual installations, you must locate and download these public repos for Adobe Commerce (Magento 2):
* [Cash App Afterpay Extension for Magento 2](https://github.com/afterpay/afterpay-magento-2)
* [Cash App Pay Extension for Magento 2](https://github.com/afterpay/cash-app-pay-magento-2)
You can also use the "headless" methods, GraphQL and REST API. See the [Headless Support](#headless-support) section below.
## Composer
We recommend you use [Composer](https://getcomposer.org) to manage your repos and dependencies. This is a recommendation, not a requirement.
If you use Composer, make sure you install the correct module version that corresponds to your Adobe Commerce/Magento version. For example, module version 5.x works with Magento 2.4.x. The various modules and their corresponding Commerce/Magento version appear in this [GitHub table](https://github.com/afterpay/afterpay-magento-2#install-using-composer-recommended). See Step 2 below.
Do the following:
1. In Composer, open the Command Line Interface (CLI) and go to the *Adobe Commerce* project root directory on your server.
2. In the CLI, run this command to install the Cash App Afterpay module: `composer require afterpay-global/module-afterpay`. See the [GitHub table](https://github.com/afterpay/afterpay-magento-2#install-using-composer-recommended) for the specific Cash App Afterpay module you need to specify.
3. Make sure that Composer finishes the installation without errors.
4. Run the Adobe Commerce setup upgrade: `php bin/magento setup:upgrade`.
5. Run the Adobe Commerce Dependencies Injection Compile: `php bin/magento setup:di:compile`.
6. Run the Adobe Commerce Static Content deployment: `php bin/magento setup:static-content:deploy`.
7. Run the Adobe Commerce System Cache Flush: `php bin/magento cache:flush`.
## Manual Procedure
This method does not use Composer. It is a more complex than using Composer, but just as effective when done correctly. Follow the instructions below.
### Download the Cash App Afterpay Extension
The extension is on the GitHub. Do the following:
1. Go to the GitHub for the link to [Magento 2](https://github.com/afterpay/afterpay-magento-2) for the most up-to-date version.
The Cash App Afterpay plugins and associated information are all in the [Afterpay-Magento-2](https://github.com/afterpay/afterpay-magento-2) part of the GitHub.
The source code needed depends on your version of Magento. See the Readme file in the [Afterpay-Magento-2](https://github.com/afterpay/afterpay-magento-2) part of GitHub.
2. Under the green *Code* heading, click **HTTPS** and click **Download ZIP**. See screenshot below:

3. Unzip your files and put them into a temporary folder.
You can install Adobe Commerce in any folder on your server. In this guide, \[ADOBE-COMMERCE] is the name of the root folder where Adobe Commerce is installed.
## Run the Commands
1. Create the folder `Afterpay/Afterpay` in \[ADOBE-COMMERCE]/app/code.
2. Copy the files from your temporary folder to the `Afterpay/Afterpay` folder. The temporary folder is the one you created in Step 3 in the *Download the Afterpay Extension* section above.
3. Open the Command Line Interface (CLI) and make sure you are the owner of the \[ADOBE-COMMERCE] folder. Run all the CLI commands as the owner of the folder, not `root` and without `sudo`.
4. From the CLI, run the commands below:
| Command | Description |
| :----------------------------------------------- | :--------------------------------------------- |
| php bin/magento module:enable Afterpay\_Afterpay | Enable Afterpay extension. |
| php bin/magento setup:upgrade | Adobe Commerce setup upgrade. |
| php bin/magento setup:di:compile | Adobe Commerce dependencies injection compile. |
| php bin/magento setup:static-content:deploy | Adobe Commerce static content deployment. |
| php bin/magento cache:flush | Adobe Commerce system cache flush. |
Now you need to repeat the process for the *Cash App Pay Extension for Magento 2*:
1. Create the folder `Afterpay/CashApp` in \[ADOBE-COMMERCE]/app/code.
2. Download and copy the files to the `Afterpay/CashApp` folder. The source code path is based on the Magento version [here](https://github.com/afterpay/cash-app-pay-magento-2).
3. Open the Command Line Interface (CLI) and run the commands below:
| Command | Description |
| :---------------------------------------------- | :--------------------------------------------- |
| php bin/magento module:enable Afterpay\_CashApp | Enable the Cash App Pay extension. |
| php bin/magento setup:upgrade | Adobe Commerce setup upgrade. |
| php bin/magento setup:di:compile | Adobe Commerce dependencies injection compile. |
| php bin/magento setup:static-content:deploy | Adobe Commerce static content deployment. |
| php bin/magento cache:flush | Adobe Commerce system cache flush. |
You can find a table of the Afterpay Plugins for Adobe Commerce/Magento 2 [here](https://github.com/afterpay/afterpay-magento-2#install-manually). It also contains useful information on the manual installation process.
## Headless Support
You can also use [GraphQL](https://graphql.org/) or the [REST API](https://en.wikipedia.org/wiki/REST) to use Cash App Afterpay together with Adobe Commerce.
For details, see the following web pages on the GitHub:
* [Afterpay GraphQL Support page](https://github.com/afterpay/afterpay-magento-2/blob/main/Docs/GraphQL.md)
* [REST API page](https://github.com/afterpay/afterpay-magento-2/blob/main/Docs/RestAPI.md)
---
# Adobe Commerce - Configure Extension
*Basic Settings, Advanced Settings, Advanced Front End Settings and Express Checkout Settings.*
***
## Basic Settings
1. Login to Adobe Commerce Admin and go to **Stores → Configuration → Sales → Payment Methods → Afterpay** (scroll down).
2. Click **Basic Settings**.

| Setting | Value |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Enabled | **Yes** - Cash App Afterpay switched on. **No** - Cash App Afterpay disabled. Click the *Use Default* checkbox to use the default setting, which is Yes. |
| API Mode | **Sandbox** - for development or staging environments. **Production** - for your live website. Click the *Use Default* checkbox to use the default setting, which is Sandbox. |
| Merchant ID | Your Sandbox or Production Cash App Afterpay Merchant ID. |
| Merchant Key | Your Sandbox or Production Cash App Afterpay Secret Key. |
## Advanced Settings
1. Click **Advanced Settings**.

| Setting | Value |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
| Minimum Order Total | Shows the minimum price for an order payable with Cash App Afterpay. |
| Maximum Order Total | Shows the maximum price for an order payable with Caash App Afterpay. |
| CBT Available Currencies | Lists the currencies available for [Cross Border Trade](/cash-app-afterpay/guides/welcome/getting-started/cross-border-trade) |
The above three settings are all read-only display fields. The information they display comes from the Cash App Afterpay API, so you cannot edit them here.
| Setting | Value |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Public Id | A publishable API key used by Cash App Afterpay's Dynamic Messaging feature. It is a unique identifier for the merchant account. |
| Consumer Lending Enabled | Shows if the merchant account is enabled for Pay Monthly (US merchants only). If you want Pay Monthly enabled and are a US merchant, contact Cash App Afterpay Sales. |
| Consumer Lending Minimum Order Total | The minimum order total for the use of the customer lending facility. |
| Update Merchant Configuration | Click this button to update the limit configuration and specific countries from the Cash App Afterpay API. |
| Debug | **Yes** - Debug logs are written to "h-0": "/var/log/afterpay.log **No** - Disabled. Click the *Use Default* checkbox to use the default setting, which is Yes. |
| Display on Product Page | **Yes** - Cash App Afterpay Displays on Product Page. Click the *Use Default* checkbox to use the default setting, which is Yes. |
| Display on Cart Page | **Yes** - Adobe Commerce Checkout - proceed to checkout page as normal. **Yes** - Express Checkout - enable Cash App Afterpay Express Checkout from cart page. **No** - Cash App Afterpay will not display on the Cart page. Click the *Use Default* checkbox to use the default setting, which is Yes. |
| Sort Order | The order of payment methods at checkout. |

| Setting | Value |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Exclude Categories | Select the relevant categories to exclude Cash App Afterpay from being available. Click the *Use Default* checkbox to use the default setting, which excludes nothing. |
| Payment Flow | **Immediate Payment Flow** - Capture full payment. **Deferred Payment Flow** - Capture incremental amounts as items are dispatched. |
| Enable Auto-Reversals | This is useful if an exception occurs when Adobe Commerce is finalising an order after Afterpay have approved the payment. In this case the payment is reversed automatically. This reversal helps prevent customers paying for orders that cannot be fulfilled. |
In the table above, we do not recommend the use of the Auto-Reversals feature if you use an external Order Management System (OMS).
## Advanced Frontend Settings
Use these settings for custom-built themes on your website. The default of these settings is NO (disabled), which means your pages display in the default Adobe Commerce Luma theme, or similar.
These custom-built themes are not dependent on [Knockout.js](https://knockoutjs.com), which is the default frontend framework included with Adobe Commerce. If enabled, Advanced Frontend Settings allow Afterpay messaging to display on the product page, cart and mini-cart, regardless of the frontend framework used by your theme.
You, the merchant, must configure the Placement selectors and the Price selectors according to the theme you have designed and your web page type.
This feature is only available for Adobe Commerce 2.4 (and above) users.
Do the following:
1. Login to Adobe Commerce Admin and go to **Stores → Configuration → Sales → Payment Methods → Afterpay** (scroll down).
2. Click **Advanced Frontend Settings**. The advanced frontend settings fields display, in the default setting of No, which means they are disabled. See screenshot below:

The example screen below shows the range of settings when the advanced frontend settings fields are enabled:

See the table below for information on the various settings.
In all cases, you should place Afterpay messaging immediately below the price element in the PDP (Product Page), cart and mini cart.
| Setting | Value |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Enable for Product Page | Select **Yes** to enable Advanced Frontend Settings for product pages. |
| Placement selector (Product Page) | Enter a CSS (Cascading Style Sheet) selector for a target element on the product page. Afterpay asset placement is injected below the first matching element. |
| Price selector (Product Page) | Enter a CSS selector for the product price element. The product price is extracted from the first matching element. |
| Placement selector (Bundle Product Page) | Enter a CSS selector for a target element on the bundle product page. Afterpay asset placement is injected below the first matching element. |
| Price selector (Bundle Product Page) | Enter a CSS selector for the bundle product price element. The bundle product price is extracted from the first matching element. |
| Enable for Cart Page | Select **Yes** to enable Advanced Frontend Settings for the shopping cart page. |
| Placement selector (Cart Page) | Enter a CSS selector for a target element on the cart page. Afterpay asset placement is injected below the first matching element. |
| Price selector (Cart Page) | Enter a CSS selector for the order price element. The order price is extracted from the first matching element. |
| Enable for Mini Cart | Select **Yes** to enable Advanced Frontend Settings for the mini cart. |
| Placement selector (Mini Cart) | Enter a CSS selector for a target element on the mini cart. Afterpay asset placement is injected below the first matching element. |
| Container selector (Mini Cart) | Enter a CSS selector to select a container on the mini cart page. In the example above the container selector is #cart-drawer. |
| Price selector (Mini Cart) | Enter a CSS selector for the mini cart order price element. The order price is extracted from the first matching element. |
## Express Checkout Settings
1. Click **Express Checkout Settings**.

| Setting | Value |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Display on Product Page | **Yes** - Can checkout directly from Product Page. **No** - No checkout from the Product Page. Click the *Use Default* checkbox to use the default setting, which is Yes. |
| Display on Cart Page | **Yes** - Can checkout directly from Cart Page. **No** - No checkout from the Cart Page. Click the *Use Default* checkbox to use the default setting, which is Yes. |
| Display on Mini-Cart | **Yes** - Can checkout directly from Mini-Cart. **No** - No direct checkout from the Mini-Cart. Click the *Use Default* checkbox to use the default setting, which is Yes. |
---
# Adobe Commerce - Update Extension
**How can I update my Adobe Commerce Extension?**
***
The Cash App Afterpay extension update method depends on how you, the merchant, have originally installed the Cash App Afterpay module.
If you used [Composer](https://getcomposer.org/) to install the Cash App Afterpay module, then use Composer to update it. If you used a manual process to install the Cash App Afterpay module, then use a [manual update](#manual-update) to update it.
The Cash App Afterpay extension update process depends on whether you want to use [Composer](https://getcomposer.org/) to make the update, or do a [manual update](#manual-update). We recommend that you [update with Composer](#update-with-composer).
In either case, backup your system files before you start an update.
## Update with Composer
In the instructions below, the
`[ADOBE-COMMERCE]`
folder refers to the root folder where Adobe Commerce/Magento is installed.
1. Open the Command Line Interface (CLI) and go to the `[ADOBE-COMMERCE]` folder on your server.
2. Run one of the following commands in the table to update the Cash App Afterpay module, depending on the Magento version:
| Magento version | Command to run |
| --------------- | --------------------------------------------------- |
| 2.4 | composer require afterpay-global/module-afterpay:^5 |
| 2.3 | composer require afterpay-global/module-afterpay:^4 |
| \< 2.3.0 | composer require afterpay-global/module-afterpay:^4 |
3. Make sure that Composer finishes the installation without errors.
4. Run the Adobe Commerce setup upgrade: `php bin/magento setup:upgrade`.
5. Run the Adobe Commerce Dependencies Injection Compile: `php bin/magento setup:di:compile`.
6. Run the Adobe Commerce Static Content deployment: `php bin/magento setup:static-content:deploy`.
7. Run the Adobe Commerce System Cache Flush: `php bin/magento cache:flush`.
### Cash App Pay Update with Composer
In the instructions below, the
`[CASH-APP-PAY]`
folder refers to the root folder where Cash App Pay is installed.
1. Open the Command Line Interface (CLI) and go to the `[CASH-APP-PAY]` folder on your server.
2. Run one of the following commands in the table to update Cash App Pay module, depending on the Magento version:
| Magento version | Command to run |
| --------------- | --------------------------------------------------- |
| 2.4 | composer require afterpay-global/module-afterpay:^5 |
| 2.3 | composer require afterpay-global/module-afterpay:^4 |
3. Make sure that Composer finishes the installation without errors.
4. Run the Adobe Commerce setup upgrade: `php bin/magento setup:upgrade`.
5. Run the Adobe Commerce Dependencies Injection Compile: `php bin/magento setup:di:compile`.
6. Run the Adobe Commerce Static Content deployment: `php bin/magento setup:static-content:deploy`.
7. Run the Adobe Commerce System Cache Flush: `php bin/magento cache:flush`.
## Manual Update
This method does not use Composer. It is more complex than using Composer, but just as effective when done correctly. Follow the instructions below.
### Remove old Afterpay files/folders
In the instructions below, the
`[ADOBE-COMMERCE]`
folder refers to the root folder where Adobe Commerce/Magento is installed.
1. Remove all the files in: `[ADOBE-COMMERCE]/app/code/Afterpay/Afterpay`. Then you are ready to download the Cash App Afterpay Extension.
### Download the Cash App Afterpay Extension
The extension is on GitHub. Do the following:
1. Go to GitHub for the link to [Magento 2](https://github.com/afterpay/afterpay-magento-2). The source code needed depends on your version of Magento. For these details, see the [Readme file](https://github.com/afterpay/afterpay-magento-2#readme).
2. Under the green *Code* heading, click **Download ZIP**. See screenshot below:

3. Unzip your files and put them into a temporary folder.
You can install Adobe Commerce in any folder on your server. In this guide, `[ADOBE-COMMERCE]` is the name of the root folder where Adobe Commerce is installed.
### Run the Commands
1. Copy the files from your temporary folder to the `[ADOBE-COMMERCE]/app/code/Afterpay/Afterpay` folder. The temporary folder is the one you created in Step 3 in the *Download the Cash App Afterpay Extension* section above.
2. Open the Command Line Interface (CLI) and make sure you are the owner of the `[ADOBE-COMMERCE]` folder. Run all CLI commands as the owner of the folder, not `root` and without `sudo`.
3. From the CLI, run the commands below:
| Command | Description |
| :----------------------------------------------- | :--------------------------------------------- |
| php bin/magento module:enable Afterpay\_Afterpay | Enable Cash App Afterpay extension. |
| php bin/magento setup:upgrade | Adobe Commerce setup upgrade. |
| php bin/magento setup:di:compile | Adobe Commerce dependencies injection compile. |
| php bin/magento setup:static-content:deploy | Adobe Commerce static content deployment. |
| php bin/magento cache:flush | Adobe Commerce system cache flush. |
Now you need to repeat the process for the *Cash App Pay Extension for Magento 2*:
1. Remove the existing files in the `[ADOBE-COMMERCE]/app/code/Afterpay/CashApp` folder.
2. Download and copy the files to the `[ADOBE-COMMERCE]/app/code/Afterpay/CashApp` folder. The source code path is based on the Magento version [here](https://github.com/afterpay/cash-app-pay-magento-2).
3. Open the Command Line Interface (CLI) and run the commands below:
| Command | Description |
| :---------------------------------------------- | :--------------------------------------------- |
| php bin/magento module:enable Afterpay\_CashApp | Enable the Cash App Pay extension. |
| php bin/magento setup:upgrade | Adobe Commerce setup upgrade. |
| php bin/magento setup:di:compile | Adobe Commerce dependencies injection compile. |
| php bin/magento setup:static-content:deploy | Adobe Commerce static content deployment. |
| php bin/magento cache:flush | Adobe Commerce system cache flush. |
You can find a table of the Cash App Afterpay Plugins for Adobe Commerce/Magento 2 [here](https://github.com/afterpay/afterpay-magento-2#install-manually). It also contains useful information on the manual installation process.
---
# Adyen
If you are an Afterpay merchant, see the
[Adyen Migration page](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/platforms/adyen-migration)
for information on the migration from Afterpay to Cash App Afterpay.
## Integration Process
To add Cash App Afterpay as a payment method, contact your Adyen Account Manager.
## Integration Documentation
[Learn how to accept Cash App Afterpay payments through Adyen](https://docs.adyen.com/payment-methods/afterpaytouch)
## Cash App Afterpay Messaging and Best Practice Guidelines
When you integrate to Cash App Afterpay through Adyen, see our [Cash App Afterpay Messaging](/cash-app-afterpay/guides/afterpay-messaging/getting-started) pages to make the most of Cash App Afterpay on your site.
---
# Getting Started
If you are an Afterpay merchant, see the [Migration page](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/platforms/big-commerce-migration) for information on the migration from Afterpay to Cash App Afterpay.
Follow the instructions below, starting with the Checkout Type.
### Checkout Type
The BigCommerce Checkout Type must be an *Optimized one-page checkout*.
To ensure the checkout type is correct:
1. Go to: *BigCommerce Control Panel> Advanced Settings > Checkout*.
2. Under *Checkout Settings*, the *Checkout Type* must be: *Optimized one-page checkout*. See picture below.

### Store Country
The Store Country must correspond to the Afterpay account region.
To ensure the store country is correct:
1. Go to: *BigCommerce Control Panel > Store Setup > Store Profile*.
2. Under *Contact Information*, the *Store Country* must be United States.
### Next Steps
* Next, you should [Add a Payment Option](BC-Add-Payment-Option.md).
* When you've done that, make sure your customers are aware of the Cash App Afterpay by adding some [Site Messaging](BC-Afterpay-Site-Messaging.md).
Finally to attract lots of new customers, join the Cash App Afterpay [Store Directory](../../MARKETING/Shop-Directory.md).
---
# Add Payment Option
## Configuration
Completing the below steps will enable and display Cash App Afterpay as a Payment Method. Do the following:
1. Go to *BigCommerce Control Panel*.
2. Go to *Settings* > *Payments*.
3. Under the *Online Payment Methods* section, click the drop-down arrow.

4. Locate *Afterpay* from the Online Payment Methods list and click **Set up**.

5. Enter the Merchant ID provided by Afterpay into the *Merchant ID* field.
6. Enter the Secret Key provided by Afterpay into the *Secret Key* field.

7. Additionally, you can configure the following settings:
* **Transaction Type** — can be set to Authorize & Capture or Authorize Only. Authorize Only allows you to capture the funds manually. See [Manually Capturing Transactions (Authorize Only)](https://support.bigcommerce.com/s/article/Manually-Capturing-Transactions-Authorize-Only) to learn more.
* **Test Mode** — set this to *Yes* to test checkout flow. Make sure this is set to *No* when your store goes live.
You need Cash App Afterpay Sandbox Credentials to use Test Mode. Please contact your Afterpay Delivery Manager for assistance.
8. Click the **Save** button.
---
# Cash App Afterpay Site Messaging
**How can I add Cash App Afterpay Site Messaging to my product and cart pages?**
***
Be careful, as these instructions need you to edit code. Before you make any changes to theme template files, back up your current theme customizations.
There are two types of theme platform on BigCommerce; [Stencil](#stencil-theme) and [Blueprint](#blueprint-theme).
Follow the instructions below according to which theme platform your store uses.
If you are not sure what platform is used by your store, see [Which Theme Platform do I have?](https://support.bigcommerce.com/s/article/Which-Theme-Platform-do-I-have).
## Stencil Theme
1. Go to *Storefront* › *Script Manager*
2. Click **Create a Script**.
3. Set up the following:
* **Name of Script:** Cash App Afterpay Messaging
* **Description:** Place Cash App Afterpay Site Messaging on product and cart pages
* **Location on page:** Footer
* **Select pages where script will be added:** Store pages
* **Script category:** Essential
* **Script type:** Script
* **Load method:** Default
4. Copy and paste the below script into Script Contents:
```javascript Stencil
```
You can modify the script so that the banner will only display a price breakdown if the product meets your order minimum and maximum thresholds.
To do so, you will need to edit the following values within the script and set the minimum and maximum values to mirror your Cash App Afterpay account settings:
`script.dataset.min = "1.00";`\
`script.dataset.max = "800.00";`
Banner not showing up?
Sometimes the script may not work because the HTML elements are named differently depending on your theme. Work with your developer to help update the script depending on your theme.
## Blueprint Theme
1. Access your themes template files by going to *Storefront* › *Template Files*.
2. Find the file *Panels/ProductDetails.html*.
3. Copy the script below and paste it into the *Panels/ProductDetails.html* file:
```javascript Blueprint
```
You should now see Cash App Afterpay's messaging underneath the price of products and the cart total.
---
# Ecwid
If you are an Afterpay merchant, see the
[Migration page](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/platforms/ecwid-migration)
for information on the migration from Afterpay to Cash App Afterpay.
## Configure Cash App Afterpay Payment
To enable Cash App Afterpay as a payment method and display the Cash App Afterpay assets on the product pages, do the following:
1. Log in to the *Ecwid Website Admin Portal*.

2. Go to *Configuration* -> *Payment*.

3. Contact Ecwid support [here](https://support.ecwid.com/hc/en-us/requests/new) to help with the Cash App Afterpay setup and installation. An alternative is to open the Ecwid *Control panel* and use *Open Live Chat* or email support.
4. Enter the Merchant ID and Secret Key supplied by Cash App Afterpay. Ensure *Test transactions (no real charges)* is set to **Disabled**.

5. Double check that *Test transactions (no real charges)* is set to **Disabled**. See picture below:

6. Update the *Appearance Options* text, insert the text: *Cash App Afterpay - Shop Now. Enjoy Now. Pay Later.*

7. Set *Enable this payment method at checkout* to **Enabled**.

8. Click the **Save** button.

Cash App Afterpay should now be installed and available for use by your customers. Cash App Afterpay should also appear on your product pages and as a payment option on the checkout page.
---
# Getting Started
If you are an Afterpay merchant, see the [Migration page](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/platforms/presta-shop-migration) for information on the migration from Afterpay to Cash App Afterpay.
Follow the instructions below.
### Setting up Cash App Afterpay with PrestaShop
Cash App Afterpay has a module that you can install in the back office admin area for PrestaShop.
Before you begin you must:
* Have a Cash App Afterpay merchant account to use the Cash App Afterpay module with PrestaShop. Click [here](https://get.afterpay.com) to sign up for a Cash App Afterpay merchant account.
* Ensure that the Cash App Afterpay module for PrestaShop is compatible with PrestaShop versions 8, 1.7.x. and 1.6.x
#### Install the Module
To install the module do the following:
1. In the *Modules* section of the PrestaShop admin area, select **Module Catalog**.
2. Enter `Afterpay` in the module search box.
3. Select **Install**.
4. Select **Configure**. The Afterpay configuration panel appears.
5. Enter your merchant ID and secret key and your API region and environment.
6. Click **Save** in the lower-right corner.
From time to time the Cash App Afterpay module is updated. To ensure you have the most up-to-date module, follow the procedure(s) in the [Updating the Cash App Afterpay Module](/cash-app-afterpay/guides/platforms/presta-shop/updating-the-cash-app-afterpay-module) page.
| Setting | Value |
| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Module is enabled | **Yes** - Cash App Afterpay turned on **No** - Cash App Afterpay disabled. |
| Merchant ID | Your 9 digit Cash App Afterpay Merchant ID. |
| Secret Key | Your 128 character Cash App Afterpay secret key. |
| API Environment | **Sandbox** - for testing. **Production** - For live order processing. |
| Min Payment Limit/Max Payment Limit | Current minimum and maximum Cash App Afterpay order thresholds. **These values are for information purposes and cannot be customized in Prestashop.** |
| Enable Multicurrency | Enable multicurrency support. |
| CBT Countries | [Cross Border Trade (CBT)](/cash-app-afterpay/guides/welcome/getting-started/cross-border-trade) allows you to sell internationally. Customers in foreign countries pay in their local currencies, while Afterpay continues to settle with you in your local currency. This information is supplied by Afterpay and cannot be edited. This value is for information purposes and cannot be customized in Prestashop. |
| Restricted Categories | This enables you to restrict Cash App Afterpay to selected product categories. |
| Payment Info on Individual Product Page | Enable to display Cash App Afterpay elements on individual product pages. |
| Product Page HOOK | This property sets the HOOK where Cash App Afterpay messaging is linked to on the product page. Only change this value if the messaging doesn't appear correctly. |
| Price CSS (Cascading Style Sheet) Selector | This property sets the CSS selector needed to show the assets on the product page. Only change this value if it doesn't appear correctly. |
| Product Page CSS Position Selector | Cash App Afterpay messaging is moved after the CSS Selector DOM (Document Object Model) Element. Only change this value if it doesn't appear correctly. |
| Payment Info on Cart Page | Enable to display Cash App Afterpay elements on the cart page (available for PS 1.7 and higer). |
| Cart Page CSS Selector | This property set the CSS selector needed to show the assets on the cart page. Only change this value if it doesn't appear correctly. |
| Canonical URLs | Only Enable this option if the checkout doesn't redirect correctly to the payment gateway and shows a 404 error. |
| Debug mode | Enable the debug logging. You can see these logs in the *Configure* > *Advanced Parameters* > *Logs* section. |
| Enable Reversal | If Prestashop throws an exception while attempting to finalise an order after payment is approved by Cash App Afterpay, the payment can be reversed automatically. This may help to prevent scenarios where customers pay for orders that can't be fulfilled. Not recommended if an external Order Management System (OMS) is in use. |
## Store currency and language
The module relies on a dedicated Website Scope being used for each market region (country) with a corresponding base currency and languages set in the PrestaShop admin area. As Cash App Afterpay is only available in the USA, set the market region to USA and the base currency to US dollars.
Warning
Check that your store's base currency is set to USD (\$).
To set the Base Currency:
1. Go to *International*.
2. Select the *Localization* page and use the *Default currency* option from the *Configuration* section.
For more information see this section of the [PrestaShop 1.7](http://doc.prestashop.com/display/PS17/Localization) & [PrestaShop 1.6](http://doc.prestashop.com/display/PS16/Understanding+Local+Settings) documentation.
## Testing your configuration
1. Go to a product page to check whether Cash App Afterpay appears as a payment option. If the Cash App Afterpay widget does not appear, check that you have entered your Cash App Afterpay credentials correctly when you set up the Afterpay module.
2. If Cash App Afterpay appears correctly as a payment option, go to the checkout page to test that the Cash App Afterpay information displays correctly.
### Troubleshooting
If Cash App Afterpay does not update/display as expected, provide staff access to your PrestaShop admin panel for our Integration Support Team.
Send an email to [merchantadminus@afterpay.com](mailto:merchantadminus@afterpay.com) and include the:
* Admin panel URL
* Admin panel user
* Admin panel password
---
# Updating the Cash App Afterpay Module
Cash App Afterpay periodically updates its Cash App Afterpay module.
There are two ways to ensure your module is up-to-date:
* [Use the PrestaShop Marketplace](#use-the-prestashop-marketplace)
* [Use the Module Manager updating tool](#use-the-module-manager-updating-tool)
We strongly recommend that you always use the latest version of the Cash App Afterpay module.
## Use the PrestaShop Marketplace
When a new version of the Cash App Afterpay module is released on the PrestaShop Marketplace, the PrestaShop store should detect the new version. The PrestaShop store automatically shows the upgrade option.
To upgrade, to the following:
1. Go to the *Module Manager* section on the left menu bar. See the picture below:
2. Use the search bar to find the Afterpay installed module and click **Upgrade available**. See the picture below:
3. A confirmation window appears, see the picture below:
4. Ensure you have a backup of the site before any upgrade. Click **Go to maintenance page** to avoid possible cache issues. Click **Upgrade Anyway** if you have a backup of the site and are confident you can problem solve if necessary.
When the upgrade is finished you receive a confirmation message. The **Actions** button shows the regular options.
Open the Cash App Afterpay configuration
*Settings*
section to check that all the configurations are correct after the upgrade. See the picture below:
## Use the Module Manager Updating Tool
This is a manual update procedure you can use if you have disabled the upgrade option on your store. Do the following:
1. Go to the Module Manager Admin panel.
2. Go to the Prestashop Addons Marketplace and download the upgrade you want. We strongly recommend that you always have the latest version of the code.
3. To [download the files](https://addons.prestashop.com/en/other-payment-methods/51381-afterpay-buy-now-pay-later-always-interest-free.html) you must be logged into your PrestaShop account.
4. Open the *Module Manager* section and click **Upload a module**. See the picture below:
5. Select the previously downloaded file from your computer and upload it. See the pictures below:
6. A confirmation message appears when the module is installed.
---
# Getting Started
If you are an Afterpay merchant, see the [Migration page](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/platforms/salesforce-commerce-cloud-migration) for information on the migration from Afterpay to Cash App Afterpay.
Follow the instructions below:
Cash App Afterpay has cartridges that can be used with:
* Commerce Cloud's Storefront Reference Architecture (SFRA)
* A controller-based SiteGenesis
The cartridge supports SFRA versions 5 and 6.
The cartridges can support both
[Direct Capture, and Auth and Capture Payment flows](../../API-DEVELOPMENT/API-Calls-and-Payment-Flows.md)
. Contact your Cash App Afterpay Delivery Manager for instructions on implementing the Auth and Capture flow.
## Features
Once you have Cash App Afterpay on your SFCC hosted website, the following features are present:
* Cash App Afterpay Messaging on Product, Cart and Category pages
* Cash App Afterpay as a Payment Method during checkout
* Cash App Afterpay Express Checkout
* During checkout Cash App Pay appears as a payment method alongside Cash App Afterpay
## Next Steps
Now install the cartridge; follow the instructions on the [Install Cartridge](/cash-app-afterpay/guides/platforms/salesforce-commerce-cloud/install-cartridge-and-import-metadata) page.
After that you should:
1. [Configure the cartridge](/cash-app-afterpay/guides/platforms/salesforce-commerce-cloud/configure-cartridge).
2. Make [SiteGenesis code changes](/cash-app-afterpay/guides/platforms/salesforce-commerce-cloud/site-genesis-code-changes).
3. Do an [SFRA files change review](/cash-app-afterpay/guides/platforms/salesforce-commerce-cloud/sfra-files-change-review).
4. Get plenty of new customers by joining the [Shop Directory](../../MARKETING/Shop-Directory.md)
---
# Install the Cartridge and Import the Metadata
The SFCC cartridge and the Business Manager call Cash App Afterpay by the single word Afterpay. This doesn't affect any of the instructions or advice below.
If you are a new merchant and do not have the Cash App Afterpay cartridge installed on your site, do the following:
1. Download the cartridge
* The current version of the cartridge is available directly from [Cash App Afterpay](https://github.com/afterpay/afterpay-salesforce-commerce-cloud)
* It’s also hosted on Salesforce’s [AppExchange platform](https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3u00000R8GgbEAF\&tab=e)
2. Build the client-side Resources. These are the client-side CSS (Cascading Style Sheets) and JS (JavaScript) files that are specific to Cash App Afterpay; this is a required step.
* Confirm that `package.json` contains the correct reference to the location of the SFRA base cartridge (Only for SFRA):
3. Set the path. Set the path to the base cartridge of SFCC which is required for the Cash App Afterpay cartridge to work.
```
"paths": {
"base": "../storefront-reference-architecture/cartridges/app_storefront_base/"
},
```
4. Install/Run commands. These commands install the node in our cartridge onto your local storage and compiles the JS and CSS files residing in our cartridge.
```
$ npm install
$ npm run compile:js
$ npm run compile:scss
```
5. Import the cartridge. Use **UX Studio** to import the cartridge. Alternatively, you can also use **Node Package Manager (npm)** and run **uploadCartridge**, or the **VSCode Prophet** plugin.
Once you have completed the five steps above, you are ready to import the metadata. See the section below.
## Import the Metadata
For the Cash App Afterpay integration to work, the following object structures (metadata) must be imported and configured in the **Business Manager**. Do the following:
1. In the cartridge bundle go to the folder *metadata/afterpay-meta-import/sites*.
2. Rename the *RefArch* folder to the ID of your site. You can find the site ID in *Administration* > *Sites* > *Manage Sites* in the *Business Manager*.
3. Compress the *afterpay-meta-import* folder to generate the `afterpay-meta-import.zip` file.
4. In the *Business Manager*, go to *Administration* > *Site Development* > *Site Import & Export* and import the zipped file.
Once you have imported the metadata, you are ready to make some final checks. See the section below.
## Check For File Conflicts/Changes.
1. If you are using *SiteGenesis*, see the [SiteGenesis code changes](/cash-app-afterpay/guides/platforms/salesforce-commerce-cloud/site-genesis-code-changes) page to add Cash App Afterpay-specific code changes to your base store cartridges.
2. If you are using *SFRA*, see the [SFRA Files change review](/cash-app-afterpay/guides/platforms/salesforce-commerce-cloud/sfra-files-change-review) page to see the files that override the files in the base cartridge.
---
# SFCC Configure the Cartridge
## Set the Cartridge Path
Before the Cash App Afterpay functionality can be available to your site, there is a cartridge task. Your task is to add the cartridge names to the cartridge path of the site’s settings. To do this, do the following:
1. Log into *Business Manager*.
2. Go to *Administration*\* > *Sites* > *Manage Sites* > *\[yourSite]* > **Settings**.
* If you are using SFRA (Salesforce Reference Architecture), enter: `int_afterpay_sfra:int_afterpay_core:app_storefront_base`. If you are using SFRA > 6.0.0 then you should use `int_afterpay_sfra_6 instead`.
* If you are using SiteGenesis, enter: `int_afterpay_sg:int_afterpay_core` in front of SiteGenesis base cartridges.
3. Click **Apply**.
## Set SFCC (Demandware) Service
Go to *Administration* > *Operations* > *Services* > *Credentials* > and select the required service and enter the account details.
| | |
| -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| URL | Sandbox [https://global-api-sandbox.afterpay.com/v2/](https://global-api-sandbox.afterpay.com/v2/) Production [https://global-api.afterpay.com/v2/](https://global-api.afterpay.com/v2/) |
| User | Enter the Merchant ID provided by Cash App Afterpay. |
| Password | Enter the Secret Key provided by Cash App Afterpay. |
## Set Cash App Afterpay Custom Site Preferences
The SFCC cartridge and the Business Manager call Cash App Afterpay by the single word Afterpay. This doesn't affect any of the instructions or description below.
To set the custom site preferences, do the following:
1. In *Business Manager*, go to the *Merchant Tools* > *Site Preferences* > *Custom Preferences*. A custom site preference group with the ID `Integration_Afterpay` is available for you to use. Select it and edit the attributes according to your Cash App Afterpay account data and the data shown in the table below.
Listed preferences are for the Afterpay cartridge v23.4.1 and above. If you are using any other versions see the integration guide in the documentation folder in the
[repository](https://github.com/afterpay/afterpay-salesforce-commerce-cloud)
.
| Site Preference | Description | Default |
| -------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| Enable Afterpay (`enableAfterpay`) | Sets whether all of the cartridge functionality is active and visible on your storefront. You can use this field to temporarily disable the payment method at checkout along with all customer-facing messaging throughout the site without uninstalling the cartridge. | No |
| Enable CashAppPay (`enableCashAppPay`) | Sets if Cash App Pay is enabled/disabled in the cartridge. **Note:** Cash App Pay gives customers the option to pay with Cash App, but relies on a connection to your Cash App Afterpay merchant account for settlement. If you are setting this preference to `true`, ensure that: Cash App Pay integration is included in your Cash App Afterpay merchant contract and enabled on your Cash App Afterpay merchant account Enable Cash App Afterpay is also true. Cash App Pay won’t load without it on the checkout page. | No |
| Brand settings (`apBrandSettings`) | Cash App Afterpay brand-related settings in JSON format where: Brand – Afterpay Service – the field is used to identify the service with Cash App Afterpay.(You can find the services under *Administration* > *Operations* > *Services*). | `{ "US": { "brand": "afterpay", "service": "afterpay.service.US" } }` |
| Afterpay JavaScript URL (`apJavaScript`) | The endpoint where the javascript library is obtained from – Use: Sandbox - [https://js-sandbox.squarecdn.com/square-marketplace.js](https://js-sandbox.squarecdn.com/square-marketplace.js) Production - [https://js.squarecdn.com/square-marketplace.js](https://js.squarecdn.com/square-marketplace.js) | |
| Afterpay Display Product Details Page Information (`apDisplayPdpInfo`) | Sets if the Cash App Afterpay messaging is displayed on the **Product Details** page. | Yes |
| Afterpay Display Product List Page Information (`apDisplayPlpInfo`) | Sets if the Cash App Afterpay messaging is displayed on the **Product List** Page. | No |
| Afterpay Display Cart Page Information (`apDisplayCartInfo`) | Sets if the Cash App Afterpay messaging is displayed on the **Cart** Page. | Yes |
| Afterpay Payment Mode (`apPaymentMode`) | Sets if the payment should be authorized only or if the merchant will use **Direct Capture** instead. | Merchant Specific – Select the ones to be supported. |
| CapturePaymentTimeout (`apCaptureTimeout`) | Sets timeout for the **Direct Timeout Capture** payments. | |
| apDelayRetry (`apDelayRetry`) | Sets the delay time for the unavailable service | |
| Enable Express Checkout (`apEnableExpressCheckout`) | Enables the **Express Checkout** feature. | Yes |
| Enable BuyNow (`apEnableExpressCheckoutBuyNow`) | Enables the **BuyNow** mode. Skips review page on merchant checkout. (Note: Only used for **Integrated Shipping**) | Yes |
| Express Checkout Shipping Strategy (`apExpressCheckoutShippingStrategy`) | Select either **Integrated Shipping** (Cash App Afterpay Checkout prompts for shipping method), or **Deferred** (merchant site handles shipping method selection)
**Note:** If there are multiple shipping methods in the cart, the cartridge disregards this preference and selects the deferred shipping strategy. | Integrated |
| Description Express Checkout will use for In-Store Pickup (`apStorePickupDescription`) | Prompt to use in Cash App Afterpay Express Checkout for in-store pickup orders | Available for next-day pickup |
| Enable Express Checkout on Product Details Page (`apEnableExpressCheckoutPdp`) | Enables Express Checkout directly from the product detail page. If this setting is disabled but Express Checkout is enabled, the button appears only on the cart page for SiteGenesis storefronts, the cart page and minicart for SFRA storefronts. | No |
| Enable Express Checkout option on cart (`apEnableExpressCheckoutCart`) | Enable Express Checkout option on cart and minicart(SFRA) page. | Yes |
| Default Controller Cartridge Name (`apControllerCartridgeName`) | This is used for SiteGenesis only and can be ignored for SFRA. | `app_storefront_controllers` |
| Default Core Cartridge (`apCoreCartridge`) | This is used for SiteGenesis only and can be ignored for SFRA. | `app_storefront_core ` |
| Restricted Products(`apRestrictedProducts`) | The product ids of products that are to be excluded from Cash App Afterpay separated by “,” | |
## Add the Cash App Afterpay Image to the Payment Method (For SiteGenesis)
To display the Cash App Afterpay image on the site, you must add the image to your site:
1. Go to *Merchant Tools* > *Ordering* > *Payment Methods*.
2. Select the payment method with the ID *AFTERPAY/CASHAPPPAY* (depending on the target region) and locate the image attribute and upload the image included in the cartridge.
The images are:
* int\_afterpay\_sg/cartridge/static/default/images/logo-afterpay-colour.png
* int\_afterpay\_sg/cartridge/static/default/images/cashapppay-logomark1x.png
---
# SiteGenesis Code Changes
To integrate the new Cash App Afterpay cartridge, you must modify your version of the SiteGenesis base cartridge files.
If you have made considerable changes to the SiteGenesis base cartridge files for your own store, consider using a merge tool. A three-way visual merge tool such as [Meld](https://meldmerge.org/) can be useful to make these changes.
If you use Salesforce Reference Architecture (SFRA), you can skip this page - there are no code changes needed.
## Download file
Download the zip file [SiteGenesis Code Changes](https://cash-f.squarecdn.com/static/sitegenesis-code-changes-1.zip) for instructions to do the code changes.
---
# SFRA File Change Review
The following templates are present in Cash App Afterpay's Salesforce Reference Architecture (SFRA) cartridge as well as the `app_storefront_base` cartridge. That means the template in Cash App Afterpay's cartridge will override the base template.
Since Cash App Afterpay's cartridge was built to work with the base cartridge, this override should be fine. However, if you've made custom changes to these templates in the base cartridge, or have installed plugins which override these templates, you must merge these changes yourself.
It may be useful to refer to that version to see the Cash App Afterpay-specific changes in the overridden file. In general, comments have been left in the files to make it easier to identify Cash App Afterpay-specific changes vs. base-SFRA content.
| Template File | Location & Purpose for Change |
| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `cart.isml` | `cartridge/templates/default/cart/cart.ismlIncludes /js/afterpay.js` and `/css/afterpaystyle.js` Default error messaging on page will also display Cash App Afterpay-specific error messages. |
| `cartTotals.isml` | `cartridge/templates/default/cart/cartTotals.ismlDisplay` Cash App Afterpay messaging under cart totals on the cart page. |
| `checkoutButtons.isml` | `cartridge/templates/default/cart/checkoutButtons.isml` Display Cash App Afterpay Express Checkout Button on the cart page. |
| `paymentOptionsTabs.isml` | `cartridge/templates/default/checkout/billing/paymentOptions/paymentOptionsTabs.isml` Adds a payment tab for Cash App Afterpay and/or Cash App Pay |
| `paymentOptionsContent.isml` | `cartridge/templates/default/checkout/billing/paymentOptions/paymentOptionsContent.isml` Include content displayed in the Cash App Afterpay and/or Cash App Pay payment tab. |
| `paymentOptionsSummary.isml` | `cartridge/templates/default/checkout/billing/paymentOptions/paymentOptionsSummary.isml` Include content displayed in the payment summary when Cash App Afterpay and/or Cash App Pay is the payment method. |
| `confirmationPaymentInfo.isml` | `cartridge/templates/default/checkout/confirmation/confirmationPaymentInfo.isml` Included Cash App Afterpay or Cash App Pay in the payment confirmation. |
| `checkout.isml` | `cartridge/templates/default/checkout/checkout.isml` Make all default SFRA checkout buttons hideable with CSS. Add the Cash App Afterpay and/or Cash App Pay checkout button. Add Cash App Afterpay Checkout Widget. Include Cash App Afterpay and Cash App Pay client-side JS (JavaScript) and CSS (Cascading Style Sheets). |
| `scripts.isml` | `cartridge/templates/default/common/scripts.isml` Adds JS files required to load the Cash App Afterpay assets. |
| `pageFooter.isml` | `cartridge/templates/default/components/pageFooter.isml` Adds Cash App Afterpay among the accepted payment methods in the footer. |
| `addToCartButtonExtension.isml` | `cartridge/templates/default/product/components/addToCartButtonExtension.isml` Add express checkout buttons on the PDP page. |
| `setItems.isml` | `cartridge/templates/default/product/components/setItems.isml` |
| `bundleDetails.isml` | `cartridge/templates/default/product/bundleDetails.isml` Add Cash App Afterpay messaging for bundles. Include Afterpay JS / CSS. |
| `productDetails.isml` | `cartridge/templates/default/product/productDetails.isml` Include Cash App Afterpay JS/CSS. Display Cash App Afterpay messaging on product details page. |
| `productTile.isml` | `cartridge/templates/default/product/productTile.isml` Display Cash App Afterpay messaging on product tile. |
| `quickView.isml` | `cartridge/templates/default/product/quickView.isml` Display Cash App Afterpay messaging on quick view. |
| `setDetails.isml` | `cartridge/templates/default/product/setDetails.isml` Include Cash App Afterpay JS/CSS. |
| `setQuickView.isml` | `cartridge/templates/default/product/setQuickView.isml` |
| `catLanding.isml` | `cartridge/templates/default/rendering/category/catLanding.isml` Include Cash App Afterpay JS/CSS. |
| `searchResults.isml` | `cartridge/templates/default/search/searchResults.isml` Include Cash App Afterpay JS/CSS. |
Similarly, if you’ve made customizations to the following JS (JavaScript) and SCSS (Salesforce Cascading Style Sheet) files, you may need to merge the Cash App Afterpay changes.
| JS File | Location & Purpose for Change |
| ---------------- | -------------------------------------------------------------------------------------------- |
| `checkout.js` | `cartridge/client/default/js/checkout.js` Include Cash App Afterpay client-side JS. |
| `productTile.js` | `cartridge/client/default/js/productTile.js` Include Cash App Afterpay client-side JS. |
| SCSS File | Location |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `homePage.scss` | `cartridge/client/default/scss/homePage.scss` Adds CSS for Cash App Afterpay’s checkout button. Specifically used by the minicart when opened on the store home page. |
---
# Getting Started
If you are an Afterpay merchant, see the
[Migration page](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/platforms/shopify-migration)
for information on the migration from Afterpay to Cash App Afterpay.
---
# Add Cash App Afterpay to my Shopify Store
Follow the instructions and section links below:
* [Add Cash App Afterpay at Checkout](/cash-app-afterpay/guides/platforms/shopify/add-cash-app-afterpay-at-checkout)
* [Cash App Afterpay On-Site Messaging App](/cash-app-afterpay/guides/platforms/shopify/cash-app-afterpay-on-site-messaging-app)
* [Cash App Afterpay Code Snippet](/cash-app-afterpay/guides/platforms/shopify/manually-add-cash-app-afterpay-site-messaging-to-theme)
* [Cash App Afterpay Banner](/cash-app-afterpay/guides/platforms/shopify/add-a-cash-app-afterpay-banner-to-shopify)
* [Join the Shop Directory](../../MARKETING/Shop-Directory.md)
* [Find Cash App Afterpay Brand Assets](../../MARKETING/Brand-Assets.md)
* [Add Cash App Pay at Checkout](/cash-app-afterpay/guides/platforms/shopify/add-cash-app-pay-at-checkout)
* [Find Cash App Pay Brand assets](/cash-app-pay-partner-api/guides/resources/cash-app-pay-assets)
***
## Supported Countries
Cash App Afterpay is available for Shopify merchants with a store address in the USA only. The same restriction applies to Cash App Pay.
## Store Address
The store address must correspond to the Cash App Afterpay account region.
Do the following:
1. Go to *Shopify Admin* > *Settings* > *General*.
2. Under **Store Address**, the **Country** must be United States.

## Store Currency
The store currency must correspond to the Cash App Afterpay account region.
To set the store currency:
1. Go to: *Shopify Admin* > *Settings* > *General*.
2. Under **Standards and formats**, the **Currency** must be United States Dollars (USD).

## Payment Settings
Check if you have **Automatically at checkout** or **Automatically when order is fulfilled** enabled.

In the Payment Settings, you can also apply manual capture for all payment types. If you have enabled **Manually**, follow these instructions:
[Shopify Manual Capture](/cash-app-afterpay/guides/platforms/shopify/shopify-manual-capture)
## Next Steps
Go to the [Add Cash App Afterpay at Checkout](/cash-app-afterpay/guides/platforms/shopify/add-cash-app-afterpay-at-checkout) page and add Cash App Afterpay to your checkout pages.
---
# Add Cash App Afterpay at Checkout
Before you start, ensure that you have Shopify installed and working.
The Shopify App Store listing and app logo will reflect the new Cash App Afterpay brand, while the payment app itself continues to be called **Afterpay US**. Your customers will see the updated branding at checkout.
For a list of requirements before you add Cash App Afterpay, see the [Requirements](#requirements) section at the bottom of this page.
## Overview
The Cash App Afterpay integration process can be completed in three stages:
* [Download the Afterpay US payment app](#download-the-afterpay-us-payment-app)
* [Connect your Business Hub account](#connect-your-business-hub-account)
* [Confirm and activate](#confirm-and-activate)
## Download the Afterpay US payment app
Do the following:
1. Click [here](https://accounts.shopify.com/store-login?redirect=settings%2Fpayments/alternative-providers/84934657) to download the Afterpay US payment app.
2. When the **Install app** screen appears, click **Install**.
3. Once installed, Afterpay US (New) appears in your list of apps.
## Connect your Business Hub account
After you install the Afterpay US app, you are automatically redirected to the Business Hub to verify your merchant account.
Follow these steps to connect your account:
### Step 1: Log into Business Hub
Log into your Business Hub user account.
If you have trouble accessing your Business Hub account, try [resetting your password](https://hub.us.afterpay.com/forgot-password). If you need an account to be created, contact your team's main internal onboarding contact.
### Step 2: Select your merchant account
1. From the dropdown menu, select the merchant account that should be associated with your storefront.
2. Ensure that this is the correct account for your specific Shopify store.
### Step 3: Complete connection
1. Click the **Connect** button to link your Business Hub merchant account with Shopify.
2. Wait for the connection process to complete.
3. Once you have a successful connection, you're automatically returned to Shopify.
## Confirm and activate
After successfully verifying your Business Hub merchant account, you return to Shopify. A screen appears with two toggle switches and a *More actions* menu. Do the following:
1. Activate the payment gateway. Keep **Test mode** inactive, and click **Activate**. This screenshot shows the result:
**Do not enable Test mode.**
If you enable Test mode, the integration fails. The
**Enable test mode**
function is only for use on dedicated test websites. Contact your Afterpay Account Manager if you need test credentials.
2. Go to your online store and verify that Afterpay is a checkout option.
### Managing merchant integration
If you ever need to change which merchant account is connected to your Shopify store, it's a simple process:
1. In your Shopify admin, go to Settings → Payments
2. Click into the Afterpay US (New) payment app
3. Then, click More actions → Manage
4. This will take you back to the Business Hub where you can select a different merchant account
5. Choose the new account you want to use and click Connect
That's it! The new merchant account will now be connected to your Shopify store.
## Requirements
To avoid issues installing the new Afterpay US app, check that you have Shopify installed and working.
Make sure that your company or organization meets the following requirements:
Your business address is in one of the the following:
* Australia
* Canada
* Hong Kong SAR
* New Zealand
* United Kingdom
* United States
You must ship to the United States.
You must accept USD (United States Dollars) as a currency.
---
# Add Cash App Pay at Checkout
Cash App Pay is a fast and simple payment method that lets customers pay for purchases either by scanning a simple QR code or by tapping Cash App Pay at checkout to be redirected to Cash App.
You can use your existing Cash App Afterpay integration to enable this feature, and it works on Desktop, Mobile, and in a native app.
**Prerequisites**
Before you integrate Cash App Pay into Shopify ensure that you are:
* An existing Cash App Afterpay merchant on Shopify with a proven integration
* A US merchant
Cash App Pay will appear as another payment option on your payment page alongside Cash App Afterpay. It will not be just a tender type within a Cash App Afterpay payment.
## Overview
The Cash App Pay integration process can be completed in three stages:
* [Download the Cash App Pay payment application](#download-the-cash-app-pay-payment-application)
* [Connect your Account](#connect-your-account)
* [Final Confirmation and Activation](#final-confirmation-and-activation)
You must use your Cash App Afterpay production merchant ID and your Cash App Afterpay production secret Key in the Cash App Pay integration process. Your sandbox credentials will not work for account activation, even if you are in a sandbox environment.
## Download the Cash App Pay payment application
1. Go to the [Cash App Pay](https://apps.shopify.com/cash-app-pay) page on the Shopify App Store.
2. Login to Shopify.
3. Download the Cash App Pay application. The Install app screen appears. See the picture below:

4. Shopify asks you to grant Cash App Pay (Cash App Afterpay) permission to *View personal data* and *View and edit store data*. Click **Install** to continue.
## Connect your account
To connect your account, do the following:
1. After downloading and installing the Cash App Pay app, from the following screen, click **Connect to Cash App Pay**.

2. The *Connect to Cash App Pay* screen appears:

3. Enter your Cash App Afterpay production merchant ID in the **Merchant ID** field.
4. Enter your Cashs App Afterpay production secret key in the **Secret Key** field.
5. Click **Continue**.
In step 3 above, you must use your Cash App Afterpay
**Production**
merchant ID. In step 4 above, you must use your Cash App Afterpay
**Production**
secret key. Your Sandbox credentials
**will not work**
for account activation, even if you are in a Sandbox environment.
## Final Confirmation and Activation
After you click **Continue** in Step 5 above, you are redirected to the following page for final confirmation:

Do the following:
1. Ensure the *Cash App Pay* toggle switch is enabled (black).
2. Ensure *Test Mode* is off (grey).
3. Click **Activate**.
Your customers should now have Cash App Pay available as a payment method alongside Cash App Afterpay at checkout.
!\[Screenshot 2025-03-20 at 4.22.03 PM.png]\(../../../assets/images/Screenshot 2025-03-20 at 4.22.03 PM.png)
---
# Shopify Afterpay On-Site Messaging App
You cannot use the Afterpay On-site Messaging App to add Cash App Afterpay at checkout. Instead, follow the instructions on the [Add Afterpay at Checkout](/cash-app-afterpay/guides/platforms/shopify/add-cash-app-afterpay-at-checkout) page.Before you install and configure the Afterpay On-Site Messaging App, make sure you already added [Cash App Afterpay at checkout](/cash-app-afterpay/guides/platforms/shopify/add-cash-app-afterpay-at-checkout) on your Shopify store. Ensure Cash App Afterpay is visible at checkout and functioning before you attempt anything with the Afterpay On-Site Messaging App. You cannot use the Afterpay On-Site Messaging App without first adding Cash App Afterpay at checkout successfully.
This page shows you how to do the following:
* [Install the Afterpay On-site Messaging App](#install-the-cash-app-afterpay-on-site-messaging-app) - A procedure to install the app
* [Add the Messaging to the Product Pages](#add-the-messaging-to-the-product-pages) - Instructions on how to add the messaging to the Product Pages
* [Add the Messaging to the Cart Page](#add-the-messaging-to-the-cart-page) - Instructions on how to add the messaging to the shopping Cart Page
* [Adjust the Style of Messaging](#adjust-the-style-of-messaging) - This covers things like text alignment, margins, text color, logo types, display for mobile devices, and more
* [Make Mobile View Adjustments](#mobile-view-adjustments) - Adjust the style of messaging for mobile devices
* [Hide Messaging from Some Products](#hide-messaging-from-some-products) - Select products that you don't want to associate with Afterpay Messaging
This information is for Shopify 2.0 themes only.
## Install the Afterpay On-site Messaging App
Do the following:
1. Click the [link](https://apps.shopify.com/afterpay-messaging) to download and install the Afterpay On-Site Messaging app from the Shopify App Store.
2. Click **Install**. An installation screen on Shopify's admin portal appears.

3. Click **Install**.

If you clicked
**Install**
and your screen doesn’t show the
**Connect**
button, your Cash App Afterpay account is already fully registered. You can skip steps 4 to 7 (inclusive) below and go straight to the
[Add the Messaging to the Product Pages](#add-the-messaging-to-the-product-pages)
section.
4. Click **Connect** next to *Connect the Cash App Afterpay account*. You are taken to a get.afterpay.com URL, where the email is prefilled with the email on your Shopify store.

5. Send the email and Cash App Afterpay will email you a login link to the Cash App Afterpay dashboard.

6. Login to your Cash App Afterpay dashboard and ensure you have completed all the registration steps.
7. When Cash App Afterpay registration is complete, click the **Show me how** button under *Add Afterpay messaging*, at the bottom of the [get.afterpay.com](http://get.cashappafterpay.com) status page.

## Add the Messaging to the Product Pages
1. Once it is installed, you need to open the *Afterpay On-Site Messaging app*. To do this, go to [Shopify Admin](https://admin.shopify.com/). Then go to *Apps* and select *Afterpay On-Site Messaging*.

2. From the app's *Add Messaging* section, click [Open Theme Editor](https://accounts.shopify.com/lookup?rid=cb901599-a4cd-4d01-9e88-e70243d0636c).

3. From the Theme editor, click the dropdown at the top of the editor, then click *Products*.

4. Select the *Default* product template, or the Product template that needs messaging.

> **How Messaging Works**
>
> Messaging works on Product Page templates. So if you have a single Product Page template, you add messaging to that template. If you have several different Product Page templates, then you'll need to add messaging to each one separately.
5. Move your mouse over the Product price, a + symbol appears.
!\[Shopify OSM App - Product Pages - Step 5.png]\(../../../assets/images/Shopify OSM App - Product Pages - Step 5.png)
6. Click **Add block** and then select *Payments Messaging - Afterpay On-Site Messaging*.
Your product page should now look like this:
!\[Shopify OSM App - Product Page Example.png]\(../../../assets/images/Shopify OSM App - Product Page Example.png)
7. Click **Save** in the top right corner.

## Add the Messaging to the Cart Page
Never try to use the app to add Cash App Afterpay to the checkout page.
You are now ready to add some messaging to the Cart page. Do the following:
1. For an accurate Cart page preview, click **Add to cart**.
!\[Shopify OSM App - Product Pages - Step 7 screenshot 2 (alt).png]\(../../../assets/images/Shopify OSM App - Product Pages - Step 7 screenshot 2 (alt)-2.png)
2. Next, to open the Cart page, click the dropdown at the top of the editor and click **Cart**.

3. Move the mouse over the Subtotal above the Checkout button. A *+* symbol appears.
!\[Shopify OSM App - Cart Page - Step 3 to 5.png]\(../../../assets/images/Shopify OSM App - Cart Page - Step 3 to 5.png)
4. Click **Add Block** and select *Afterpay On-Site Messaging*.
5. If the text alignment is wrong, adjust the text alignment. To do this, click the *Text Alignment* dropdown and select a new alignment option.
!\[Shopify OSM App - Cart Page - Step 6.png]\(../../../assets/images/Shopify OSM App - Cart Page - Step 6.png)
**Mobile View**
You can set a separate alignment for display on mobile devices.
Do the following:
1. To check the appearance on a mobile device, click the monitor icon and then click *Mobile* at the top right of the editor.

2. Scroll down to *Mobile View* settings, make any changes you need.
3. Click **Save** in the top right corner.
4. Verify your messaging and alignment on your live store.
You can adjust various aspects of the page for mobile devices. See the [Mobile View Adjustments](#mobile-view-adjustments) section below for more details.
## Adjust the Style of Messaging
You can adjust many aspects of the styling. To do this:
1. Select the *Payments Messaging - Afterpay On-Site Messaging* block on the Product page.
!\[Shopify OSM App - Style Messaging - Step 1.png]\(../../../assets/images/Shopify OSM App - Style Messaging - Step 1.png)
Alternatively you can select *Payments Messaging - Afterpay On-Site Messaging* from the side bar under *Product information*. See picture below:

### Text Alignment
To adjust the text alignment:
1. Click the *Text Alignment* dropdown and select a new alignment option.
!\[Shopify OSM App - Text Alignment - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Text Alignment - Screenshot 1.png)
### Margins
To adjust the margins above and below the messaging:
1. Enter a new value into the *Margin Top* field.
2. Enter a new value into the *Margin Bottom* field.
Negative values are allowed.
!\[Shopify OSM App - Margins - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Margins - Screenshot 1-2.png)
### Text Color
To adjust the text color:
1. Click the *Text Color* color-picker and select the new text color.
!\[Shopify OSM App - Text Color - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Text Color - Screenshot 1-2.png)
### Text Size
To adjust the text size:
1. Click the *Text Size* dropdown and select a new text size option, extra small, small, medium and large.
!\[Shopify OSM App - Text Size - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Text Size - Screenshot 1.png)
### Text
To adjust the intro text:
1. Click the \*Intro Text dropdown and select a new intro text option.
!\[Shopify OSM App - Intro Text - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Intro Text - Screenshot 1.png)
### Show/Hide "Interest Free"
To show or hide the interest-free phrase:
1. Enable or disable the *Show "interest-free"* checkbox.
!\[Shopify OSM App - Show Interest Free - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Show Interest Free - Screenshot 1.png)
The default value is enabled - the phrase *interest-free* appears to your customers. In the picture above, the checkbox is blank, so no *interest-free* message appears to your customers.
### Payment Amount
To show or hide the payment amount in bold:
1. Enable or disable the *Bold Payment Amount* checkbox.
!\[Shopify OSM App - Bold Amount - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Bold Amount - Screenshot 1.png)
The default value is enabled - the payment amount is in bold. In the picture above, the checkbox is blank, so the payment amount does not appear in bold to your customers.
### Show/hide "with"
The word "with" appears between the price and the Cash App Afterpay logo or badge. See the [Logo Type](#logo-type) below. To show or hide the word "with" do the following:
1. Enable or disable the Show "with" checkbox.
!\[Shopify OSM App - Show With - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Show With - Screenshot 1.png)
The default value is enabled - the word "with" appears between the price and the Cash App Afterpay logo or badge. In the picture above, the checkbox is blank, so the word with does not appear to your customers.
### Logo Type
To set the logo type:
1. Click the *Logo Theme* dropdown and select a new logo type.
!\[Shopify OSM App - Logo Type - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Logo Type - Screenshot 1.png)
### Logo Theme
To set the theme of the logo:
1. Click the *Logo Theme* dropdown and select the new logo theme you want.
!\[Shopify OSM App - Logo Theme - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Logo Theme - Screenshot 1.png)
### Modal Link Style
When a customer clicks on the modal link, a pop-up window appears with more information about Cash App Afterpay. The default symbol for the modal link is a circled info icon ⓘ.
To change or hide the modal link:
1. Click the *Modal Link Style* dropdown and select the new modal link option.
!\[Shopify OSM App - Modal Link - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Modal Link - Screenshot 1.png)
## Outside Order Limits Messaging
The outside order limits messaging is a message displayed when the product price is outside the limits for Cash App Afterpay.
The default for these limits is $1.00 - $4,000.00 at present.
To adjust the outside order limits messaging:
1. Disable the *Show Lower Limit* checkbox to hide the lower limit.
2. Disable the *Show Upper Limit* checkbox to hide the upper limit.
3. Disable the *Show If Outside Limits* checkbox to hide outside order limits messaging completely.
!\[Shopify OSM App - Order Limits - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Order Limits - Screenshot 1.png)
Remember that the above settings only affect the messaging the customer sees. The settings do not affect whether customers can buy products at the checkout.
## Mobile View Adjustments
You can set the styling separately for customers on mobile devices. To set the styling for mobile devices, do the following:
1. Click the monitor icon near the **Save** button.
2. Click the **Mobile** button that appears.

### Breakpoint
To adjust the screen width that defines the mobile view:
1. In the *Breakpoint* field, enter a new number in pixels.
!\[Shopify OSM App - Mobile Breakpoints - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Mobile Breakpoints - Screenshot 1.png)
### Text Alignment
To adjust the text alignment for a mobile view:
1. Click the *Text Alignment* dropdown and select a new alignment option.
!\[Shopify OSM App - Mobile Text Alignment - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Mobile Text Alignment - Screenshot 1.png)
### Margins
To adjust the margins above and below the messaging on a mobile view:
1. Enter a new number, this can be a negative number, into the *Margin Top* or *Margin Bottom* fields.
!\[Shopify OSM App - Mobile Margins - Screenshot 1.png]\(../../../assets/images/Shopify OSM App - Mobile Margins - Screenshot 1.png)
## Footer Payment Icon
To place a payment icon on the footer (bottom) of the payment page, see the Footer Payment Icon section in the [Shopify FAQ](/cash-app-afterpay/guides/platforms/shopify/faq)
## Hide Messaging from Some Products
When you have enabled the On-Site Messaging App, you can also hide Afterpay Messaging from certain products. To do this, use the Theme Editor to create a new template. Next you go to the Product section and choose the products that you don't want associated with messaging. Then you assign these selected product(s) to the new template and make sure no messaging is applied to that template.
To create the template:
1. Go to the On-Site Messaging App.
2. Open the Theme Editor.
3. Click the Home Page dropdown, and then select *Products*. See the picture below:

4. Select *Create Template*.
5. Enter a name for this new template. See the picture below:

You have now created your template and named it. Your next task is to fill this template with the product, or products, that you don't want to have Afterpay messaging.
Do the following:
1. Go to [Shopify admin](https://accounts.shopify.com/lookup?rid=d3c85713-691d-405c-a958-bde97cbf383e) and select *Products*.
2. Use the Search filter to find the product that you don't want to associate with Afterpay messaging. You can also find this product from the list of existing products. See the picture below:

3. In the Online store section, open the drop-down menu and select the new theme template you created. Then apply this new template to the product. See picture below:

4. Repeat step 3 for all the products that you don't want to associate with Afterpay messaging. Click **Save** when you have finished
5. Go back to On-Site Messaging App and open the *Theme Editor*.
6. Select the new template, then click *Afterpay Messaging* and delete it.
The Afterpay messaging for all the products assigned to the template is deleted.
---
# Manually Add Cash App Afterpay Site Messaging to Theme
---
# Manually Add Afterpay Site Messaging to Theme
**How can I add Afterpay Site Messaging to my Shopify product and cart pages?**
***
The Afterpay Code Snippet allows you, the merchant, to manually add Afterpay messaging to the product and cart pages. You do this by copy-pasting a code snippet into your Shopify liquid template file. This is a short procedure that consists of a few steps.
This page shows you how to do the following:
* [Configuration](#configuration)
* [Add an Afterpay Banner to Shopify](#add-an-afterpay-banner-to-shopify)
* [Add messaging to the dynamic or er cart](#add-messaging-to-the-dynamic-or-drawer-cart)
## Configuration
Do the following to position the Afterpay site messaging onto the product and cart pages of your Shopify website:
1. Copy the code below to your clipboard, a **Copy to Clipboard** icon in the top right corner makes this easy.
```js
{% if cart.currency.iso_code == shop.currency %}
{% else %}
{% endif %}
```
2. Login to [Shopify Admin](https://accounts.shopify.com/lookup?rid=edf4fd64-060c-48a7-bf95-095eb87b831c)
3. Navigate to **Themes**. To do this, go to **Sales channels** > **Online Store** > **Themes**.

4. Navigate to the current theme, then go to **Actions** > **edit code**.

5. Under the **Layout** folder, click **theme.liquid**.

6. Scroll to the bottom of the `theme.liquid` file:

7. Paste the copied text (Step 1), at the bottom of the `theme.liquid` file:
8. Click **Save**, and go to the website to review the product and cart pages for Afterpay assets.
!\[Shopify Manually Add Messaging - Config - Step 7 Screenshot.png]\(../../../assets/images/Shopify Manually Add Messaging - Config - Step 7 Screenshot.png)
Shopify have a help topic on editing Liquid files
[here](https://shopify.dev/docs/api/liquid)
.
## Add an Afterpay Banner to Shopify
To add an Afterpay Banner to your Shopify page, follow the instructions [here](/cash-app-afterpay/guides/platforms/shopify/add-a-cash-app-afterpay-banner-to-shopify).
## Add messaging to the dynamic or drawer cart
To add messaging to the dynamic or drawer cart, do the following:
1. Follow all the [Configuration](#configuration) steps above from step 1 to step 8.
2. Navigate to your `theme.liquid file`.
3. Find the required selector on the drawer cart.
4. Add the selector to the code and enable the dynamic cart integration.
### Example Code snippet for Afterpay US
```js
// var afterpay_dynamic_cart_integration_enabled = true;
// var afterpay_dynamic_cart_selector = '.cart-drawer__footer .totals';
// var afterpay_dynamic_cart_observer_target = '#CartDrawer';
```
### Example of code with selectors
```js
var afterpay_dynamic_cart_integration_enabled = true;
var afterpay_dynamic_cart_selector = '.total';
var afterpay_dynamic_cart_observer_target = '#CartDrawer';
```
---
# Shopify Manual Capture
CashApp Afterpay’s integration enables you to leverage Shopify’s manual capture setting.
This is a Shopify store-wide setting, so if you have it enabled for another payment method it is enabled for the new payment gateway.
If you enable *Manually capture payment for orders* within your Shopify payment settings, this means the following:
**Cash App Afterpay will not automatically capture orders when the customer completes checkout**
* Instead, Cash App Afterpay will place an authorization hold on the customer’s account like other payment methods
* Unlike other payment methods, the customer’s installment plan begins as soon as the authorization is made
* Most customers are charged for their first installment at this time, unless they qualify for Cash App Afterpay’s *No payment Up-Front* program. This is where the first installment is collected two weeks after the authorization is made
* Cash App Afterpay’s authorization hold is **valid for a period of 13 days from the time of authorization**. If the order has not been captured before this time, any uncaptured amount is automatically voided. This voided amount is subtracted from the Cash App Afterpay customer’s outstanding balance of the order. Sometimes the voided amount is more than the customer’s outstanding balance of the order. In this case the customer is refunded the remainder of the voided amount, up to the authorized amount. For more information on refunds, see the [Cash App Afterpay help](https://help.afterpay.com/hc/en-us/articles/360031623571-How-do-refunds-and-returns-work-at-Afterpay)
**Capture orders through the Shopify order tab, integrations, or direct through Shopify’s API**
* You can use all the available options on Shopify to capture Cash App Afterpay orders as any other payment method supporting manual capture
* **If you capture orders through a third-party integration or through Shopify’s API, you may need to extend your configurations to capture Cash App Afterpay orders**.
* If you capture orders through Shopify’s order tab, you will now need to capture Cash App Afterpay orders. See the [Shopify help on how to manually capture payments](https://help.shopify.com/en/manual/orders/get-paid#capture-payments-manually)
* **Shopify will continue to restrict orders to a single capture**. This means that any uncaptured amounts will expire and are voided on the 14th day after the original authorization
**To cancel an authorised order, you can use all the methods that Shopify allows (orders tab, integrations or Shopify’s API)**
* See the [Shopify help on how to manually capture payments](https://help.shopify.com/en/manual/orders/get-paid#capture-payments-manually)
* Shopify will continue to restrict cancellations to only apply to the full order amount - Shopify does not support partial cancellations
**Refunds will continue as normal**
* For partially captured orders, only the captured amount is available to be refunded
**You will only be settled for funds that you have captured**
---
# Shopify Order Reconciliation
Reconcile Afterpay US (New) or Cash App Pay orders on Shopify and ensure all transactions are accounted for.
This page consists of six sections:
* [Search for a specific order in Shopify](#search-for-a-specific-order-in-shopify)
* [Reconcile orders from Shopify Orders export](#reconcile-orders-from-shopify-orders-export)
* [Search for all orders by payment method in Shopify](#search-for-all-orders-by-payment-method-in-shopify)
* [Export all orders by payment method in Shopify](#export-all-orders-by-payment-method-in-shopify)
* [Search for country-specific orders in Shopify](#search-for-country-specific-orders-in-shopify)
* [Create custom report by payment method](#create-custom-report-by-payment-method)
Shopify provide a detailed guide to
[Searching, viewing, and printing orders](https://help.shopify.com/en/manual/orders/manage-orders/search-view-print-orders)
. Use this Shopify guide along with the information on this page.
## Search for a specific order in Shopify
To find a specific order, do the following:
1. Go to *Shopify Admin* > *Orders*.
2. Enter the following in the *Orders* search bar, that is the search bar called *Filter Orders*: `receipt.payment_id:`
3. Copy the *Merchant Order No.* from the [Business Hub](https://hub.us.afterpay.com/us) and paste it in search bar after `receipt.payment_id:`
Here is an example in the Shopify *Orders* tab:

To access the Shopify Admin, use this [URL](http://shopify.com/admin/orders?query=receipt.payment_id%3A).
## Reconcile orders from Shopify Orders export
To reconcile orders from the export, do the following:
1. Go to *Shopify Admin* > *Orders*
2. Optional: Enter **afterpay** in the Orders search bar.
3. Optional: Enter **"cash app pay"** in the Orders search bar. Notice the quotes for an exact match.

4. Click **Export**.
5. Towards the right side of the exported table, a *Payment ID* column is now available. For both Afterpay US (New) and Cash App Pay orders, this column is populated with the Merchant Reference No. from the [Business Hub](https://hub.us.afterpay.com/us).
For example, here is a Shopify export file:
{/* */}
For example, within the Business Hub the information appears like this:
## Search for all orders by payment method in Shopify
To search for all orders by payment method, do the following:
1. Go to *Shopify Admin* > *Orders*.
2. Enter **"Afterpay US (New)"** or **"Cash App Pay"** (include the quotation marks for an exact match) in the *Orders* search bar.

3. Click **Save as** to save this order filter.
If you use both the
**Afterpay US (New)**
payment app and the
**Afterpay (New)**
payment app, you can search for them separately.
## Export all orders by payment method in Shopify
To export all your orders by payment method in Shopify, do the following:
1. Go to *Shopify Admin* > *Orders*.
2. Enter **"Afterpay US (New)"** or **"Cash App Pay"** (include the quotation marks for an exact match) in the *Orders* search bar.
3. Click the checkbox at the top of the column on the extreme left to select all the orders (see picture below) and click **Export** at the top right of the window.

4. The Export orders popup appears. Click the **Selected \[n] orders** radio button, and select what type of file you want for the exported data.

5. Click **Export orders**.
## Search for country-specific orders in Shopify
This is a useful way to identify cross-border trade (CBT) orders. Do the following:
1. Go to *Shopify Admin* > *Orders*.
2. Enter a search term in the search bar. For example, in the picture below, the search term is **canada afterpay**. This search shows all the Canadian Afterpay orders with their status and other information.

## Create custom report by payment method
If you use Advanced Shopify or Shopify Plus to host your store, you can use the Custom Report feature to find Afterpay US (New) and Cash App Pay orders.
To do this, you create and run a custom report for Orders by Payment Type. Start by going to your store's Shopify Admin page. Then go to *Analytics* > *Reports* > *Create custom report*.
For more information about how to run reports, see [this information](https://help.shopify.com/en/manual/reports-and-analytics/shopify-reports/report-types) from Shopify, along with [this information](https://help.shopify.com/en/manual/reports-and-analytics/shopify-reports/report-types/custom-reports) on custom reports.
---
# Shopify Test Mode
The Afterpay US payment app on Shopify supports a Test Mode. This means you are able to mock all supported transactions including:
* Authorizations
* Captures
* Voids
* Refunds
There are the following sections on this page:
* [Enable test mode for Afterpay US](#enable-test-mode-for-afterpay-us)
* [How do I know if Sandbox is enabled](#how-do-i-know-if-sandbox-is-enabled)
* [How to create a test order](#how-to-create-a-test-order)
* [Enable test mode for Cash App Pay](#enable-test-mode-for-cash-app-pay)
Do not enable test mode on your live site. Once the payment method is activated in the store settings, it is live for customers to use. Only use a staging or development Shopify store for testing.
## Enable test mode for Afterpay US
**Note**
Before you enable Test Mode, please complete the initial Afterpay US configuration. To do this, follow the steps to [Add Cash App Afterpay at Checkout](/cash-app-afterpay/guides/platforms/shopify/add-cash-app-afterpay-at-checkout) to verify your merchant account in the Business Hub.
To enable the test mode for Afterpay US:
1. From your [Shopify admin](https://www.shopify.com/login), go to *Settings* > *Payments*.
2. In the *Additional payment methods* section, click **Afterpay US (New)**.
3. In the *Test mode* section, turn the toggle on. See the screenshot below:

4. Click **Save**.
You're now ready to test Afterpay US transactions in your dedicated test store.
## How do I know if Sandbox is enabled
To check if Sandbox has been configured correctly, go to your test site and conduct a test transaction. Once it has been redirected to the Cash App Afterpay Login page, check the URL and it should be a Sandbox URL.
For example:
`portal.sandbox.afterpay.com/v2/checkout/en-AU/password`
## How to create a test order
For Cash App Afterpay transactions, follow the instructions [here](/cash-app-afterpay/guides/api-development/test-environments#test-customer-accounts) to create a sandbox customer account and mock various transaction approval outcomes.
For Cash App Pay transactions, creating test orders involves slightly different steps for desktop and mobile views.
* On desktop, you're taken to a page that displays a Cash App Pay QR Code. Scan this QR Code with your mobile device to decide whether to accept or decline the test order
* On mobile, you're automatically sent to a page where you can directly choose to accept or decline the test order
## Enable test mode for Cash App Pay
Before you enable Test Mode, please complete the initial Cash App Pay application configuration. To do this, follow the steps to [Add Cash App Pay at Checkout](/cash-app-afterpay/guides/platforms/shopify/add-cash-app-pay-at-checkout) and use your production merchant credentials (Production Merchant ID and Production Secret Key). Once the Cash App Pay application is configured using your production merchant credentials, follow the steps below to enable the test mode for Cash App Pay.
To test a Cash App Pay integration, do the following:
1. From your [Shopify admin](https://www.shopify.com/login), go to *Settings* > *Payments*.
2. In the *Additional payment methods* section, click **Cash App Pay**.
3. In the *Test Mode* section, click the toggle on. See the picture below:

4. On the initial Cash App Pay setup screen, click **Test Mode**.

5. On the *Test Mode* screen, enter your sandbox credentials.
6. Enter your Cash App Afterpay Sandbox merchant ID in the *Sandbox Merchant ID* field.
7. Enter your Cash App Afterpay Sandbox secret key in the *Sandbox Secret Key* field.
8. Click **Continue**.

Your store is now ready to mock Cash App Pay transactions with your Sandbox credentials.
---
# Add a Cash App Afterpay Banner to Shopify
Banners display Cash App Afterpay information at the top of your Shopify page, as shown in the images below.
To add a Cash App Afterpay banner, you must edit your store's code. Before proceeding, ensure that:
* The [Afterpay US](https://apps.shopify.com/afterpay-us) payment app is already installed and running on your online store
* You have chosen a banner that aligns with the guidelines
You are changing your online store's code, so be careful. We recommend you create a duplicate page and only publish it once you have verified the changes.
## Steps to Add the Banner
1. Click **Actions** and select *Edit Code* from the drop-down menu.
2. Scroll down to *Sections* and click **Add a new section**.
3. In the *Create a new section called* field enter **cash-app-afterpay-banner**. The *cash-app-afterpay-banner.liquid* tab appears.
4. Delete the code that populates the *cash-app-afterpay-banner.liquid* tab.
### Add the Liquid file
1. Click the link to the [banner code snippet](https://static.afterpay.com/shopify-cash-app-afterpay-banner-liquid.html).
2. Click the **Copy to Clipboard** button.
3. Paste the banner code snippet into the *cash-app-afterpay-banner.liquid* tab.
4. Click **Save**.
### Editing the Theme Liquid file
1. Open the `theme-liquid` file.
2. Locate the line `{% sections 'header-group' %}` or `{% section 'header' %}`.
3. Add `{% section 'cash-app-afterpay-banner' %}` above this line. In the example below, it is added to line 4:
```
{% section 'popup' %}
{% section 'announcement-bar' %}
{% section 'cash-app-afterpay-banner' %}
{% section 'header' %}
```
4. Click **Save**.
To verify the changes, click **Preview** and check for the banners appearance at the top of the page.
The images below illustrate a white, black, and green banner:



### Changing the Banner Color
To change the banner color:
1. Login to your **Shopify Admin** and navigate to your **Theme Settings** page: Go to **Online Store**> **Themes**.
2. Click **Customize** to change the theme with the Cash App Afterpay Banner.

3. Click **Cash App Afterpay Banner**.

4. Click **Banner color**.
5. Select **Black**, **White**, or **Green**.

6. Click **Save**.
## Brand Assets
For more examples and information on brand assets, including banners, see the [Brand Assets](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/brand-assets) section of this guide.
---
# Shopify FAQ
Frequently Asked Questions:
## Configuration and Setup
### Can’t verify your merchant account in the Business Hub?
You need **User** or **Hub Admin** permissions in the Business Hub to verify your merchant account. Make sure you have the right permissions before trying to connect your Business Hub account.
### Can't log in to the Business Hub?
If you've already installed the [Afterpay US payment app](/cash-app-afterpay/guides/platforms/shopify/add-cash-app-afterpay-at-checkout#download-the-afterpay-us-payment-app), you'll be redirected to the Business Hub to verify your merchant account.
If you're having trouble signing in:
* Use the [Forgot my password](https://hub.us.afterpay.com/forgot-password) link to reset your Business Hub password.
* Contact your team's main internal onboarding contact if you need general user account access created for the Business Hub
If you are still unable access the Business Hub, contact our Merchant Admin team by using the contact information below:
Email: [na-afterpay-merchant-admin@squareup.com](mailto:na-afterpay-merchant-admin@squareup.com)
Phone: +1 (484) 772-2736 | We are available Monday–Friday, 7:00am–4:00pm (PST).
Please make sure to provide the following information so that we can promptly help you:
* Your full name
* Merchant ID
* Trading/Business name
* Email address
***
### Why am I seeing "Your payment can't be processed for technical reasons. Please try a different payment method" at checkout?
This can occur when a customer checks out with Cash App Afterpay without entering an email address.
To prevent this from happening you can go to your [Shopify settings](https://www.shopify.com/admin/settings/checkout) and select **Customers can only check out using email**.
***
### Why are Cash App Afterpay orders not captured?
See the [Shopify Manual Capture](/cash-app-afterpay/guides/platforms/shopify/shopify-manual-capture) topic.
***
### Why can't I see Cash App Afterpay in my Express Checkout?
Cash App Afterpay is currently unavailable on Shopify Express Checkout.
If you navigate to the *Payment Methods* you should be able to view Cash App Afterpay.
If Cash App Afterpay is not visible on the Payment Methods, please contact your Cash App Afterpay Delivery Manager.
***
## Shopify Themes
### How do I add Cash App Afterpay to my theme?
See the instructions on the [Manually Add Cash App Afterpay Site Messaging to Theme](/cash-app-afterpay/guides/platforms/shopify/manually-add-cash-app-afterpay-site-messaging-to-theme) page.
***
### Why did Cash App Afterpay disappear from the Shopify product page after changing themes?
To display the Cash App Afterpay installment detail on the Shopify product pages, the active store theme is modified. When you change the Shopify theme, a new set of theme/template files is installed, which will not include the Cash App Afterpay product page display.
Although the product page display will require re-integration, Cash App Afterpay will remain active as a payment method on the Shopify checkout page.
To re-integrate the Cash App Afterpay product page display for the newly installed Shopify theme, please complete the steps outlined in the [Cash App Afterpay site messaging](/cash-app-afterpay/guides/platforms/shopify/manually-add-cash-app-afterpay-site-messaging-to-theme) topic.
***
### How do I add Cash App Afterpay to my payment icons?
To place a payment icon on the footer (bottom) of the payment page, first ensure that you have [enabled payment icons in your footer](https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-credit-card-icons#enable-payment-icons-in-your-footer).
Then do the following:
1. From your [Shopify admin](https://admin.shopify.com/), go to Online Store and select **Themes**.

2. Find the theme you want to edit, then click the **...** button to open the *Actions* menu. Click **Edit Code**.

3. In the *Sections* directory, click **footer.liquid**.

If your theme doesn't include this file, click **theme.liquid** in the Layout folder.

4. Find the following code in the file:
```
{% for type in shop.enabled_payment_types %}
```
5. Replace that line with the following two lines of code:
```liquid
{% assign enabled_payment_types = "cashappafterpay" | concat: shop.enabled_payment_types %}
{% for type in enabled_payment_types %}
```
6. Click **Save**
## The code examples above are in [Liquid](https://shopify.github.io/liquid/basics/introduction) which is Shopify's own code language.
## Cash App Afterpay Banner
### How do I add a Cash App Afterpay banner myself?
If Cash App Afterpay messaging is already on your store and you would like to add a customizable Cash App Afterpay Banner, follow the instructions on the [Add an Cash App Afterpay Banner to Shopify page](/cash-app-afterpay/guides/platforms/shopify/add-a-cash-app-afterpay-banner-to-shopify).
***
## Orders
### Why was the customer returned to the Shopify checkout after trying to place an order with Cash App Afterpay?
A common cause for a customer being returned to the Shopify checkout page after trying to place an order with Cash App Afterpay is invalid order amount.
A customer's Cash App Afterpay transaction will not be approved should the order total be:
* Below the merchant minimum order value
* Above the merchant maximum order value
* In a non-supported currency
In any of these cases the customer is returned to the Shopify checkout page.
***
### How can I process a refund?
Cash App Afterpay orders can be refunded from Shopify and are automatically sent to Cash App Afterpay.
You can learn how to do refunds [here](https://help.shopify.com/en/manual/orders/refund-cancel-order).
***
### How do I update my store's minimum or maximum order value?
Please send an email with your request to [merchantAdminUS@afterpay.com](mailto:merchantAdminUS@afterpay.com)
***
### Why is the amount different between a Shopify order and Cash App Afterpay after capture?
This occurs if the cart is modified after the customer is redirected to Cash App Afterpay to complete the order.
This issue has been resolved by Shopify's Checkout Extensibility. If you are affected by this issue, it is likely that you still use Shopify's older checkout platform, called *checkout.liquid*. According to Shopify, they will have contacted you about migration to the latest Checkout Extensibility platform. As the *checkout.liquid* platform deprecated on August 13th 2024, we urge you to use Shopify's latest checkout platform to avoid posssible problems.
Adding or subtracting units of any item to the cart, or even new items, changes the amount. The transaction on the Cash App Afterpay side now has a different amount than the amount in the merchant's Shopify shop.
According to Shopify, payments apps must not do any of the following:
* Use any [Shopify APIs](https://shopify.dev/api) other than the Payment Apps API and [mandatory webhooks](https://shopify.dev/docs/apps/webhooks/configuration/mandatory-webhooks) for General Data Protection Regulation (GDPR)
* For more details, see the [Prohibited actions](https://shopify.dev/docs/apps/payments#prohibited-actions) section
If the amount is different and the customer has paid less than the order at the Shopify shop, the order status automatically becomes **Partially Paid**.

#### Fix the problem
You, the merchant, must make a manual action to fix the problem. Here are some ideas:
* If the amount paid is less than the final order value, you can ask the customer to submit an extra payment. Ask the customer to use a different payment method to make this payment
* If the amount paid is more than the final order value, you can make a partial refund to resolve the discrepancy
* You can cancel the entire order, and refund the customer. Then ask the customer to place their order again, this time with the correct number of items in the cart
## If this problem occurs regularly, please inform Shopify.
## Messaging
### Selectively hide Cash App Afterpay Messaging
Shopify sellers manually placing the [Onsite Messaging](/cash-app-afterpay/guides/afterpay-messaging/getting-started) widget on their **Product Detail** and **Cart** pages can selectively hide the **Onsite Messaging Widget** for certain items.
Tag products you want to exclude (for example, `no-cash-app-afterpay`) and insert a brief code snippet into your theme files where the `` tags are located.
This option is ideal for Shopify merchants who prefer to restrict the usage of Cash App Afterpay for specific products, including gift cards.
**Product Detail page**
```js
{% unless product.tags contains 'no-cash-app-afterpay' %}
{% endunless %}
```
**Cart page**
```js
{% assign cash_app_afterpay_eligible = true %}
{% for item in cart.items %}
{% if item.product.tags contains 'no-cash-app-afterpay' %}
{% assign cash_app_afterpay_eligible = false %}
{% break %}
{% endif %}
{% endfor %}
{% if cash_app_afterpay_eligible %}
{% endif %}
```
***
## Onsite Messaging App
### How do I get started with Cash App Afterpay On-Site Messaging for Shopify?
To use the Cash App Afterpay On-Site Messaging app, you must install the app from the [Shopify app store](https://apps.shopify.com/afterpay-messaging). Configure this app according to your preferences. This setup includes customizing the appearance of on-site messages and ensuring the messages integrate with your store's theme.
***
### How can I manually add Cash App Afterpay messaging to my Shopify theme?
You can manually integrate Cash App Afterpay messaging into your Shopify theme. This process involves adjusting your theme's HTML/Liquid files to include Cash App Afterpay's messaging scripts at the desired locations on your product and cart pages. For details see the [Manually Add Cash App Afterpay Site Messaging to Theme](/cash-app-afterpay/guides/platforms/shopify/manually-add-cash-app-afterpay-site-messaging-to-theme) page.
***
### What are the implementation steps for Cash App Afterpay On-Site Messaging on Shopify?
There are several key steps to implement:
* Ensure your store meets the technical requirements
* Configure the app's settings in your Shopify admin
* Test the messaging display on your store to confirm that it functions correctly and reflects the intended customer experience.
For details on all the above steps, see the [Cash App Afterpay On Site Messaging App](/cash-app-afterpay/guides/platforms/shopify/cash-app-afterpay-on-site-messaging-app) page.
***
## Cash App Pay
### Generate Cash App Pay Logo URL on Shopify
As part of the Cash App Pay checkout setup process, you need to provide Cash App Afterpay with a logo URL. This is for a Cash App Pay logo that appears on the checkout page.
Sometimes it's hard to figure out what this logo URL will be, so here's a method:
1. Go to [Shopify admin](https://accounts.shopify.com/lookup?) and log in as normal.
2. Go to the *Files* page.

3. Upload a square shaped logo that is at least 256 x 256 pixels in size and under 2MB file size. For the full Cash App logo specification, see the [Adding Cash App Pay to Your Site](/cash-app-afterpay/guides/api-development/add-cash-app-pay-to-your-site/overview#add-your-logo-to-the-qr-code-scanner) page. Any square shaped logo that meets the size criteria will do, the logo does not have to be the Cash App logo.
4. Give Caash App Afterpay the URL to the logo.
---
# Stripe
If you are an Afterpay merchant, see the
[Migration page](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/platforms/stripe-migration)
for information on the migration from Afterpay to Cash App Afterpay.
## Integration Process
To add Cash App Afterpay as a Payment Method to your site please contact your Stripe Account Manager.
## Integration Documentation
[Learn how to accept Cash App Afterpay payments through Stripe](https://stripe.com/docs/payments/afterpay-clearpay)
### Cash App Afterpay Messaging and Best Practice Guidelines
See the [Stripe Site Messaging](https://docs.stripe.com/payments/payment-method-messaging) page to add simple messaging to your site.
See also our [On-Site Messaging](/cash-app-afterpay/guides/afterpay-messaging/getting-started) pages to make the most of Cash App Afterpay on your site.
---
# WIX
If you are an Afterpay merchant, see the [Migration page](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/platforms/wix-migration) for information on the migration from Afterpay to Cash App Afterpay.
To integrate Cash App Afterpay with WIX, follow the instructions below.
## Install and configure Cash App Afterpay
Before you begin, make sure you have a registered Cash App Afterpay account.
1. Log in to the [Wix Website Admin Portal](https://users.wix.com/signin?forceRender=true). The *My sites* page appears.
2. Select the site you want, normally this is the name of your store.
3. From the left side menu, select **Settings**. The **Settings** page appears.

4. Click **Accept payments**, the **Accept Payments** page appears.

5. Look at the top-right of the screen. There is a **Your business location:** field. This should be the region you registered for Cash App Afterpay. If it shows the wrong region, click the down chevron and select the correct region.
6. At the bottom of the page, click **See More Payment Options**, the **More Payment Options** page appears. Scroll down the page to find **Afterpay**.
7. Click **Connect**, the *Connect Afterpay* page appears. Follow the instructions on the page. You must enter the **Merchant ID** and **Secret Key** that we have given you.

8. Click **Connect**. Cash App Afterpay has now been added as a payment method. Your Payment Methods page should now include Cash App Afterpay. Your customers can now use Cash App Afterpay to buy goods or services from you.
Only use Sandbox mode when instructed by a Cash App Afterpay account manager or other technical expert.
## Supported countries and regional settings
Cash App Afterpay is available for domestic purchases, using local currency, in the USA only.
To change your settings:
1. Log-in to Wix and go to the **Settings** menu, just like step 3 in the procedure above.
2. Click **Language & region**, the **Language & Region** page appears.

3. Make the changes you want.
4. Click the **Save** button in the top right corner of the page.
To check your regional settings, log in to Wix and navigate to **Settings** > **General Info** and scroll down to **Regional Settings**
---
# Getting Started
If you are an Afterpay merchant, see the [Migration page](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay/platforms/woo-commerce-migration) for information on the migration from Afterpay to Cash App Afterpay.
Follow the instructions below:
**What are the requirements for the Cash App Afterpay WooCommerce Plugin?**
***
### WordPress Version
The WordPress version must be 4.8.3 or greater to integrate with Cash App Afterpay.
To find the WordPress version number, look at the bottom right corner of the WordPress Admin Dashboard.
### WooCommerce Version
The WooCommerce version must be 3.2.6 or greater to integrate with Cash App Afterpay.
To find the WooCommerce version number:
1. Navigate to **WordPress Admin** > **Plugins** > **Installed Plugins**.

### Store Currency
Please note that Store Currency must correspond to the Cash App Afterpay account region, which is USA only. To check this:
1. Navigate to: **WordPress Admin** > **WooCommerce** > **Settings** > **General**.
2. Under **Currency options**, the currency must be United States dollar.

[**Express Checkout**](../../EXPRESS-CHECKOUT/What-is-Express-Checkout.md) is available in all supported countries with Version 3.1.0 and above.
## Next Steps
Go ahead and install the Cash App Afterpay plugin; see the [Install Plugin](/cash-app-afterpay/guides/platforms/woo-commerce/install-plugin) page for details.
---
# Install Plugin
**How Can I Install the Cash App Afterpay WooCommerce plugin?**
***
Do the following:
1. Navigate to **WordPress Admin Dashboard**.
2. Navigate to **Plugins** > **Add New**.

3. Type **Cash App Afterpay** into the Keyword search box:

4. Locate the **Cash App Afterpay Gateway for WooCommerce** plugin and click **Install Now**.

5. Once the installation is complete, click the **Activate** button.

## Information for Developers
For developers interested in using the Cash App Afterpay WooCommerce Plugin in local development, click this [link](https://wordpress.org/plugins/afterpay-gateway-for-woocommerce/#developers).
---
# Configure Plugin
**How can I add Cash App Afterpay as a payment method and display Cash App Afterpay Site Messaging?**
***
## Configuration
Complete the steps below to enable and display Cash App Afterpay as a Payment Method, and add Cash App Afterpay messaging to product pages.
If you have completed the Cash App Afterpay Gateway Installation steps, go to Step 3.
1. Go to the *WordPress Admin Dashboard*.
2. Go to *Plugins*\* > *Installed Plugins*.
3. Find the *Cash App Afterpay Gateway for WooCommerce* in the plugin list and click the **Settings** button.

4. Go to the *Core Configuration* section.

5. Enter the Merchant ID provided by Cash App Afterpay into the *Merchant ID* field.

6. Enter the Secret Key provided by Cash App Afterpay into the *Secret Key* field.

7. Click the **Save changes** button at the bottom of the page.
After a successful save of the Cash App Afterpay credentials, the *Merchant Public ID*, *Minimum Payment Amount*, *Maximum Payment Amount* and *Settlement Currency* values are updated.

The
**Sandbox**
API Environment is only applicable for dedicated test websites. Contact your Cash App Afterpay Account Manager if you need test credentials.
## Enable Express Checkout
To enable Express Checkout:
1. Go to **WordPress Admin Dashboard**.
2. Go to **Plugins** > **Installed Plugins**.
3. Find the *Cash App Afterpay Gateway for WooCommerce* in the plugin list and click the **Settings** button.
4. Find *Express Checkout Configuration* and enable the checkbox.

## Enabling the Cash App Afterpay Messaging for WooCommerce
The Cash App Afterpay messaging can be enabled on:
* Category Pages
* Product Pages
* Cart Page
To start do the following:
1. Login to the Wordpress Dashboard.
2. Go to *Plugins* > *Installed plugins* > *Cash App Afterpay Gateway for Woocommerce* and click *Settings*.

Under *Settings*, you can see settings for:
* [Express Checkout Configuration](#enable-express-checkout)
* [Payment Info on Category Pages](#payment-info-on-category-pages)
* [Payment Info on Individual Product Pages](#payment-info-on-individual-product-pages)
* [Payment Info Display for Product Variant](#payment-info-display-for-product-variant)
These settings are described below.
### Payment Info on Category Pages

To enable the messaging on the Category page, do the following:
1. Ensure the *Enable* checkbox is enabled.
2. Enter the correct hook to position the messaging and set the priority to increase or decrease the height of the Messaging position. See the [Hook](#hook) section below.
#### Hook
The positioning of the Messaging for Woocommerce relies on a hook. [This link](https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/) is a guide to understanding hook positioning on Category pages.
The hooks for Category pages and Product pages are completely different.
For example, use the hook `woocommerce_after_shop_loop_item`to position the messaging under the price:

Below is an example of a category page with Cash App Afterpay messaging:

For more information on hooks, see the
[Hooks](WC-Hooks.mdx)
page.
### Payment Info on Individual Product Pages
To enable the messaging on the individual Product page, do the following:
1. Ensure the Enable checkbox is enabled.
2. Enter the correct hook to position the messaging and set the priority to increase or decrease the height of the Messaging position. See the **Hook** section below.
#### Hook
The positioning of the Messaging for Woocommerce relies on a hook. [This link](https://www.businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/) is a guide to understanding hook positioning for Product pages.
The hooks for Category pages and Product pages are completely different.
For example, use the hook `woocommerce_before_add_to_cart_form` to position the messaging directly under the Product Page price:

Below is an example of a Product Page with Cash App Afterpay messaging:

For more information on hooks, see the
[Hooks](WC-Hooks.mdx)
page.
### Payment Info Display for Product Variant
This option enables the Cash App Afterpay Messaging for any variant products.
For example, a product that has a price range from between $50 to $200. The Cash App Afterpay Messaging also displays the instalment breakdown according to a price range.
When a customer selects a variant, a specific price appears. This option enables the Cash App Afterpay Messaging to display a specific price breakdown.
---
# Update Plugin
**To update the 'Cash App Afterpay Gateway for WooCommerce' plugin, please follow the below steps.**
***
As updates for the **Cash App Afterpay Gateway for WooCommerce** plugin are released, notifications appear in WordPress Admin.
A number appears in WordPress Admin next to the Plugins link, it shows the number of plugin updates available.

We strongly recommend that you backup website files and data before you do an update.
## Upgrade Instructions
1. Navigate to the **WordPress Admin Dashboard**.
2. Navigate to **Plugins** > **Installed Plugins**.
3. Locate the **Cash App Afterpay Gateway for WooCommerce** in the plugin list.
> The version update notification is displayed, with links to the release details, and to update the plugin.
4. Click the **update now** link.

5. The **Cash App Afterpay Gateway for WooCommerce** plugin now starts to update.

6. Once complete, the notification bar turns green and the text changes to **Updated!**.

---
# Advanced Configuration
This section outlines the advanced configuration options related to the Cash App Afterpay WooCommerce integration and site-specific customisation.
The *Cash App Afterpay Gateway for WooCommerce* plugin is available for extension or customisation, without alterations to the plugin code.
This allows for a greater level of compatibility with future updates.
Advanced Configuration is divided into the following sections:
* [Hooks](#hooks)
* [Shortcodes](#shortcodes)
## Hooks
### Product Eligibility
The Cash App Afterpay plugin runs a series of checks to determine whether Cash App Afterpay should be an available payment option for each individual product. Third-party plugins can exclude Cash App Afterpay from products that would otherwise be considered supported. To fix the exclusion problem, attach the following filter hook:\
`afterpay_is_product_supported`
**Example**
```php
/**
* @param bool $bool_result
* @param WC_Product $product
*/
function afterpay_ips_callback( $bool_result, $product ) {
# My custom products don't support Afterpay.
if ($product->get_type() == 'my-custom-product-type') {
$bool_result = false;
}
return $bool_result;
}
add_filter( 'afterpay_is_product_supported', 'afterpay_ips_callback', 10, 2 );
```
### Customising Hooks & Priorities
Various WooCommerce hooks are assumed to be implemented by the active WordPress theme. Cash App Afterpay methods can be detached from their default hooks and reattached to different hooks, or to the same hooks with different priorities.
Since version 2.1.0, hooks and priorities can be customised from within the plugin settings page.

## Shortcodes
This section outlines the shortcodes utilised by the Cash App Afterpay WooCommerce integration.
### Cash App Afterpay Product Logo
This is provided for rendering an advanced `img` tag to display the Cash App Afterpay logo on individual product pages. The `img` tag uses the `srcset` attribute to include 3 different resolutions of the logo for screens with varying pixel density ratios.
```html
[afterpay_product_logo]
```
There are 3 different versions of the logo to chose from:
* `colour`
* `black`
* `white`
The default theme is `colour`. This can be overridden by including a `theme` attribute inside the shortcode. For example, if you have a dark themed website and wish to use the white mono version of the Cash App Afterpay logo:
```html
[afterpay_product_logo theme="white"]
```
### Cash App Afterpay Product Messaging
To use the shortcode on product pages, please make sure the **Payment Info on Individual Product Pages** has been enabled. Edit the text content as appropriate. Optionally, clear the hook name if you would like to disable the default behaviour of rendering the content when the hook is triggered. Instead, the content will then only render wherever the shortcode is added.

Then paste `[afterpay_paragraph]` into the product description, or into a content area using your page builder.


To use the shortcode on custom pages, provide a product ID in the shortcode:
```html
[afterpay_paragraph id="99"]
```

---
# Currency Conversion
Version 3.5.0 and later versions of the Cash App Afterpay plugin for WooCommerce support currency conversion. This is a great feature for merchants who operate in multiple countries with multiple currencies.
## Prerequisites
Before you implement currency conversion, check that:
* You are a merchant enabled for Cross-Border-Trade (CBT) to other countries
* You have a third-party currency conversion plugin. This plugin sends the customer’s selected currency to payment gateways
## Implementation
To implement the currency convertor, do the following:
1. Open **WordPress admin** and navigate to **WooCommerce**.
2. Click **Settings**, and then click the **Payments** tab. The Cash App Afterpay Gateway information appears.

3. Scroll down the page and ensure that these fields contain the correct information:
* **Enable/Disable**: **Enable Cash App Afterpay** is checked.
* **Title**: This is what appears as the payment method title on your checkout page. **Cash App Afterpay** is a good default title.
* **API Environment**: Select **Sandbox** for testing or **Production** for actual use with real customers and real money.
* **Merchant ID**: Cash App Afterpay gives you the merchant IDs for both Sandbox testing and production use.
* **Secret Key**: Cash App Afterpay gives you the secret keys for both Sandbox testing and production use.
* **Minimum Payment Amount**: This is set in your Cash App Afterpay merchant account.
* **Maximum Payment Amount**: This is set in your Cash App Afterpay merchant account.
* **Settlement Currency**: This is set in your Cash App Afterpay merchant account.
* **Merchant Country**: This must be the country where your Cash App Afterpay merchant account is located.
* **Excluded Categories**: Enter any excluded categories of product or service here and separate each category with a comma. For example, pornography, gambling, firearms, and so on.
The next section is entitled **Cross Border Trade Configuration**. This section controls the currency conversion.

4. Scroll down the page and ensure that these fields contain the correct information:
* **Enable Multicurrency**: With this enabled, overseas customers are now able to use Cash App Afterpay with their local currency selected and pay the exact amount that they see in checkout
* With **Enable Multicurrency** disabled, Cash App Afterpay is not available when a foreign currency is selected. However, overseas customers may still be able to log into their local Afterpay/Clearpay customer account to complete the order, and pay in their local currency. This method uses Cash App Afterpay exchange rates (mostly likely different from the rates used on the merchant site). This has always been the default behaviour for cross border trade (CBT) before this multicurrency feature was introduced
* **CBT Countries**: Cash App Afterpay populates this field, which is a list of countries that have been enabled for CBT. After payment, the currency is converted to your currency for settlement
* **CBT Limits**: This field shows the exchange rates used. These rates are automatically checked every 15 minutes and updated thens
5. The other fields on this page are not relevant to currency conversion. Scroll down to the bottom of the page and click **Save Changes**.
## The Store Page
Assuming you, the merchant, have applied the correct settings, your store page should behave like this:
* When the customer pays in your local currency, the prices are displayed in your local currency
* When the customer selects their local currency, the prices change to their local currency
See the screenshots below for an example:

In the screenshot above, the store is based in the USA and the customer wants to pay with US dollars. The prices for the items are in US dollars.

In the screenshot above, the customer wants to pay in Australian dollars. The customer clicks the **AUD** button on the right side of the page. The prices automatically change from US dollars to Australian dollars.
---
# Woo Commerce FAQ
**Frequently Asked Questions about the Cash App Afterpay WooCommerce Integration.**
***
## Why is Cash App Afterpay not showing on product pages?
To display the Cash App Afterpay installment detail on the product pages, the active WordPress theme must implement the below action hook:\
`woocommerce_single_product_summary`
You must also enable the *Payment Info on Individual Product Pages*\* setting, and the product must be eligible.
For advanced configuration, see the **Hooks** section of the [WooCommerce Advanced Configuration](/cash-app-afterpay/guides/platforms/woo-commerce/advanced-configuration) page in this guide.
***
## Why is Cash App Afterpay not showing on category and search result pages?
To display the Cash App Afterpay installment detail on the category and search result pages, the active WordPress theme must implement the below action hook:\
`woocommerce_after_shop_loop_item_title`
You must also enable the **Payment Info on Category Pages** setting, and the product/s must be eligible.
For advanced configuration, see the **Hooks** section of the [WooCommerce Advanced Configuration](/cash-app-afterpay/guides/platforms/woo-commerce/advanced-configuration) page in this guide.
***
## Why is Cash App Afterpay not showing on the cart page?
To display the Cash App Afterpay installment detail on the cart page, the active WordPress theme must implement the below action hook:\
`woocommerce_cart_totals_after_order_total`
You must also enable the **Payment Info on Cart Page** setting, and all the cart items must be eligible.
For advanced configuration, see the **Hooks** section of the [WooCommerce Advanced Configuration](/cash-app-afterpay/guides/platforms/woo-commerce/advanced-configuration) page in this guide.
---
# Getting Started with Cash App Afterpay On-Site Messaging
If you are an Afterpay merchant, see the
[Migration page](/cash-app-afterpay/guides/welcome/migrate-from-afterpay-to-cash-app-afterpay)
for information on the migration from Afterpay Messaging to Cash App Afterpay Messaging.
**What Is Cash App Afterpay messaging?**
***
Cash App Afterpay Messaging informs your customers - as they browse - that pay by installments with Cash App Afterpay is available. This helps to improve your conversion rates and average order value.
The Cash App Afterpay Messaging Widget takes all the following actions:
* Automatically displays the most optimal payment option. If you have the Pay Monthly product, the widget displays monthly installment messaging for higher priced items and Pay-in-4 (installments) messaging for lower priced items
* Calculates and displays the installment amount
* Displays the Cash App Afterpay Information Modal when a customer clicks on the ⓘ (information) icon.
* You meet Cash App Afterpay's compliance criteria: You can always be sure you are using the latest terms of service; you are up-to-date with the latest regulatory information and brand identity. You will display the correct product and fee information
* You maximize the benefits of Cash App Afterpay. Our best practice recommendations are tried, tested, and proven to optimize your checkout funnel
## See Also
* [Implementation](/cash-app-afterpay/guides/afterpay-messaging/implementation)
* [Placement](/cash-app-afterpay/guides/afterpay-messaging/placement)
* [Upgrade to On-Site Messaging](/cash-app-afterpay/guides/afterpay-messaging/migration)
---
# On-Site Placement
**Where do I place the Cash App Afterpay messaging on my site?**
***
We recommend that you add Cash App Afterpay Messaging to your product, cart, and payment pages.
Product and cart page visibility ensures customers are aware of Cash App Afterpay before they reach the checkout page.
The easiest way to present Cash App Afterpay as a payment option to your customers is to use the Cash App Afterpay On-Site Messaging.
Above - Product page messaging.
Above - Cart page messaging.
---
# Implementation
## Messaging installation
On-Site Messaging adds pay-over-time messaging to your store's website. For example, in the picture below the messaging is:
*4 payments of \$25.00 with Cash App Afterpay*
*Learn more*
Updates to the messaging are automatic, and a specific set of messaging logic is designed for your products (Pay in 4, Pay Monthly, etc). Use our On-Site Messaging Editor in the Business Hub to customize, preview, and manage your messaging.
## Requirements
To use this On-site Messaging feature you must:
* Be an existing Cash App Afterpay merchant
* Have a direct integration with Cash App Afterpay
* Have at least one retail website live and ready for use; a Sandbox environment is also available for testing
If you already have Cash App Afterpay Messaging through the JavaScript library, we recommend you replace these with On-Site Messaging instead. See the
[Migration page](/cash-app-afterpay/guides/afterpay-messaging/migration)
for details.
## Business hub environments
On-site Messaging configurations are environment-specific and tied to your production and sandbox merchant accounts. See our page on [Business Hub Access](/cash-app-afterpay/guides/welcome/business-hub) or speak to your dedicated account manager if you need assistance getting user access to the Business Hub links below.
| Environment | Link |
| ----------- | ------------------------------------------------------------------------------------------------------------ |
| Sandbox | [https://hub.us-sandbox.afterpay.com/onsite-messaging](https://hub.us-sandbox.afterpay.com/onsite-messaging) |
| Production | [https://hub.us.afterpay.com/onsite-messaging](https://hub.us.afterpay.com/onsite-messaging) |
## Sandbox testing
We recommend that you start by configuring On-Site Messaging in the [Sandbox Business Hub](https://hub.us-sandbox.afterpay.com) to review the Cash App Afterpay messaging on your development store before you go live in production.
To test, you need access to the Sandbox Business Hub.
Before deploying to production, ensure that:
* Messaging appears correctly on all product pages
* Messaging updates when price changes
* Messaging appears correctly on cart page
* Multiple products in cart show correct total installment amount
* Ineligible products/carts correctly hide messaging
* Messaging is responsive on mobile devices
* All required attributes are properly populated
When you are satisfied with your testing, you're ready to go to the production [Business Hub](https://hub.us.afterpay.com) to configure your messaging. From this portal, you can configure Cash App Afterpay messaging for the live site.
## On-Site Messaging quickstart guide
### Configure On-Site Messaging
Start by accessing either environment's Business Hub:
* [Sandbox](https://hub.us-sandbox.afterpay.com) — we recommend that you start here
* [Production](https://hub.us.afterpay.com)
1. Once logged in, navigate to the On-Site Messaging tab in the sidebar
2. From the On-Site Messaging tab, go to the Placements sub-page
3. Select the Product or Cart page to customize your messaging from the options available. You can make adjustments to the logo, text size, and theme by placement.
4. Navigate to the Settings sub-page to find additional advanced configuration options.
5. Once your configuration settings are ready, click the Implementation Guide sub-page and follow the instructions there to add the messaging to your associated environment storefront in three steps.
Here's an example from the production On-Site Messaging tab:
### Add On-Site Messaging to your storefront
To display installment messaging on your storefront, add the respective `` tag from the Implementation Guide to the product page and cart page files in your codebase. Place the messaging immediately below the price element of the product and the total element of the cart.
Example square placement on product page:
```javascript
```
Make sure to correctly configure the following dynamic properties for each `` tag added on your site:
1. Set the `data-amount` with the amount that appears on the page to calculate the installments. Keep the `data-mpid` and `data-placement-id` attributes in place with their current values unchanged.
2. Set the `data-currency` to the customer's currency and `data-consumer-locale` to the customer's country.
3. Set `data-item-skus` to any unique product identifier you use, provided as a string. If you have multiple products in the cart, separate them with a comma.
4. Set `data-item-categories` as one or more category names for the relevant product. This is provided as a string or for multiple categories, separate them with a comma.
5. To restrict a product from sale with Cash App Afterpay, set the `data-is-eligible` attribute to false. To restrict a cart from sale with Cash App Afterpay, set the `data-cart-is-eligible` attribute to false. This is optional.
---
# Migration
We support two messaging products:
* On-Site Messaging is our latest messaging product
* JavaScript Library V1 is our legacy messaging product
We recommend that you update to the On-Site Messaging product. Follow this guide to learn how.
## Migrate from the JavaScript Library V1 to On-Site Messaging
You have two migration choices:
* Self-migration: Your IT team does the migration
* Assisted migration: Afterpay helps you do some parts of the migration
## Self-migration
Depending on how customized your implementation is, follow one of these two paths.
### Light customizations
If you've made minor customizations to the Afterpay JavaScript attributes, do the following:
1. Find the `` element you currently have. Copy it and paste it somewhere you can refer back to. This gives you a list of configuration changes you've made.
For example, in:
``
The configuration changes could include:
* `data-show-upper-limit="false"`
* `data-size="xs"`
* `data-logo-type="lockup"`
* `data-lockup-theme="black"`
2. Delete the old script: ``
3. Find and remove all instances of the elements below from the code:
* `afterpay-placement`
* `Afterpay.createPlacements`
* `new Afterpay.AfterpayPlacement()`
* `Afterpay.launchModal`
* `afterpay-price-table`
4. Follow the instructions to [add On-Site Messaging to your website](/cash-app-afterpay/guides/afterpay-messaging/implementation#add-on-site-messaging-to-your-storefront).
5. Make attribute changes if needed. Click **Save all changes**.
### Major customizations
If you've made larger customizations to the custom Cascading Style Sheet (CSS) and the JavaScript, do the following:
1. Log in to the Business Hub to install On-Site Messaging.
2. Follow the steps in the [Implementation guide](/cash-app-afterpay/guides/afterpay-messaging/implementation).
3. Go to the Implementation Guide page and find the `` and `` for each placement (both Product and Cart).
4. Go to your codebase, add your MPID to each placement as a `data-mpid` attribute.
5. Add your placement IDs to each placement as `data-placement-id` attributes.
6. Return to the messaging tool and make attribute changes if needed. Click **Save all changes**.
### Migrate from the dynamic widget to On-Site Messaging
The widget isn't actively supported by Afterpay; we strongly recommend migrating to On-Site Messaging. If you already have an agreement to use the widget, you can wait until this agreement expires.
To remove the widget:
1. Find the previous code and note the inline customisations that have been made.
2. Remove script from head section:
``
3. Remove the previous code:
``
4. Follow the On-Site Messaging implementation instructions.
---
# Older Messaging Information
## New Merchants
We recommend that all new merchants use our current [On-Site Messaging](/cash-app-afterpay/guides/afterpay-messaging/getting-started) product.
## Existing Cash App Afterpay Merchants
We currently support two messaging products.
[On-Site Messaging](/cash-app-afterpay/guides/afterpay-messaging/getting-started) is our current messaging product, and our previous product is messaging from the [JavaScript Library](/cash-app-afterpay/guides/afterpay-messaging/older-messaging-information-and-links).
If you want to migrate from the JavaScript Library messaging to the current On-Site messaging product, see the information on the [Upgrade to On-Site Messaging](/cash-app-afterpay/guides/afterpay-messaging/migration) page.
### Transition from Afterpay to Cash App Afterpay
**On-Site Messaging**
If you use On-Site Messaging, it will be updated automatically.
**JavaScript Library**
If you use the JavaScript library for your messaging, it will be updated automatically.
## JavaScript Library Messaging
You can find links to our previous messaging products and features, including the JavaScript library here.
The products and features listed here are only partially supported. All Cash App Afterpay merchants with a direct integration should use On-Site Messaging for on-site messaging. See
[Getting Started with On-Site Messaging](/cash-app-afterpay/guides/afterpay-messaging/getting-started)
and
[Upgrade to On-Site Messaging](/cash-app-afterpay/guides/afterpay-messaging/migration)
for more details.
## Links
### JavaScript Library
* [JavaScript Library introduction](JavaScript-Library.mdx)
* [Style Messaging](Style-Messaging.mdx)
* [Advanced Usage](Advanced-Usage.mdx)
* [Pay Monthly Enhanced Javascript Library Features](Pay-Monthly-enhanced-JavaScript-library-features.mdx)
* [Afterpay.js Reference](Afterpay-js-Reference.mdx)
---
# Launch Cash App Afterpay Info Modal Anywhere
This page is a short guide on how to use JavaScript to enable any element to open the Cash App Afterpay information modal.
For the customer, it should be a single click operation; click on any element and the Cash App Afterpay information modal opens.
## Instructions
Do the following:
1. Open your existing messaging script with an HTML editor.
2. Load `square-marketplace.js` script in the HTML, see the example below:
```html
```
3. Add `data-afterpay-modal` attribute to any element. When a customer clicks that element, it now opens the Cash App Afterpay information modal. Here's an example code snippet that opens when a customer clicks the icon symbol:
```html
Or 4 interest-free payments with
[Cash App Afterpay Logo] ⓘ
```
### Regional Modal Themes
| Region | Accepted Values |
| ------------- | ------------------------------ |
| United States | "en\_US", "en\_US-theme-white" |
For example:
`[Cash App Afterpay Logo] ⓘ`
Results in a modal suitable for US merchants.
---
# API Quickstart
## Prerequisites
Before you get started, make sure that you have:
* Signed up for a merchant account at get.afterpay.com
* Received sandbox credentials from Cash App Afterpay
Cash App Afterpay is available to merchants with businesses in the United States. For businesses in Canada, Australia, and New Zealand, see [Afterpay](https://developers.afterpay.com/docs/api/welcome/getting-started). For UK businesses, see [Clearpay](https://developers.clearpay.co.uk/clearpay-online/docs/getting-started-with-clearpay-online).
## Basic API calls
### Get Configuration (/v2/configuration)
The [Get Configuration](/cash-app-afterpay/api-reference/reference/configuration/get-configuration) endpoint retrieves your Afterpay order limits. We recommend regularly calling this endpoint as part of a scheduled background process and storing the `minimumAmount` and `maximumAmount` values on your server.
### Create Checkout (/v2/checkouts)
The [Create Checkout](/cash-app-afterpay/api-reference/reference/checkouts/create-checkout-1) endpoint creates a new checkout and returns an order token. When you call the Create Checkout endpoint, you give Cash App Afterpay order details, customer information, and the URL to direct customers to after checkout. Cash App Afterpay responds with a token used to identify the checkout. Use this token to direct the customer to the Cash App Afterpay checkout flow.
### Capture Full Payment (/v2/payments/capture)
To capture the full order value immediately, call the [Capture Full Payment](/cash-app-afterpay/api-reference/reference/payments/capture-full-payment) endpoint. Calling this endpoint completes payment approval, starts the customer's payment plan, and settles the full order to your bank account. When you call this endpoint, you provide the order token and receive a payment object.
### Authorize Payment (/v2/payments/auth)
This is the first endpoint to call when you use the deferred payment flow. To authorize the full payment amount up front and collect funds later, start by calling the [Authorize Payment](/cash-app-afterpay/api-reference/reference/payments/auth) endpoint. Calling this endpoint completes payment approval for a certain amount. When you call this endpoint, you provide the order token and receive a payment object.
### Capture Authorized Payment (/v2/payments/\{orderId}/capture)
This is the second endpoint to call when you use the deferred payment flow. After the payment is authorized, call the [Capture Payment](/cash-app-afterpay/api-reference/reference/payments/capture-payment) endpoint to capture a full or partial payment. When you call this endpoint, you provide a unique request ID and the amount you want to capture (up to the authorized amount) and you receive an updated payment object.
### Create Refund (/v2/payments/\{orderId}/refund)
Call the [Create Refund](/cash-app-afterpay/api-reference/reference/payments/create-refund) endpoint to issue a full or partial refund. When you call this endpoint, you provide a unique request ID and the amount you want to refund (up to the captured amount) and you receive a refund object.
## Post-requisites
While you set up and test your integration, you can view all sandbox orders in the [Business Hub](/cash-app-afterpay/guides/welcome/business-hub).
After you set up your API integration, contact Cash App Afterpay to complete certification testing and receive your live credentials. Once you're given live credentials, you can launch Cash App Afterpay on your website.
---
# Create a checkout
There are three steps to create a Cash App Afterpay checkout:
1. Call [Get Configuration](/cash-app-afterpay/api-reference/reference/configuration/get-configuration) to retrieve your order limits
2. Call [Create Checkout](/cash-app-afterpay/api-reference/reference/checkouts/create-checkout-1) to generate a checkout token
3. Launch the Cash App Afterpay checkout flow using a redirect or a popup window
| **Action** | **Endpoint** | **Purpose** |
| ----------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- |
| [Get Configuration](/cash-app-afterpay/api-reference/reference/configuration/get-configuration) | `/v2/platform/configuration` | Retrieve Afterpay order limits (min/max values). |
| [Create Checkout](/cash-app-afterpay/api-reference/reference/checkouts/create-checkout-1) | `/v2/checkouts` | Provide order details and generate a checkout token. |
## Retrieve your order limits
Call the [Get Configuration](/cash-app-afterpay/api-reference/reference/configuration/get-configuration) endpoint to retrieve your minimum and maximum Cash App Afterpay order amounts.
We recommend calling this endpoint once a day as part of a scheduled background process, and storing the `minimumAmount` and `maximumAmount` values on your server.
Use these values to determine:
1. The correct [Cash App Afterpay Messaging](/cash-app-afterpay/guides/afterpay-messaging/getting-started) to show on the Product Detail pages
2. Whether Cash App Afterpay should be presented as an available payment method
A request to create a checkout will be declined if the order grand total is less than the minimum or more than the maximum Cash App Afterpay amount. To change your minimum and maximum order values, contact Cash App Afterpay.
## Create a checkout
Call the [Create Checkout](/cash-app-afterpay/api-reference/reference/checkouts/create-checkout-1) endpoint to communicate the order details to Cash App Afterpay. Your request should include:
1. Customer information
2. Order details
3. Order total
4. Shipping details
5. Redirect URLs
Cash App Afterpay uses the order total value to calculate the installment plan and to assist with the customer's pre-approval process.
Cash App Afterpay responds with a token used to identify this checkout.
For example, `002.5lmerr3k945d00c7htvcrdff83q36kp10a247m212fjpa5ju`. This token is used to launch the Cash App Afterpay checkout flow using Afterpay.js.
#### Afterpay.js
| **Environment** | **URL** |
| --------------- | ------------------------------------------------- |
| Sandbox | `https://portal.sandbox.afterpay.com/afterpay.js` |
| Production | `https://portal.afterpay.com/afterpay.js` |
## Set up your checkout experience
As part of your integration, decide how customers will complete the Cash App Afterpay checkout flow. There are two options:
* **Redirect method:** Customers are redirected from your website to Cash App Afterpay to complete their payment. At the end of the Cash App Afterpay checkout flow, the customer is redirected back to your website. Most merchants use this method.
* **Popup method:** The Cash App Afterpay checkout flow opens in a popup window on top of your site. For windowed applications, your website is dimmed with a semi-transparent overlay. For full-screen applications (such as mobile interfaces), the flow opens in a new tab. At the end of the Cash App Afterpay checkout flow, the popup closes.
### Implement the redirect method
To use the redirect method, call the following two JavaScript functions, in order:
1. `AfterPay.initialize`: Prepares the Afterpay JavaScript to start the Cash App Afterpay screenflow in the appropriate geographical region.
* Accepts an object with a required `countryCode` (the two-character ISO 3166-1 country code of the merchant account)
2. `AfterPay.redirect`: Redirects the customer's browser from your website to Cash App Afterpay.
* Accepts an object with a required `token` (the checkout token returned by the Create Checkout API call)
```js
Your HTML here
```
If the customer successfully completes the checkout flow, they’re returned to your `redirectConfirmUrl` with a checkout token and a `SUCCESS` status appended as HTTP query parameters: `www.merchant-example.com/confirm?&status=SUCCESS&orderToken=002.5lmerr3k945d00c7htvcrdff83q36kp10a247m212fjpa5ju`
If the customer cancels the checkout, they’re returned to your `redirectCancelUrl` with a checkout token and a `CANCELLED` status appended as HTTP query parameters: `www.merchant-example.com/confirm?&status=CANCELLED&orderToken=002.5lmerr3k945d00c7htvcrdff83q36kp10a247m212fjpa5ju`
Try using your Sandbox merchant credentials to get a token from [Create Checkout](/cash-app-afterpay/api-reference/reference/checkouts/create-checkout-1). Use this token to test the Cash App Afterpay screenflow on JSFiddle: [https://jsfiddle.net/afterpay/cyd3pxfj/](https://jsfiddle.net/afterpay/cyd3pxfj/)
Note that the login and redirect features won't work, because JSFiddle loads the Cash App Afterpay screenflow inside a frameset.
### Implement the popup method
To use the popup method, call the following JavaScript functions, in order:
1. `AfterPay.initialize`: Prepares the Afterpay JavaScript to start the Cash App Afterpay screenflow in the appropriate geographical region.
2. `AfterPay.open`: Opens the Cash App Afterpay popup window, launching the checkout flow for the customer.
3. `AfterPay.onComplete`: Defines a callback function. It checks whether the customer successfully completes the checkout flow and handles successful payments and cancellations.
4. `AfterPay.transfer`: Sends the checkout token to Cash App Afterpay, finalizing the payment process.
When a customer’s payment is complete, Cash App Afterpay uses `postMessage` to call a JavaScript method on your front end system.
The popup method doesn't redirect customers to the `redirectConfirmUrl` or `redirectCancelUrl`, but these fields are still required for the Create Checkout call. These fields are used for context on `postMessage`.
```js
```
If the customer successfully completes the checkout flow, Cash App Afterpay calls the `onComplete` method on your website. Cash App Afterpay passes the checkout token and a `SUCCESS` status as properties of a data object. The popup closes.
If the customer cancels the checkout, Cash App Afterpay calls the `onComplete` method on your website. Cash App Afterpay passes the checkout token and a `CANCELLED` status as properties of a data object. The popup closes.
At the end of the checkout flow, if the protocol, host, and port of the opening window don't match those provided in Create Checkout, the customer's browser won't dispatch the JavaScript event for security reasons.
**Cash App Afterpay checkout screen**
---
# Immediate capture
Immediate capture provides a simplified and efficient payment process. It’s ideal for merchants who want to finalize and settle payments immediately upon order confirmation, or who want to minimize complexity. It combines the following actions into a single API call:
* Completing payment approval.
* Starting the customer’s payment plan.
* Settling the full order value into the merchant's bank account.
| **Action** | **Endpoint** | **Purpose** |
| ------------------------------------------------------------------------------------------------ | ---------------------- | -------------------------------------------- |
| [Capture Full Payment](/cash-app-afterpay/api-reference/reference/payments/capture-full-payment) | `/v2/payments/capture` | Capture order payment and confirm the order. |
## Implement immediate capture
1. [Create a checkout](/cash-app-afterpay/guides/api-development/api-quickstart/create-a-checkout). If the customer confirms their order with Cash App Afterpay, they're returned to your website with an order token and the `SUCCESS` status.
2. Use the order token to call the [Capture Full Payment](/cash-app-afterpay/api-reference/reference/payments/capture-full-payment) endpoint. Once the capture completes, you'll receive a Payment object with a status of `APPROVED` or `DECLINED`.
* If Cash App Afterpay approves the payment, present the customer with an order confirmation page. The full payment is captured.
* If Cash App Afterpay declines the payment (for example, if the customer’s credit card details are incorrect), present the customer with suggested corrections or alternative payment methods at checkout.
### Considerations
* Immediate capture is supported by all platforms.
* You must call the Capture Full Payment endpoint within 180 minutes of receiving the token from the Create Checkout call.
* The Capture Full Payment call is idempotent. It’s safe to retry requests within 24 hours using the same unique requestId.
* Express checkout requires additional data. See [Express Checkout Integration](/cash-app-afterpay/guides/api-development/additional-features/express-checkout) to learn more.
---
# Auth and capture
Deferred capture lets you authorize the full payment amount up front and collect the funds later. The transaction is approved and the customer's payment plan is started. Then, you can capture full or partial payments. If a portion of the order can’t be fulfilled, you can void uncaptured amounts.
This flow is recommended for merchants who ship orders in multiple parts or who charge the full order amount upon delivery.
| **Action** | **Endpoint** | **Purpose** |
| -------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------- |
| [Authorize Payment](/cash-app-afterpay/api-reference/reference/payments/auth) | `/v2/payments/auth` | Authorize a payment amount for an Afterpay order. |
| [Capture Payment](/cash-app-afterpay/api-reference/reference/payments/capture-payment) | `/v2/payments/{orderId}/capture` | Capture full or partial order payments against a payment authorization. |
| [Void](/cash-app-afterpay/api-reference/reference/payments/void-payment) | `/v2/payments/{orderId}/void` | Void a full or partial order value and refund the customer. |
## Implement deferred capture
### Launch checkout and authorize payment
1. [Create a checkout](/cash-app-afterpay/guides/api-development/api-quickstart/create-a-checkout). If the customer confirms their order with Cash App Afterpay, they're returned to your website with an order token and the `SUCCESS` status.
2. Use the order token to call the [Authorize Payment](/cash-app-afterpay/api-reference/reference/payments/auth) endpoint. Once the authorization completes, you'll receive a Payment object with a status of `APPROVED` or `DECLINED`.
* If Cash App Afterpay authorizes the payment, store the payment `id` and the `expires` value of the `AUTH_APPROVED` payment event. Present the customer with an order confirmation page.
* If Cash App Afterpay declines the payment (for example, if the customer’s credit card details are incorrect), present the customer with suggested corrections or alternative payment methods at checkout.
### Capture payment
If an order is given `APPROVED` status during the authorization flow, you can now capture the payment. This happens after the customer has seen their order confirmation page and may have left your website.
You must capture payment for authorized orders within 13 days. After 13 days, the authorization expires and is automatically voided. At this point, you aren’t able to capture any order value (partial or full). You can’t reopen or update voided transactions; you must call the Checkouts endpoint to create a new order.
#### If you can completely fulfill the order:
Once you determine that the entire order will be fulfilled, call the [Capture Payment](/cash-app-afterpay/api-reference/reference/payments/capture-payment) endpoint with the entire amount.
The capture amount will match both the `originalAmount` and `openToCaptureAmount` for the Payment object, as it was returned in the Auth response.
#### If you can partially fulfill the order:
Once you determine that only part of the order will be fulfilled (for example, if some items are permanently out of stock):
1. Call the [Capture Payment](/cash-app-afterpay/api-reference/reference/payments/capture-payment) endpoint with the amount for all items that will be fulfilled.
2. Call the [Void](/cash-app-afterpay/api-reference/reference/payments/void-payment) endpoint to finalize the order. Refund the `openToCapture` amount to the customer; this will reduce the `openToCapture` amount to zero.
#### If you fulfill the order incrementally:
1. Once a shipment is dispatched, call the [Capture Payment](/cash-app-afterpay/api-reference/reference/payments/capture-payment) endpoint with the amount of all items in the shipment.
2. If you determine that a shipment can't be dispatched, call the [Void](/cash-app-afterpay/api-reference/reference/payments/void-payment) endpoint with the amount of all applicable items.
You can capture or void payments multiple times. Requests that exceed the `openToCapture` amount will fail. Once the `openToCapture` amount equals zero, any further Capture or Void requests will fail.
#### If you can’t fulfill any part of the order:
Once you determine that you can't fulfill any part of the order, call the [Void](/cash-app-afterpay/api-reference/reference/payments/void-payment) endpoint. This refunds the `openToCapture` amount to the customer, reduces the `openToCapture` amount to zero, and finalizes the order.
We don't recommend waiting for the authorization to automatically expire. Even though an approved authorization will automatically be voided after 13 days, the customer begins their payment plan at the time of authorization approval.
### Considerations
* Deferred capture is supported on the Afterpay v2 API, Salesforce Commerce Cloud, and Adobe Commerce (Magento).
* The minimum capture amount is \$1.00; capture requests below \$1.00 are rejected.
* If an order still has a `paymentState` of `AUTH_APPROVED` or `PARTIALLY_CAPTURED` when the authorization expires, the remaining order amount will automatically be voided.
* The Capture Payment call is idempotent. It’s safe to retry requests using the same unique requestId.
---
# Refunds
| **Action** | **Endpoint** | **Purpose** |
| ---------------------------------------------------------------------------------- | ------------------------------- | ---------------------------------------------- |
| [Create Refund](/cash-app-afterpay/api-reference/reference/payments/create-refund) | `/v2/payments/{orderId}/refund` | Refunds a full or partial amount for an order. |
Perform a full refund or partial refunds (up to the original order total) based on your refund or cancellation policies. The same Order ID can be used for multiple partial refunds.
Refunds can be used for:
* Full or partial order cancellation
* Returns
* Other scenarios where you want to issue funds back to the customer
### Considerations
* Refunds can't be issued after 120 days from the date of purchase. After 120 days, refund requests are rejected and return a 422 error.
* If using deferred capture, only captured funds can be refunded.
* You can also process refunds from the Cash App Afterpay Business Hub.
---
# Test environments
## Sandbox
Cash App Afterpay provides a sandbox environment for development and testing. Your Cash App Afterpay account manager will provide you with sandbox credentials.
Accounts created within a Cash App Afterpay sandbox only exist within the sandbox. When you make a transaction in the sandbox, no money actually moves.
API calls in the sandbox use the base URL `https://global-api-sandbox.afterpay.com`.
### Sandbox Business Hub
Contact your Cash App Afterpay account manager or delivery manager to request access to the sandbox Business Hub. The sandbox Business Hub provides the same functionality as the production Business Hub.
You can log into the sandbox Business Hub at [https://portal.sandbox.afterpay.com/merchant/](https://portal.sandbox.afterpay.com/merchant/)
You can view all sandbox orders and settlement files, but no settlements are made to your bank account.
### Test customer accounts
You can create test customer accounts in the sandbox environment within your test checkout flow. Each customer account requires a unique email address and phone number.
No SMS messages are sent in the sandbox. Use `111111` as the verification code.
### Test credit cards
The sandbox capture response (approved/declined) is determined by the CVV value. Use `000` for approval and `051` for decline.
You can use any dummy Visa or Mastercard number and future expiry date, as long as it passes a mod 10 check and hasn’t already been used by a different sandbox customer account. You can also use these dummy cards:
| Card Type | Card Number | Expiry | CCV | Response |
| ---------- | ------------------- | ------ | --- | -------- |
| Visa | 4111 1111 1111 1111 | 01/28 | 000 | Approved |
| Visa | 4111 1111 1111 1111 | 01/28 | 051 | Declined |
| Mastercard | 5215 0977 9282 6659 | 01/28 | 000 | Approved |
| Mastercard | 5215 0977 9282 6659 | 01/28 | 051 | Declined |
### Test Pay Monthly
The Sandbox Pay Monthly Approval response (approved/declined) is determined by the Cart Total value.
| Cart Total Value | Response |
| -------------------------- | ------------------------- |
| $100.00 - $399.99 USD | 3, 6, or 12 month offers |
| $400.00 - $3,999.99 USD | 6, 12, or 24 month offers |
| $4,000.00 - $10,000.00 USD | 6, 12, or 24 month offers |
## Postman collection
You can test the Cash App Afterpay API using Postman, a free-to-download tool for making HTTP requests. To start using Postman, create an account on [postman.com](https://www.postman.com/).
To test the Cash App Afterpay API using postman:
1. Go to the [Afterpay Online API V2](https://www.postman.com/afterpay-1-426879/afterpay-online-apis-v2/overview) public workspace.
2. Fork the collection.
3. Choose a label, workspace, and environment for your fork.
4. Regularly pull the latest changes to update your forked collection.
---
# Certification
After you complete your internal QA testing, you're ready for Cash App Afterpay certification. Contact your Cash App Afterpay account manager to schedule certification testing.
All of your unique production environments are tested. The test suite includes three areas:
* Integration standards
* Customer experience
* Refunds
Certification ensures a great customer experience, minimizes the potential for fraudulent activity, and checks for common technical and compliance issues.
**Your Cash App Afterpay production credentials are issued upon successful completion of certification.**
## Deployment
When moving your integration to your production environment, make sure that you're using the production API endpoint and JavaScript URL.
| Environment | API Endpoint | Screenflow (Javascript) |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| Sandbox | [https://api.us-sandbox.afterpay.com/v1](https://api.us-sandbox.afterpay.com/v1) OR [https://api.us-sandbox.afterpay.com/v2](https://api.us-sandbox.afterpay.com/v2) | [https://portal.sandbox.afterpay.com/afterpay.js](https://portal.sandbox.afterpay.com/afterpay.js) |
| Production | [https://api.us.afterpay.com/v1](https://api.us.afterpay.com/v1) OR [https://api.us.afterpay.com/v2](https://api.us.afterpay.com/v2) | [https://portal.afterpay.com/afterpay.js](https://portal.afterpay.com/afterpay.js) |
When you move to a production environment, make sure the User-Agent Header is updated with the production Merchant ID.
---
# Disputes
## Overview
Customers can raise and manage disputes related to non-delivery of goods directly through the Afterpay Customer Portal. Merchants can manage and respond to these disputes via the Disputes API and the Afterpay Business Hub. If a resolution can't be reached, Afterpay can step in to adjudicate.
At this time, Cash App Afterpay supports only
`product_not_received`
as a dispute reason.
## Dispute lifecycle
1. A customer raises a dispute through their Cash App Afterpay dashboard or app and provides evidence to support their case.
2. Cash App Afterpay notifies the merchant using methods including email, the Business Hub, API, and webhooks.
3. The merchant responds to the dispute. They can accept the dispute (which closes the dispute in the customer's favor) or contest the dispute by providing evidence via the API or the Business Hub.
4. If the merchant provides evidence, the dispute is returned to the customer. The customer can either accept the merchant’s decision (which closes the dispute in the merchant's favor) or can reject the merchant’s evidence.
5. If the customer rejects the merchant's evidence, an Afterpay agent steps in. The agent decides the outcome of the dispute based on the available evidence. Both parties are notified of the decision.
### **Merchant Side Dispute Lifecycle Diagram**
## Dispute windows
Cash App Afterpay updates dispute statuses and sends dispute notifications according to the following time frames:
| Window | Description | Time frame |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| Dispute open | The maximum window of time (from the transaction date) for a dispute to be opened. 60 days after the statement date, dispute claims may be denied. | 120 days |
| Merchant’s evidence submission | The allowed time between the merchant being notified of a dispute and the final time for evidence submission. | 13 days |
| Cash App Afterpay’s decision | The allowed time from the moment of evidence submission to Cash App Afterpay’s final decision. | 30 days |
## Dispute statuses
Cash App Afterpay supports the following dispute statuses:
| Status | Description |
| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `needs_response` | Cash App Afterpay has created the dispute and notified the merchant, but the merchant has not taken action. |
| `under_review` | Merchant has submitted evidence to Cash App Afterpay, and it is currently under review. |
| `won` | The evidence submitted is accepted by Cash App Afterpay and the dispute is won by the merchant. Note that this is a terminal state. |
| `lost` | The evidence submitted is rejected by Cash App Afterpay and the dispute is lost by the merchant. Note that this is a terminal state. |
| `merchant_refunded` | Merchant has issued a refund. If the refund is equal to or greater than the dispute amount, then this is a terminal state. |
| `merchant_voided` | Merchant has canceled all or a portion of the order. If the voided amount is equal to or greater than the dispute amount, then this is a terminal state. |
## Closing reasons
A closing reason indicating how the final decision on the dispute was reached is displayed to the merchant. The following closing reasons are accepted:
| Merchant-facing Closing Reason | Description |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- |
| `merchant_accepted` | Merchant accepted the dispute. |
| `evidence_accepted` | Merchant submitted evidence which was accepted. The dispute was closed in the merchant’s favor. |
| `evidence_rejected` | Merchant submitted the evidence but it was rejected and the dispute was closed in the customer’s favor. |
| `deadline_expired` | Merchant failed to submit evidence for the dispute and the submission window timed out. Dispute was closed in the customer's favor. |
| `customer_cancelled` | Customer withdrew the dispute and therefore it was closed in the merchant’s favor. |
All dispute records are saved in the Cash App Afterpay system and are accessible through the Dispute APIs; dispute records are not deleted.
In financial reporting, there will be a separate record for a dispute. Order ID, Dispute ID, financial changes (+/-) are included in the record. Afterpay only gathers funds from the merchant after the merchant loses the dispute.
---
# Integrate with the Disputes API
Merchants can integrate directly with the Disputes API to scale their disputes process and integrate with other order management and customer service tools. This is helpful for merchants who handle a high volume of transactions.
| **Action** | **Endpoint** | **Purpose** |
| -------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------- |
| [Receive dispute](/cash-app-afterpay/api-reference/reference/disputes/receive-dispute) | GET `/v2/disputes/{dispute_id}` | Get detailed information about a dispute. |
| [List disputes](/cash-app-afterpay/api-reference/reference/disputes/retrieve-dispute) | `/v2/disputes` | List disputes based on a set of criteria. |
| [Accept dispute](/cash-app-afterpay/api-reference/reference/disputes/accept-dispute) | `/v2/disputes/{dispute_id}/accept` | Accept a dispute case. |
| [Respond to dispute](/cash-app-afterpay/api-reference/reference/disputes/respond-to-dispute) | POST `/v2/disputes/{dispute_id}` | Submit evidence to respond to a dispute. |
| [Upload file](/cash-app-afterpay/api-reference/reference/disputes/upload-file) | `/v2/disputes/files` | Upload a file for a dispute. |
| [Retrieve file](/cash-app-afterpay/api-reference/reference/disputes/retrieve-file) | `/v2/disputes/files/{id}` | Retrieve a file for a dispute. |
```mermaid
---
config:
sequence:
mirrorActors: true
width: 300
---
%%{
init: {
'theme': 'base',
'themeVariables': {
'primaryColor': '#FFF',
'primaryTextColor': '#000',
'primaryBorderColor': '#000',
'lineColor': '#000',
'secondaryColor': '#fff',
'tertiaryColor': '#fff',
'noteBkgColor': '#fff',
'noteBorderColor': '#000'
}
}
}%%
sequenceDiagram
participant AP as $Afterpay Dispute API
participant M as Merchant
rect rgb(250,250,250)
note over AP: Event: Dispute created
AP -->> M: Webhook Notification
M ->> AP: Fetch Dispute API
AP ->> M: Latest Dispute Object
M ->> M: Create Dispute
end
rect rgb(250,250,250)
note over AP: Event: Dispute updated
AP -->> M: Webhook Notification
M ->> AP: Fetch Dispute API
AP ->> M: Latest Dispute Object
M ->> M: Update Dispute Status
end
rect rgb(250,250,250)
note over AP: Action: Merchant Challenge Dispute
M ->> AP: Upload File Api
AP ->> M: Return file token
M ->> AP: Challenge Dispute API
AP ->> M: Latest Dispute Object
M ->> M: Update Dispute Status
end
rect rgb(250,250,250)
note over AP: Action: Merchant Accept Dispute
M ->> AP: Accept Dispute API
AP ->> M: Latest Dispute Object
M ->> M: Update Dispute Status
end
```
## Dispute notifications
Cash App Afterpay notifies merchants using webhooks when a dispute is created and any time it is updated. Cash App Afterpay expects the ACK (acknowledgement) with a 200 response. If the acknowledgement fails, Cash App Afterpay will reattempt sending the webhook a few times with exponential backoff.
The following table outlines the content for the webhook call:
| Field name | Data type | Description |
| -------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ |
| `webhook_event_id` | String | The `event_id` of the webhook. |
| `webhook_event_type` | String | An enum variable that indicates if the dispute was created or updated. Possible values are `created` and `updated` |
| `dispute_id` | String | Dispute Identifier. |
| `merchant_reference` | String | Merchant identifier. |
A `dispute_id` is passed in the webhook call. Merchants can use the Get Dispute endpoint to get the details for the dispute.
### Notification setup
Merchants must provide a webhook URL and merchant IDs to the Cash App Afterpay merchant service/dispute team to get the HMAC key and enable the notification.
The webhook endpoint should be maintained by merchants or partners, it should allow POST requests with `content-type` = `application/json`.
The payload format is defined in the previous table.
### Notification authentication
* (option 1) Key Exchange Wiki: [Diffie-Hellman Key Exchange via Openssl: Quick Guide](/cash-app-afterpay/guides/api-development/disputes/integrate-with-the-disputes-api#key-exchange)
* (option 2) Securely get HMAC key from [https://squareup.sendsafely.com/](https://squareup.sendsafely.com/)
### HMAC signature
Cash App Afterpay recommends that you use HMAC for the authentication of the webhook notification.
Consider the following structure of the raw HTTP message.
```javascript
POST ${notification_uri} HTTP/1.1
Host: ${notification_base_url}
X-Afterpay-Request-Date: 1664239810
X-Afterpay-Request-Signature: ${signature}
Content-Type: application/json
{
"webhook_event_id": "b4df2187-4090-4845-be15-a73546107cbe",
"webhook_event_type": "created",
"dispute_id": "dp_KvGaECApCMdsH8earUSa2V",
"merchant_reference": "08CF65ZSFNHVM"
}
```
There will be two extra fields for authentication.
* `X-Afterpay-Request-Date` records the send time for the webhook request. We recommned aborting the stale notification after a fixed time (if you receive the webhook and current timestamp - `${X-Afterpay-Request-Date}` is greater than 5 minutes).
* `X-Afterpay-Request-Signature` records the signature of the HMAC key. Typically we generate the signature using the following steps:
```javascript
PAYLOAD={"webhook_event_id": "b4df2187-4090-4845-be15-a73546107cbe", "webhook_event_type": "created", "dispute_id": "dp_KvGaECApCMdsH8earUSa2V", "merchant_reference": "08CF65ZSFNHVM"}
URL= "${partner_notification_uri}"
SECRET=
TIME=1664239810
MESSAGE="$URL\n$TIME\n$PAYLOAD"
X-Afterpay-Request-Signature=$(printf "${MESSAGE}" | openssl dgst -hmac ${SECRET} -sha256 -binary | base64)
```
When a merchant or merchant agency receives a webhook notification, we recommend generating verification signatures in following steps.
If `HMAC == X-Afterpay-Request-Signature`, then continue to process the notification, or the merchant should abort the request.
```javascript
PAYLOAD={"webhook_event_id": "b4df2187-4090-4845-be15-a73546107cbe", "webhook_event_type": "created", "dispute_id": "dp_KvGaECApCMdsH8earUSa2V", "merchant_reference": "08CF65ZSFNHVM"}
URL= "${Notification_uri}"
SECRET=
TIME=${X-Afterpay-Request-Date}
MESSAGE="$URL\n$TIME\n$PAYLOAD"
HMAC=$(printf "${MESSAGE}" | openssl dgst -hmac ${SECRET} -sha256 -binary | base64)
```
## Series of events
| Trigger | API event | Outcome |
| ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| The customer creates a dispute in the app | Webhook notifies the merchant (incl. webhook\_event\_type = created and a dispute\_id) | The dispute is created and the merchant is notified. The dispute status is updated to `needs_response`. |
| The merchant retrieves the dispute information | The Get Dispute endpoint is called to fetch status of the dispute (based on Dispute ID), and returns the updated Dispute object. If images or attachments were supplied; these are retrieved with the Retrieve File api endpoint. | The merchant can challenge or accept the dispute. |
| The merchant challenges the dispute | The merchant collates their response collateral internally. If there are files to upload, the Upload File endpoint is called for the relevant files. The Respond to Dispute endpoint is called which references the file IDs for those files. | The merchant has submitted evidence to challenge the dispute. The dispute status is updated to `under_review`. |
| The merchant accepts the dispute | The Accept Dispute endpoint is called, returns the Dispute object to the merchant. | The dispute status is updated to `lost` and the dispute is closed. The closing reason is set to `merchant_accepted`. |
| The customer accepts the merchant’s evidence | If webhook is enabled, this will come through as a notification | The dispute status is updated to ‘won’ and the dispute is closed. The closing reason is set to `evidence_accepted`. |
| The customer rejects the merchant’s evidence | | The dispute is sent to Afterpay for adjudication |
| Afterpay adjudicates in the merchant’s favor | If webhook is enabled, this will come through as a notification | The dispute status is updated to ‘won’ and the dispute is closed. The closing reason is set to `evidence_accepted`. |
| Afterpay adjudicates in the customer’s favor | If webhook is enabled, this will come through as a notification | The dispute status is updated to `lost` and the dispute is closed. The closing reason is set to `evidence_rejected`. |
| The customer cancels the dispute | If webhook is enabled, this will come through as a notification | The dispute status is updated to `won` and the dispute is closed. The closing reason is set to `customer_cancelled`. |
| The customer updates the dispute. | Webhook notifies merchant (incl. webhook\_event\_type = updated and a dispute\_id) Get Dispute endpoint is called to fetch status of the dispute (based on Dispute ID), returns the updated Dispute object. | The dispute status is updated. The dispute status is updated to `needs_response`. |
---
# Manage disputes in the Business Hub
Merchants can manage disputes via the Cash App Afterpay Business Hub, which provides centralized tools for dispute handling and reconciliation. In the Business Hub, merchants can:
* View and filter open disputes
* Accept and challenge disputes
* Submit supporting documentation without contacting Cash App Afterpay customer service
* Export settlement, disputes, and reconciliation reports
* Customize email notification settings for disputes
This allows merchants to save time managing disputes, improve internal coordination and transparency, and reduce unnecessary conversations with Cash App Afterpay.
Customers can open, manage, and track disputes directly from the Cash App Afterpay customer portal. They can accept and reject a merchant’s response, and cancel a dispute if they receive their order.
## Merchant experience
1. Merchant receives an email notification that a new dispute has been opened.
2. Merchant can view the new dispute, and all other open disputes, in the Cash App Afterpay Business Hub.
3. Clicking on “Review Detail” next to each dispute displays more information about the dispute.
4. Merchant can accept the dispute, challenge it, or notify Cash App Afterpay that a refund has already been issued.
5. When a merchant challenges a dispute, they add supporting documentation, which is included in the response back to the customer.
6. If a merchant accepts, or does not respond within 13 days, to a dispute, Cash App Afterpay refunds the customer and initiates a reversal with the merchant.
7. If there is no resolution between the customer and merchant, Cash App Afterpay adjudicates the dispute and rule in either party’s favor based on the available evidence.
8. Merchant receives confirmation of dispute outcome in the Business Hub.
## Customer experience
1. A customer selects the relevant order in the customer portal and clicks “Goods Not Received.” Customers may only raise a dispute 7 days after the payment is captured. After 120 days, they can no longer raise a dispute.
2. The customer is prompted to contact the merchant directly before submitting a dispute through Cash App Afterpay.
3. The customer submits information about the dispute, confirms the dispute amount, and is invited to submit evidence along with the dispute ticket.
4. A pop-up, as well as an email notification, is sent to confirm receipt of the dispute.
5. The dispute is sent to the merchant, and customers can monitor progress through the Cash App Afterpay Customer Portal.
6. Once the merchant has replied, customers can accept or reject the merchant’s decision, or cancel the dispute if their order arrives.
## Cash App Afterpay's role
If a dispute decision is rejected by the customer, Cash App Afterpay can:
* Adjudicate disputes that remain unresolved between merchants and customers
* Debit settlement funds from unresponsive and at-fault merchants to refund customers for non-delivery of goods
---
# Webhook Signature Generation
A webhook signature is a cryptographic hash used to verify the authenticity and integrity of webhook requests. It ensures that the request comes from a trusted source and has not been tampered with.
Cash App Afterpay uses webhooks to [notify merchants and partners about disputes](/cash-app-afterpay/guides/api-development/disputes/integrate-with-the-disputes-api).
Webhooks need a signature for security and verification purposes. Webhook signatures help:
* Prevent spoofing – They ensure only trusted sources can send webhooks
* Detect tampering – If the payload is altered, the signature will not match
* Add security – The signature works as an additional layer of protection alongside HTTPS.
## Pre-work
Before you can receive and act on webhooks, you need to do the following:
1. Set up a webhook endpoint and an associated URL. The endpoint must allow POST requests with content-type = application/json.
2. Contact Afterpay merchant support and give them the following information:
* The URL you set up for webhook notification in step 1
* Your unique partner ID
After we receive this information, we share an HMAC (Hash Message Authentication Code) value with you and enable our systems for notification.
Don't confuse the HMAC shared secret key with the HMAC value that is generated using the HMAC shared secret key.
## Verify the webhook event payload
To verify a webhook event payload with the HMAC value, follow these steps:
1. **Retrieve the webhook event signature:**
* Retrieve the event signature from the `X-Afterpay-Request-Signature` header provided in the webhook.
2. **Construct raw signature in canonical form:**
* `url`: The destination URL for the webhook
* `time`: The `X-Afterpay-Request-Date` header value, represented as a UNIX timestamp
* `payload`: The raw JSON body of the webhook
* Concatenate raw signature with format: `${url}\n${time}\n${payload}`
3. **Generate HMAC-SHA-256 value:**
* Create HMAC value using the raw signature and the API secret corresponding to API key utilities to create the webhook
* Use a constant-time cryptographic library to generate the signature to prevent timing attacks
4. **Compare the generated signature with the received signature:**
* Compare the computed signature against the `X-Afterpay-Request-Signature` header value
* If both signatures match, then the request is verified as legitimate
* If they don't match, reject the request
### Code sample:
```js
const express = require('express');
const crypto = require('crypto');
const app = express();
app.use(express.json({ verify: (req, res, buf) => { req.rawBody = buf; } }));
// Secret provided by Afterpay team.
const SECRET = "WEBHOOK_URL_SECRET"
function verifyWebhookSignature(req) {
// Step 1: Retrieve the webhook event signature
const receivedSignature = req.headers['x-afterpay-request-signature'];
// Step 2: Construct the message
const url = req.headers['host'];
const time = req.headers['x-afterpay-request-date'];
const payload = req.rawBody;
const message = `${url}\n${time}\n${payload}`
// Step 3: Create HMAC SHA-256 value.
const expectedSignature = crypto.createHmac('sha256', SECRET)
.update(message)
.digest('base64');
// Step 4: Assert recieved signature with expected signature.
const receivedBuffer = Buffer.from(receivedSignature, 'hex');
const expectedBuffer = Buffer.from(expectedSignature, 'hex');
return crypto.timingSafeEqual(receivedBuffer, expectedBuffer);
}
app.post('/afterpay', (req, res) => {
console.log("Message received:", req.body);
if (!verifyWebhookSignature(req)) {
return res.status(403).send("Invalid signature");
}
console.log("✅ Webhook verified:", req.body);
res.status(200).send("Webhook received");
});
app.listen(80, () => {
console.log('Webhook server listening on port 80');
});
```
## Manual signature verification
You can verify the webhook signature manually using the command line. This can be helpful for debugging or verifying payloads without using a backend server.
```bash
PAYLOAD='{"webhook_event_id": "b4df2187-4090-4845-be15-a73546107cbe", "webhook_event_type": "created", "dispute_id": "dp_KvGaECApCMdsH8earUSa2V", "merchant_reference": "08CF65ZSFNHVM"}'
URL="${notification_uri}" # replace with your webhook endpoint URL
SECRET= # replace with the HMAC secret key shared by Afterpay
TIME=1741100821 # UNIX timestamp from X-Afterpay-Request-Date header
MESSAGE="$URL\n$TIME\n$PAYLOAD"
HMAC=$(printf "${MESSAGE}" | openssl dgst -hmac "${SECRET}" -sha256 -binary | base64)
```
The resulting `HMAC` value is the signature you should compare against the value in the `X-Afterpay-Request-Signature` header.
**Sample request:**
```http
POST ${notification_uri} HTTP/1.1
Host: ${notification_base_url}
X-Afterpay-Request-Date: 1664239810
X-Afterpay-Request-Signature: ${HMAC}
Content-Type: application/json
{
"webhook_event_id": "b4df2187-4090-4845-be15-a73546107cbe",
"webhook_event_type": "created",
"dispute_id": "dp_KvGaECApCMdsH8earUSa2V",
"merchant_reference": "08CF65ZSFNHVM"
}
```
---
# Introduction to express checkout
Cash App Afterpay express checkout reduces the overall checkout steps on desktop and mobile so that your shoppers can complete their orders quickly.
Customers can check out directly from the shopping cart or product page, using their pre-filled Cash App Afterpay account information (name, shipping address, phone number, email) to complete their orders on your website.
Simply put, there are fewer checkout steps, leading to higher conversion.
## Express checkout vs standard checkout
### Standard checkout flow
With standard checkout, the customer proceeds through the checkout process as normal, selecting Cash App Afterpay as a payment option in your payments section.
### Express checkout flow
With express checkout, the customer can choose to ‘buy now with Cash App Afterpay’ on a product page, or shop for multiple items and choose to ‘checkout with Cash App Afterpay’ from the cart.
There are two ways to implement express checkout:
#### Integrated shipping
Customers select delivery options inside the Cash App Afterpay checkout flow. The order is completed within Cash App Afterpay checkout.
#### Deferred shipping
The customer returns to your website's checkout to select delivery options and complete their order.
### Which one is right for you?
| Integrated Shipping | Deferred Shipping | |
| ------------------------------------------------------------- | --------------------------------------------------------------- | - |
| Less than 5 shipping options | 5 or more shipping options | |
| Simple shipping options (e.g. single option for whole order) | Complex shipping options (e.g. individual options at SKU level) | |
| Simple tiered shipping options (e.g. standard, express, rush) | Customized shipping options (e.g., timeslot booking) | |
| Click and collect pickup selection before checkout entry | Third party click and collect pickup | |
---
# Set up express checkout with integrated shipping
Express checkout uses the same APIs as standard checkout. Integrated shipping enhances the experience by embedding your shipping options directly into Afterpay express checkout, streamlining the process. When paired with the Buy Now flag, it creates a one-step checkout.
To set it up:
1. Generate a Cash App Afterpay [order token](#generate-an-afterpay-order-token) to start the express checkout process
2. Create an express checkout [button](#create-an-express-checkout-button) to load the checkout window
3. Create the [checkout](#create-checkout) using Afterpay.js
4. Capture [payment](#capture-payment) to finalize the order
When using integrated shipping, you must launch the checkout in a popup. The redirect method isn't supported.
## Generate an Afterpay order token
Before launching Cash App Afterpay express checkout, create an order token by calling the [Create Checkout](/cash-app-afterpay/api-reference/reference/checkouts/create-checkout-1) endpoint. This lets you specify the order amount, items, and other details.
The backend call is triggered when the express checkout button is clicked. A new token is required for each order. If you store the token in a database, be sure to support arbitrary string length and content, as a token’s format can change.
For express checkout orders, there are two key differences from standard checkout:
* Set `mode` to `express`
* Use a single `popupOriginUrl` instead of `redirectConfirmUrl` and `redirectCancelUrl`
```curl
curl --request POST \
--url https://api-sandbox.Afterpay.com/v2/checkouts \
--header 'accept: application/json' \
--header 'content-type: application/json' \
--data '{"amount":{"amount":"10.00", “currency”: “AUD”}, “mode”: “express”, "merchant": {"popupOriginUrl": "https://example.com"}}'
```
## Create an express checkout button
When a customer clicks this button on a cart or product page, it launches Cash App Afterpay checkout in a popup.
1. Add a standard HTML `