How do I integrate Stripe with Conjured Subscriptions for credit card payments?
To integrate Stripe, start by going to your Stripe dashboard and select the Developers > API keys option from the menu.
Click the "Create secret key" and give your key a name (ex: "Conjured Subscriptions"). Copy the secret key (it should start with the prefix "sk_live_") * and the publishable key (which starts with the prefix "pk_live_")* and head over to the Settings > General page within Conjured Subscriptions. Next to the "Stripe Integration" section, click "Enable", enter your publishable key and secret key in the boxes provided.
*NOTE: If you're on your development store and would prefer to use test API keys, toggle the "View test data" switch in the Stripe dashboard navigation. Follow all the same instructions provided, except your publishable key will have the prefix "pk_test_" and your secret key will have the prefix "sk_test_" instead. This will allow you to run test transactions instead of actually charging credit cards.
Finally, scroll up to the Payment Options section, and set "Credit Card Payments" to Stripe.
Save your changes at the bottom of the page.
After you've added Stripe 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="number">Credit Card Number</label> <input type="text" id="number" /> <label for="month">Expiration Month (MM)</label> <input type="text" id="month" maxlength="2" /> <label for="year">Expiration Year (YYYY)</label> <input type="text" id="year" maxlength="4" /> <label for="cvc">CVC</label> <input type="text" id="cvc" maxlength="4" /> </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 - Stripe 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.