# Afterpay

{% hint style="warning" %}
**Disclaimers:**

* ***No card details are stored for merchants using Afterpay’s Payment Gateway***
* ***Afterpay will only work for one-time purchases and will NOT support one-click upsells nor recurring billing/subscriptions***
* ***You can enable the “Multi-Pay Rebills” setting which will require a credit card on the checkout pages to accept one-click upsells and recurring payment***
* **Customer info fields are required for this alternate payment method.**
  {% endhint %}

{% hint style="info" %}
Afterpay is supported on Afterpay, Adyen V2, and Stripe V2 gateways
{% endhint %}

{% hint style="info" %}
**Clearpay** is also supported. Please follow the same documentation using Afterpay and drag on the Clearpay button instead of the Afterpay button on step 6.
{% endhint %}

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F704ld31vk2YVJNZjT3fL%2Fimage.png?alt=media&#x26;token=6d096b35-8dd7-4b06-8023-714689715424" alt=""><figcaption></figcaption></figure>

***

### Step 1: Login and navigate to the funnel you’d like to add Afterpay to <a href="#afterpay-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddafterpayto" id="afterpay-checkoutchamp-step1-loginandnavigatetothefunnelyoudliketoaddafterpayto"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2Fq9a6Ces7emkRhIR2mWqU%2Fimage.png?alt=media&#x26;token=edca9efd-e4c8-4054-bc11-37efff0fad3e" alt=""><figcaption></figcaption></figure>

***

### Step 2: Click the gear button on the top left to open Settings <a href="#afterpay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings" id="afterpay-checkoutchamp-step2-clickthegearbuttononthetoplefttoopensettings"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F6gd7OEHrAUnuJZTRNoYo%2Fimage.png?alt=media&#x26;token=f6eb5cc5-8595-46dd-9356-3e820660ac5c" alt=""><figcaption></figcaption></figure>

***

### Step 3: Open the Payments section <a href="#afterpay-checkoutchamp-step3-openthepaymentssection" id="afterpay-checkoutchamp-step3-openthepaymentssection"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2Fzb2UQCcB31I5RCzW5oQb%2Fimage.png?alt=media&#x26;token=8e66aca9-d67e-436a-9a1b-6908c1d76ad2" alt=""><figcaption></figcaption></figure>

***

### Step 4: Add or select existing Afterpay or Adyen V2 or Stripe V2 gateway credentials <a href="#afterpay-checkoutchamp-step4-addorselectexistingafterpaygatewaycredentials" id="afterpay-checkoutchamp-step4-addorselectexistingafterpaygatewaycredentials"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F3xcuDX6wVtGXBsZccusL%2Fimage.png?alt=media&#x26;token=7a1e96a0-5644-4c68-8663-f07a6f716134" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FRWqTZhNwvgRPzsGH9I44%2Fimage.png?alt=media&#x26;token=a9d92a69-3dfd-4acf-97a7-39cc8797d0fe" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

* Enter a **Title** to easily identify your Afterpay account.
* **Merchant\_ID** - Found on the footer of the Home page inside your Afterpay account.
* **Secret\_Key** - This is emailed to the account owner upon the account's creation. If you are having difficulties finding this you can reach out to your Business Development Manager or you can reach Afterpay Merchant Support: <https://developers.afterpay.com/afterpay-online/docs/merchant-support>
* Add account **Limits**, **Descriptor,** and **Mid #**
  {% endhint %}

***

### Step 5: Save and Continue <a href="#afterpay-checkoutchamp-step5-saveandcontinue" id="afterpay-checkoutchamp-step5-saveandcontinue"></a>

***

### Step 6: Edit Checkout page and add Afterpay button <a href="#afterpay-checkoutchamp-step6-editcheckoutpageandaddafterpaybutton" id="afterpay-checkoutchamp-step6-editcheckoutpageandaddafterpaybutton"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FWdfpoHUyMVFoqKs3klws%2Fimage.png?alt=media&#x26;token=2ad25c33-b7cd-4e0c-bb4c-41d79341b265" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FOdUV805TwAFgfGCaOieW%2Fimage.png?alt=media&#x26;token=363b573f-abb8-41ec-a44d-11fb42b56433" alt=""><figcaption></figcaption></figure>

***

#### Step 6-1: Customize button size by clicking on the button and dragging the highlighted corners or use the Dimension tab for advanced edits. Under the Settings for the element, be sure the Action is set to *Submit + Route* <a href="#afterpay-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorn" id="afterpay-checkoutchamp-step6-1-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorn"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FXFpck29VCcfe8xcXPzst%2Fimage.png?alt=media&#x26;token=5f3d72d0-50a0-40cb-a6c4-8821117e7261" alt=""><figcaption></figcaption></figure>

***

### Step 7: Save the page. Exit the page builder. <a href="#afterpay-checkoutchamp-step7-savethepage.exitthepagebuilder" id="afterpay-checkoutchamp-step7-savethepage.exitthepagebuilder"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FLC9sVZrobyTm5iUy4erE%2Fimage.png?alt=media&#x26;token=1acf4b65-7280-4687-9b78-12a97dd22418" alt=""><figcaption></figcaption></figure>

***

### Step 8: On the arrow leaving the checkout page, choose the Afterpay button. <a href="#afterpay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheafterpaybutton" id="afterpay-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheafterpaybutton"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FvWJVEATWdMoeLCNjQOQ6%2Fimage.png?alt=media&#x26;token=bede6768-165a-47ef-86c2-48fd65cf9e55" alt=""><figcaption></figcaption></figure>

***

### Step 9: Publish. You’re done and ready to test! <a href="#afterpay-checkoutchamp-step9-publish.youredoneandreadytotest" id="afterpay-checkoutchamp-step9-publish.youredoneandreadytotest"></a>

&#x20;
