How do I integrate Braintree with Conjured Subscriptions for credit card payments?
To integrate Braintree, start by going to your Braintree dashboard and select the Settings > API option from the menu in the upper right hand corner.
Click the "Generate New API Key". Copy the public key, the private key, and your Merchant ID (which can be found further down on the page under "Client-Side Encryption Keys"), and head over to the Settings > General page within Conjured Subscriptions. Next to the "Braintree Integration" section, click "Enable", enter your public key, private key, and Merchant ID in the boxes provided.
*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".
If your Braintree account processes transactions in multiple currencies, you'll need to also enter your Merchant Account ID. This value is *only* required if your Braintree account has multiple merchant accounts attached. Braintree's documentation describes your Merchant Account ID as follows:
While merchant account ID and merchant ID sound similar, they are different values with distinct purposes, and are often confused with one another.
Your merchant ID is a unique identifier for your entire gateway account and one of the four API credentials. This value is required for certain actions, such as connecting your API calls to the Braintree gateway or setting up third-party shopping carts.
Your merchant account ID is a unique identifier for a specific merchant account in your gateway. It is used to specify which merchant account to use when creating a transaction, creating a subscription, verifying a payment method, or generating a client token.
To find your Merchant Account ID, go to Settings > Business within your Braintree dashboard, and scroll down to the section titled "Merchant Account". Find the Merchant Account ID you'd like to use, and enter that into Conjured Subscriptions.
Finally, scroll up to the Payment Options section, and set "Credit Card Payments" to Braintree.
Save your changes at the bottom of the page.
After you've added Braintree 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> <div id="number" placeholder="Card Number"></div> <div id="month" placeholder="MM"></div> <div id="year" placeholder="YYYY"></div> <div id="cvc" placeholder="CVC"></div> </div>
Braintree will automatically convert the div containers into secure, hosted input fields for the customer to enter their data. Make sure the fields are 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 - Braintree 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 email@example.com.