> For the complete documentation index, see [llms.txt](https://help.checkoutchamp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/funnel-visualizer/edit-funnel-settings/payments/twint.md).

# TWINT

{% hint style="info" %}
TWINT is supported through the Stripe V2 and Mollie gateways
{% endhint %}

***

### Step 1: Login and navigate to the funnel to add TWINT <a href="#sofort-checkoutchamp-step1-loginandnavigatetothefunneltoaddsofort" id="sofort-checkoutchamp-step1-loginandnavigatetothefunneltoaddsofort"></a>

***

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

***

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

***

### Step 4: Add the payment gateway on which to transact <a href="#sofort-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact" id="sofort-checkoutchamp-step4-addthepaymentgatewayonwhichtotransact"></a>

* Stripe V2 gateways can be selected here

***

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

***

### Step 6: Edit Checkout page to add the TWINT button <a href="#sofort-checkoutchamp-step6-editcheckoutpagetoaddthesofortbutton" id="sofort-checkoutchamp-step6-editcheckoutpagetoaddthesofortbutton"></a>

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

#### Step 6-1(button): 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="#sofort-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighte" id="sofort-checkoutchamp-step6-1-button-customizebuttonsizebyclickingonthebuttonanddraggingthehighlighte"></a>

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

#### Step 6-1(radio): Add a radio button to the page. You may design this to your preference. <a href="#sofort-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference" id="sofort-checkoutchamp-step6-1-radio-addaradiobuttontothepage.youmaydesignthistoyourpreference"></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 TWINT in all caps. <a href="#sofort-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho" id="sofort-checkoutchamp-step6-2-radio-selecttheradiobuttonandchangethesettingssothenameis-payment_metho"></a>

Use either all buttons or radios for pay source selection to mitigate any conflicts

***

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

***

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

***

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

Customer info fields are required for this alternate payment method.
