iOS

Offrez Affirm comme option de paiement sur iOS.

Aperçu

Commencer un paiement avec Affirm sur un client iOS consiste à créer un formulaire de paiement, à tokeniser les renseignements des clients pour les transmettre en toute sécurité à votre serveur et à utiliser ce jeton pour initier une facturation.

Ce guide vous explique la manière de configurer le client iOS sur votre page de paiement.

Le SDK iOS est disponible sur Github.

1. Configurer Affirm sur iOS

Avec CocoaPods

1. Si ce n'est pas déjà fait, installez la dernière version de CocoaPods.
2. Si vous n'avez pas de Podfile existant, exécutez la commande suivante pour en créer un :

pod init

3. Ajoutez cette ligne à votre Podfile :

pod 'AffirmSDK'

4. Exécutez la commande suivante :

pod install

5. N'oubliez pas d'utiliser le fichier .xcworkspacepour ouvrir votre projet dans Xcode, au lieu du fichier .xcodeproj fichier, à partir de maintenant.
6. À l'avenir, pour mettre à jour vers la dernière version du SDK, exécutez simplement :

pod update AffirmSDK

Avec Carthage

1. Si ce n'est pas déjà fait, installez la dernière version de Carthage.
2. Ajoutez cette ligne à votre Fichiercart:

github "Affirm/affirm-merchant-sdk-ios"

3. Suivez les instructions d'installation de Carthage.
4. À l'avenir, pour passer à la dernière version du SDK, exécutez la commande suivante :

carthage update affirm-merchant-sdk-ios --platform ios

🚧

Pour en savoir plus sur la dernière version du SDK et les versions antérieures, consultez la page des versions sur GitHub. Pour recevoir des notifications lorsqu'une nouvelle version est publiée, surveillez communiqués pour le dépôt.

2. Initialiser Affirm

Configurez le SDK avec votre clé API publique Affirm pour envoyer des demandes au serveur Affirm.

AffirmConfiguration.shared.configure(publicKey: "YOUR PUBLIC KEY", environment: .sandbox, merchantName: "Affirm Example Swift")
[[AffirmConfiguration sharedInstance] configureWithPublicKey:@"YOUR PUBLIC KEY" environment:AffirmEnvironmentSandbox merchantName:@"Affirm Example"];

3. Rendu du paiement Affirm

La création de paiement est le processus dans lequel un client utilise Affirm pour payer un achat dans votre application. Vous pouvez créer un objet checkout et lancez le paiement Affirm à l'aide de fonction Checkout.

let dollarPrice = NSDecimalNumber(string: self.amountTextField.text)
        let item = AffirmItem(name: "Affirm Test Item", sku: "test_item", unitPrice: dollarPrice, quantity: 1, url: URL(string: "http://sandbox.affirm.com/item")!)
        let shipping = AffirmShippingDetail.shippingDetail(name: "Chester Cheetah", line1: "633 Folsom Street", line2: "", city: "San Francisco", state: "CA", zipCode: "94107", countryCode: "USA")
        let checkout = AffirmCheckout(items: [item], shipping: shipping, taxAmount: NSDecimalNumber.zero, shippingAmount: NSDecimalNumber.zero, discounts: nil, metadata: nil, financingProgram: nil, orderId: "JKLMO4321")

        let controller = AffirmCheckoutViewController.start(checkout: checkout, useVCN: false, delegate: self)
        present(controller, animated: true, completion: nil)
// initialize an AffirmItem with item details
AffirmItem *item = [AffirmItem itemWithName:@"Affirm Test Item" SKU:@"test_item" unitPrice:price quantity:1 URL:[NSURL URLWithString:@"http://sandbox.affirm.com/item"]];

// initialize an AffirmShippingDetail with the user's shipping address
AffirmShippingDetail *shipping = [AffirmShippingDetail shippingDetailWithName:@"Chester Cheetah" addressWithLine1:@"633 Folsom Street" line2:@"" city:@"San Francisco" state:@"CA" zipCode:@"94107" countryCode:@"USA"];

