# Affirm

### Step 1: Login and navigate to the funnel on which to add Affirm <a href="#affirm-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddaffirm" id="affirm-checkoutchamp-step1-loginandnavigatetothefunnelonwhichtoaddaffirm"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FO8Q8chA8wKp23ueGwkXS%2Fimage.png?alt=media&#x26;token=b48f7487-b529-423f-8bef-69e26867a6ce" alt=""><figcaption></figcaption></figure>

***

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

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FfNczexGEQhKDjBzKAkVB%2Fimage.png?alt=media&#x26;token=ebf510c3-b864-439c-ae79-1cb579c7ead9" alt=""><figcaption></figcaption></figure>

***

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

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FgPHYEKX3Cjj907Mrg8Lb%2Fimage.png?alt=media&#x26;token=d7624439-9cdc-4ffe-aac9-6c4b3f2bcfb5" alt=""><figcaption></figcaption></figure>

***

### Step 4: Add new Affirm gateway credentials <a href="#affirm-checkoutchamp-step4-addnewaffirmgatewaycredentials" id="affirm-checkoutchamp-step4-addnewaffirmgatewaycredentials"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FGA3AGaDHJ4z4zxNP4qou%2Fimage.png?alt=media&#x26;token=ad59be98-0ee3-4004-ab52-cd394a4dc4e9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2Fqbypkz1lBXH9X1rqP1Zw%2Fimage.png?alt=media&#x26;token=950d099c-ac5d-4f51-bcea-f38b866106cb" alt=""><figcaption></figcaption></figure>

1. Enter a **Gateway Title** to easily identify the Affirm account. Then add the **public\_api\_key** and **private\_api\_key** for your Affirm account. It is suggested to keep the **Limits** blank due to the fact that rates are established with each merchant though their agreement with Affirm.
2. Be sure to enter a **Mid**# and an accurate **Descriptor** value. The **Descriptor** is sent to Affirm during transaction processing.

***

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

***

### Step 6: Edit Checkout page and add Affirm button <a href="#affirm-checkoutchamp-step6-editcheckoutpageandaddaffirmbutton" id="affirm-checkoutchamp-step6-editcheckoutpageandaddaffirmbutton"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F6lppr0k2xqqELZUjCX2N%2Fimage.png?alt=media&#x26;token=2aefa52e-8c90-48b1-9715-5651ed164188" alt=""><figcaption></figcaption></figure>

### Button <a href="#affirm-checkoutchamp-button" id="affirm-checkoutchamp-button"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FByIAo16ItE7pAeGxILoe%2Fimage.png?alt=media&#x26;token=c9e701f5-d71d-40a3-b01c-a768d7172d6e" alt=""><figcaption></figcaption></figure>

#### Step 6-1: It is recommended you place this button either directly below the Shopping Cart Element’s Grand Total field or after the customer input fields on the checkout page since the customer will have to input their address information before being able to checkout with Affirm. <a href="#affirm-checkoutchamp-step6-1-itisrecommendedyouplacethisbuttoneitherdirectlybelowtheshoppingcartelem" id="affirm-checkoutchamp-step6-1-itisrecommendedyouplacethisbuttoneitherdirectlybelowtheshoppingcartelem"></a>

#### Step 6-2: 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="#affirm-checkoutchamp-step6-2-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner" id="affirm-checkoutchamp-step6-2-customizebuttonsizebyclickingonthebuttonanddraggingthehighlightedcorner"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FYtYsJs9MNba91NgFqu1a%2Fimage.png?alt=media&#x26;token=22a74cf1-6616-43cf-80ad-8a0ee5334094" alt=""><figcaption></figcaption></figure>

### Radio <a href="#affirm-checkoutchamp-radio" id="affirm-checkoutchamp-radio"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FRMmt0Fv7tnrf1zZygEv0%2Fimage.png?alt=media&#x26;token=b5e6f4cb-47a7-4267-b9b3-970de0eaeb64" alt=""><figcaption></figcaption></figure>

#### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#affirm-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="affirm-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FG6PH6mSIIzxiDU2knlQd%2Fimage.png?alt=media&#x26;token=39851c36-dd7c-4811-a8cd-0018f8603218" alt=""><figcaption></figcaption></figure>

#### Step 6-2(radio): Select the radio button and change the settings so the Name is “payment\_method”. This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Then set the Value of the radio button to the name of the pay source in all caps. <a href="#affirm-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho" id="affirm-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho"></a>

{% hint style="warning" %}
Use either all buttons or radios for pay source selection to mitigate any conflicts
{% endhint %}

***

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

***

### Step 8: Choose the Affirm button on the arrow leaving the checkout page. <a href="#affirm-checkoutchamp-step8-choosetheaffirmbuttononthearrowleavingthecheckoutpage" id="affirm-checkoutchamp-step8-choosetheaffirmbuttononthearrowleavingthecheckoutpage"></a>

{% hint style="danger" %}
If you offer affirm as a payment option you must route the customer directly to the thank you page after purchase. They do not allow for upsell processing.
{% endhint %}

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FpXIRoRCjFr789g9N5l5O%2Fimage.png?alt=media&#x26;token=e6b156c9-2252-475b-a766-f6f3a645adb2" alt=""><figcaption></figcaption></figure>

***

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

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FRXDD3Pbua3P7Cud2HXlZ%2Fimage.png?alt=media&#x26;token=d8f88f76-747c-4121-9dd4-2cda8437c0fa" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Customer info fields are required for this alternate payment method.
{% endhint %}
