# MobilePay

{% hint style="info" %}
MobilePay is supported through Stripe V2 and Adyen V2 gateways
{% endhint %}

***

### Step 1: Login and navigate to the funnel to add MobilePay <a href="#ideal-checkoutchamp-step1-loginandnavigatetothefunneltoaddideal" id="ideal-checkoutchamp-step1-loginandnavigatetothefunneltoaddideal"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FHRMTOSqNBk0AgrwPdEQB%2Fimage.png?alt=media&#x26;token=92874949-b220-4b06-8ff8-c98f3b388005" alt="" width="563"><figcaption></figcaption></figure>

***

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

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FxyLJoYzKVTUVdBTaaQxK%2Fimage.png?alt=media&#x26;token=d6dc9a0d-99b8-4849-8db2-5cea47190671" alt="" width="563"><figcaption></figcaption></figure>

***

### Step 3: Select a payment gateway on which to transact <a href="#ideal-checkoutchamp-step4-selectapaymentgatewayonwhichtotransact" id="ideal-checkoutchamp-step4-selectapaymentgatewayonwhichtotransact"></a>

* Choose the gateway for MobilePay. Press the + button to add a new gateway.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FB3X0zkFFvXYXg6rrtsVs%2Fimage.png?alt=media&#x26;token=0e0eb23a-a9cd-4799-aae0-28f2e5ed10eb" alt="" width="563"><figcaption></figcaption></figure>

***

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

***

### Step 5: Edit Checkout page to add the MobilePay button <a href="#ideal-checkoutchamp-step6-editcheckoutpagetoaddtheidealbutton" id="ideal-checkoutchamp-step6-editcheckoutpagetoaddtheidealbutton"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F9o5YQivyelvLZjrLWNWj%2Fimage.png?alt=media&#x26;token=94ed1942-8d5e-482d-9c9a-a6f8c4d82759" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F8bG6ES9FzkIpqSDA0cOH%2Fimage.png?alt=media&#x26;token=4dc19044-4cca-44d1-9224-dc41139a5a32" alt="" width="563"><figcaption></figcaption></figure>

#### Customize button size by clicking on the button and dragging the highlighted corners or use the Settings tab for advanced edits. On the Settings tab, be sure the Action is set to *Submit + Route* <a href="#ideal-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighted" id="ideal-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighted"></a>

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

#### Add a form radio button to the page. Design this to your preference. <a href="#ideal-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="ideal-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></a>

#### Select the radio button and set Name = payment\_method.   This may also be used with the payment toggler by setting the name to “fk-payment-option-toggler“. Set the Value of the radio button to MOBILEPAY (in all caps). <a href="#ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a>

#### 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 MOBILEPAY (in all caps). <a href="#ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F54KGrSCfIGgziaPSXq46%2Fimage.png?alt=media&#x26;token=a7344017-f163-459c-81eb-93e9313d4052" alt=""><figcaption></figcaption></figure>

#### &#x20;<a href="#ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method" id="ideal-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_method"></a>

{% hint style="warning" %}
Use either all buttons or radios for pay source selection.  Do not mix the method on the page.
{% endhint %}

***

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

***

### Step 7: On the arrow leaving the checkout page, choose the MobilePay button. <a href="#ideal-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheidealbutton" id="ideal-checkoutchamp-step8-onthearrowleavingthecheckoutpage-choosetheidealbutton"></a>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FNQu35wB7hifXyT29VX20%2Fimage.png?alt=media&#x26;token=4b355675-efbc-40b9-9672-30f01fd72efc" alt=""><figcaption></figcaption></figure>

***

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

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