// initialize an AffirmCheckout object with the item(s), shipping details, tax amount, shipping amount, discounts, financing program, and order ID
AffirmCheckout *checkout = [[AffirmCheckout alloc] initWithItems:@[item] shipping:shipping taxAmount:[NSDecimalNumber zero] shippingAmount:[NSDecimalNumber zero] discounts:nil metadata:nil financingProgram:nil orderId:@"JKLMO4321"];

// The minimum requirements are to initialize the AffirmCheckout object with the item(s), shipping details, and payout Amount
AffirmCheckout *checkout = [AffirmCheckout checkoutWithItems:@[item] shipping:shipping payoutAmount:price];

// initialize an UINavigationController with the checkout object and present it
UINavigationController *nav = [AffirmCheckoutViewController startCheckoutWithNavigation:checkout useVCN:NO getReasonCodes:NO delegate:self];
[self presentViewController:nav animated:YES completion:nil];

// It is recommended that you round the total in the checkout request to two decimal places. Affirm SDK converts the float total to integer cents before initiating the checkout, so may round up or down depending on the decimal places. Ensure that the rounding in your app uses the same calculation across your other backend systems, otherwise, it may cause an error of 1 cent or more in the total validation on your end.

Ajouter un message promotionnel d'Affirm

Les composants de la messagerie promotionnelle Affirm - messages de paiement mensuels et modaux éducatifs - expliquent aux clients comment ils peuvent utiliser Affirm pour financer leurs achats. Les promotions se composent de messages promotionnels, qui apparaissent directement dans votre application et d'une fenêtre modale, qui offre aux utilisateurs la possibilité de se préqualifier.

Pour créer une vue de messagerie promotionnelle, nous avons fourni la classe AffirmPromotionalButton , qui vous oblige uniquement à configurer et à ajouter à votre vue pour l'implémentation.

Pour mettre en œuvre le bouton « AffirmPromotionalButton » :

self.promotionalButton = [[AffirmPromotionalButton alloc] initWithPromoID:@"promo_set_ios"
                                                                  showCTA:YES
                                                                 pageType:AffirmPageTypeProduct
                                                 presentingViewController:self
                                                                    frame:CGRectMake(0, 0, 315, 34)];
[self.stackView insertArrangedSubview:self.promotionalButton atIndex:0];

Utilisez ce qui suit pour afficher ou actualiser les messages promotionnels :

[self.promotionalButton configureByHtmlStylingWithAmount:[NSDecimalNumber decimalNumberWithString:amountText]
                                          affirmLogoType:AffirmLogoTypeName
                                             affirmColor:AffirmColorTypeBlue
                                           remoteFontURL:[NSURL URLWithString:@"https://fonts.googleapis.com/css?family=Saira+Stencil+One&display=swap"]
                                            remoteCssURL:url];
self.promotionalButton.configure(amount: NSDecimalNumber(string: amountText),
                         affirmLogoType: .name,
                            affirmColor: .blue,
                                   font: UIFont.italicSystemFont(ofSize: 15),
                              textColor: .gray)

Procédez comme suit pour utiliser les polices locales :

1. Ajoutez les fichiers de police à votre projet (assurez-vous que les fichiers sont correctement ciblés dans votre application).
2. Ajoutez les fichiers de police à votre App-Info.plist.
3. Utilisez la police de votre fichier CSS. Par exemple :

@font-face
{
font-family: 'OpenSansCondensed-Bold';
src: local('OpenSansCondensed-Bold'),url('OpenSansCondensed-Bold.ttf') format('truetype');
}

body {
font-family: 'OpenSansCondensed-Light';
font-weight: normal;
!important;
}

📘

Si aucun message promotionnel n'est renvoyé, le bouton sera automatiquement masqué.

