How do I integrate Authorize.net with Conjured Subscriptions for credit card payments?
To integrate Authorize.net, start by going to your Authorize.net dashboard and select the Account > API Credentials & Keys option from the menu.
Select "Obtain: New Transaction Key", and click "Submit". Copy the transaction key and the API Login ID and head over to the Settings > General page within Conjured Subscriptions. Next to the "Authorize.net Integration" section, click "Enable", enter your transaction key and API Login ID in the boxes provided.
Next, go back to Authorize.net and select Account > Manage Public Client Keys. Copy your Client Key from that page and paste it into the field provided within Conjured Subscriptions.
*NOTE: If you're on your development store and would prefer to run test transactions instead of actually charging credit cards, simply change the Environment drop-down to "Sandbox". Make sure you're using Authorize.net Sandbox credentials
Finally, scroll up to the Payment Options section, and set "Credit Card Payments" to Authorize.net.
Save your changes at the bottom of the page.
After you've added Authorize.net as your credit card payment option, you'll need to update both the Checkout page, the Manage Billing/Shipping page, and anywhere else you might be collecting credit card information (such as the Account Dashboard page).
The first thing we recommend is to take a backup of your page styles to make sure you can roll back your changes in case you have any trouble. Even better, test this implementation on your development site first!
Once you've taken your backup, go to Settings > Page Styles within Conjured Subscriptions, and find the section of your code where the credit card fields should be displayed. Add the following fields:
<div data-creditcard-selected> <label for="cardNumber">Credit Card Number</label> <input type="text" id="cardNumber" /> <label for="expMonth">Expiration Month (MM)</label> <input type="text" id="expMonth" maxlength="2" /> <label for="expYear">Expiration Year (YYYY)</label> <input type="text" id="expYear" maxlength="4" /> <label for="cardCode">CVC</label> <input type="text" id="cardCode" maxlength="4" /> <input type="hidden" name="dataValue" id="dataValue" /> <input type="hidden" name="dataDescriptor" id="dataDescriptor" /> </div>
Style the fields however you'd like, but make sure they're contained in a div with the "data-creditcard-selected" parameter, and that the ids match the ones in the example above.
That's all there is to it - Authorize.net should now function as your credit card processor. If you have any trouble with the implementation, don't hesitate to reach out to us at firstname.lastname@example.org.