Appuyez sur le bouton Promotionnel pour ouvrir automatiquement un modal dans un AffirmPrequalModalViewController avec plus de renseignements, y compris (si vous l'avez configuré) un bouton qui invite l'utilisateur à se préqualifier pour le financement Affirm.

Récupérer la chaîne brute du message "Aussi peu que"

Vous pouvez récupérer une chaîne brute en utilisant AffirmDataHandler.

NSDecimalNumber *dollarPrice = [NSDecimalNumber decimalNumberWithString:self.amountTextField.text];
[AffirmDataHandler getPromoMessageWithPromoID:@"promo_set_ios"
                                       amount:dollarPrice
                                      showCTA:YES
                                     pageType:AffirmPageTypeBanner
                                     logoType:AffirmLogoTypeName
                                    colorType:AffirmColorTypeBlue
                                         font:[UIFont boldSystemFontOfSize:15]
                                    textColor:[UIColor grayColor]
                     presentingViewController:self
                            completionHandler:^(NSAttributedString *attributedString, UIViewController *viewController, NSError *error) {
                                [self.promoButton setAttributedTitle:attributedString forState:UIControlStateNormal];
                                self.promoViewController = viewController;
}];

Après cela, vous pouvez présenter le modal promotionnel en utilisant ce qui suit :

UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:self.promoViewController];
[self presentViewController:nav animated:YES completion:nil];
  • initWithPromoId – Affirm fournit cette ID promotionnelle

    • showCTA – Pour afficher le lien vers le modal
    • pageType - Affirm fournit ce type de Page
  • Bouton Configurer :

    • configureWithAmount: Le prix du produit ou du panier au format NSDecimalNumber
    • affirmLogoType: Reglez-le comme soit AffirmDisplayTypeLogo, AffirmDisplayTypeText, AffirmDisplayTypeSymbolou AffirmDisplayTypeSymbolHollow
    • affirmColor: Reglez-le comme soit AffirmColorTypeBlue, AffirmColorTypeBlackou AffirmColorTypeWhite

Ajouter un modal éducatif

En tapant sur  AffirmAsLowAsButton ouvre un modal éducatif basé sur les éléments suivants :

  • Lorsque alaEnabled est défini sur true et le montant est supérieur ou égal à 50, le client voit une fenêtre modale avec des renseignements sur la tarification
  • Lorsque alaEnabled est défini sur true et le montant est inférieur à 50, le client voit un modal de site sans renseignements sur les prix
  • Lorsque alaEnabled est défini sur false le client voit un site modal sans renseignements sur les prix

Pour afficher une fenêtre modale ailleurs dans l'application, initialisez et affichez une instance de la VC modale comme suit :

Appuyez sur le bouton Promotionnel pour ouvrir automatiquement un modal dans un AffirmPrequalModalViewController avec plus de renseignements, y compris (si vous l'avez configuré) un bouton qui invite l'utilisateur à se préqualifier pour le financement Affirm.

AffirmPromoModalViewController *viewController = [[AffirmPromoModalViewController alloc] initWithPromoId:@"promo_id" amount:amount delegate:delegate];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:viewController];
[self.presentingViewController presentViewController:nav animated:YES completion:nil];
  • Le prix du produit ou du panier en NSDecimal (une valeur inférieure à amount ouvre un site modal sans information sur les prix)
  • promoId: Affirm fournit cet identifiant de Promo

Suivre la commande confirmée

L'événement trackOrderConfirmed se déclenche lorsqu'un client effectue son achat. Le SDK fournit la classe AffirmOrderTrackerViewController pour le suivre. Il nécessite AffirmOrder et un tableau contenant AffirmProduct.

[AffirmOrderTrackerViewController trackOrder:order products:@[product0, product1]];

📘

Cette fonctionnalité sera améliorée une fois le point de terminaison prêt pour l'application et disparaîtra au bout de 5 secondes.

5. Gérer les rappels

L'objet AffirmCheckoutDelegate qui reçoit des messages à différentes étapes du processus de paiement. Il retournera checkout_token de ce délégué.

func checkout(_ checkoutViewController: AffirmCheckoutViewController, completedWithToken checkoutToken: String)
- (void)checkout:(AffirmCheckoutViewController *)checkoutViewController completedWithToken:(NSString *)checkoutToken

Pour plus de rappels, veuillez consulter la référence du code.

👍

Une fois que le paiement a été confirmé par l'utilisateur, l'objet AffirmCheckoutDelegate recevra un checkout_token. Ce jeton doit être transféré sur votre serveur, qui doit ensuite être utilisé pour autoriser des frais sur le compte de l'utilisateur.

6. Créer une charge

Lorsqu'un client réussit à passer à la caisse, il est enregistré comme une nouvelle tentative d'achat. Cela doit être géré côté serveur pour être traité via notre API Charges.